Forum SELFHTML Archives du forum 2004 octobre| Forum SELFHTML Archives du forum 2004 octobre |
 |
Forum SELFHTML: Archives: |
 |
|
 |
|
Le message suivant est de: Ludo, 23. 10. 2004, 15:49
Bonjour tout le monde.
Voici mon problème : Afin de créer un dite facile d'entretien et peu encombrant, j'ai choisi de simplifier au maximum mon site. J'ai donc opté pour les feuilles de style.
Mon site (en php) se présente de la manière suivante. Un tableau à une ligne et 2 colones. La première où j'insère mon menu et la seconde où je rédige le contenu de la page en question. Ma première colone est en width="auto" et la seconde en width="100%".
Tous mes styles (body, a, a:hover, li, div...) sont définis dans une feuille de style indépendante que j'appelle dans ma balise head.
Jusque ici tout va bien.
Afin de gagner en place chez l'hébergeur et en facilité de mise à jour j'ai décider d'inclure mon menu (fonction include en php). Celà fonctionne mais mal. Le problème : la largeur de la première colone de mon tableau (width="auto") ne s'adapte pa au contenu. Certaines liens de mon menu "repassent à la ligne".
La largeur d'un tableau peut-elle s'adapteur si le contenu de la case est en include ? Mon menu contient des div ; celà pose-t-il problème ?
Merci d'avance
 |
Le message suivant est de: Ludo, 
katumbiman@yahoo.fr, 23. 10. 2004, 16:14
Je poste le scripte de mes fichiers :
index.php
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="auto">
<tr>
<td rowspan="2" width="auto" valign="top"><?php include ('menus.php') ; ?></td>
<td width="100%" valign="top"> </td>
</tr>
<tr>
<td width="100%" height="auto"><div align="right"><a href="#top">Haut de page</a></div></td>
</tr>
</table>
</body>
</html>
----------------------------
style.css
/* CSS Document */
body {
background-color: #FFFFFF;
color: #20394F;
}
body, td, p, div, span, input, textarea {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
}
a {
color:#3d6cc3;
text-decoration: none;
}
#MENU {
border-right: #78B1F3 1px solid;
border-top: #78B1F3 0px solid;
border-left: #78B1F3 1px solid;
border-bottom: #78B1F3 1px solid;
}
#MENU a {
font-weight: bold;
color:#3B6CEE;
}
#MENU a:hover {
text-decoration: underline;
color:#FF0000;
}
#MENU li {
list-style-image: url(images/puce.gif);
}
#MENU .TITRE {
color: #FFFFFF;
height:auto;
text-align: center;
font-weight: 700;
text-transform: capitalize;
letter-spacing:0.1em;
font-size: 13px;
background-image: url(images/title.gif);
background-repeat: repeat-x;
}
----------------------
menus.php
<div id="MENU">
<div class="TITRE"> Menu 1 </div>
<li><a href="index.php"> Accueil </a></li>
<li><a> Contact </a></li>
<li><a href="javascript:AjoutFavo()"> Ajouter aux favoris </a></li>
<li><a> Echange de liens </a></li>
<li><a> Partenaires </a></li>
</div>
<br>
<div id="MENU">
<div class="TITRE">Menu 2</div>
<li><a> Sous-menu 1 </a></li>
<li><a> Sous-menu 2 </a></li>
<li><a> Sous-menu 3 </a></li>
<li><a> Sous-menu 4 </a></li>
<li><a> Sous-menu 5 </a></li>
</div>
----------
Merci
| |
Le message suivant est de: travbourq, travers.bourquin@wanadoo.fr, 23. 10. 2004, 20:52
Bonjour
N'utilise pas de <table>. Structure ton site en colonnes avec des <div class="menu"> et <div class="contenu">
Détermine les styles "menu" et "contenu" avec les prorpiétés position top left width
Travbourq
| |
Le message suivant est de: Ludo, katumbiman@yahoo.fr, 24. 10. 2004, 14:44
Ok. J'avais déjà essayé auparavant mais j'étai bloqué par un autre problème.
Le site doit avoir cette allure au final :
Une entête de 100% de la largeur avec hauteur automatique. Idem pour le pied de page.
Un menu à gauche hauteur et largeur auto. Et Le contenu à droite en hauteur auto et en largeur 100%.
Je travail donc avec des div en position relative. Le truc c'est que j'ai un souci avec mes 2 div centraux (menu et contenu). J'ai mis un float: left sur menu donc le div contenu se position à droite de menu. comme ça :
-------------------------------------------
| Entête |
-------------------------------------------
| menu | contenu |
-------------------------------------------
| Pied |
-------------------------------------------
Mais lorsque la hauteur de contenu est différentede celle du menu j'obtiens ça :
-------------------------------------------
| Entête |
-------------------------------------------
| menu | contenu |
| menu |----------------------------------
| menu | |
--------- |
| Pied |
-------------------------------------------
ou ça :
-------------------------------------------
| Entête |
-------------------------------------------
| menu |
-------------------------------------------
| Contenu |
| Contenu |
-------------------------------------------
| Pied |
-------------------------------------------
Je pense que le problème viens du float left mais alors là je ne sais pas ???
C'est pour ça que j'était parti sur l'utilisation d'un tableau pour ma mise en page (c'est pourtant mois pratique pour modifier un site par la suite).
Dans le tableau, quand la hauteur d'un des deux éléments (menu et contenu) est plus importante que l'autre, la hauteur des deux se fixe sur la plus grande valeur et là, pas de problème.
Si vous voyez une solution ??? Merci d'avance.
| |
Le message suivant est de: TravBourq, travers.bourquin@wanadoo.fr, 26. 10. 2004, 21:52
Bonsoir
Il faut poursuivre l'idée des <div> y compris avec entête et pied de page.
Quelque chose comme cela :
<div class=entete>...</div>
<div class=conteneur>
<div class=menu>..............</div>
<div class=contenu>.........</div>
</div>
<div class=pied>.....</div>
Le positionnement relatif peut provoquer bien des surprises !
TravBourq
| |
Le message suivant est de: Ludo, katumbiman@yahoo.fr, 28. 10. 2004, 23:34
Bonjour.
J'ai enfin réussi (après de nombreux essais) à obtenir l'effet recherché en insérant dans mon script un tableau à 1 ligne et 1 colonne.
----------
script :
----------
<div class=entete>...</div>
<div class=menu>..............</div>
<div class=contenu>
<table width="auto" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="auto">...........</td>
</tr>
</table>
</div>
<div class=pied>.....</div>
Sans cette petite astuce (le tableau), j'obtenais le résultat suivant :
-------------------------------------------
| Entête |
-------------------------------------------
| menu | Contenu |
--------- Contenu |
| Contenu |
| Contenu |
-------------------------------------------
| Pied |
-------------------------------------------
Désormais mon problème est réglé.
Merci quand même !
| |
Le message suivant est de: Emmanuel, 25. 10. 2004, 13:33
Bonjour,
"Certains liens de mon menu "repassent à la ligne"."
Pourquoi ne pas mettre des blanc incassables dans tes liens de menu ou en tout cas dans celui qui sera le plus long sur tel page?
ça peux parraitre pas très élégant mais pourquoi faire compliqué?
A+
Emmanuel
|
| Forum SELFHTML Archives du forum 2004 octobre |
© 1998-2004 selfhtml@fr.selfhtml.org
(CSS)