J'ai un code HTML comme ceci (j'ai remplacé les ouvertures et fermetures de balises par []) :
[?xml version="1.0" encoding="UTF-8"?]
[!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd(...)"]
[html xmlns="http://www.w3.org/1999/xhtml(...)" xml:lang="fr" lang="fr"]
[head]
[meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /]
[meta name="MSSmartTagsPreventParsing" content="TRUE" /]
[title]Test[/title]
[link rel="stylesheet" type="text/css" href="test.css" media="screen" /]
[/head]
[body]
[div id="leftPane"]
[div id="search" class="innerPane"]
[form]
[p]Search Product[br/]
[input type="text"][/p]
[/form]
[/div]
[div id="menu" class="innerPane"]
[ul]
[li]Home[/li]
[li]Lien 1[/li]
[li]Lien 2[/li]
[/ul]
[/div]
[div id="catalog" class="innerPane"]
[ul]
[li]UN[/li]
[li]DEUX[/li]
[li]TROIS[/li]
[/ul]
[/div]
[/div]
[div id="rightPane"]
[div id="navigation"]
Home ] Test
[/div]
[div id="content"]
[p]abc[/p]
[/div]
[/div]
[/body]
[/html]
J'aimerais que la page s'affiche de cette manière :
___________________________________________________________________
|.................|..............................................|
|....leftPane......|............rightPane...........................|
|.................|..............................................|
|.................|..............................................|
|.................|..............................................|
|.................|..............................................|
|.................|..............................................|
|_________________________________________________________________|
Bref, rien de bien compliqué ...
Je n'arrive pas à trouver comment positionner ça convenablement pour que leftPane et rightPane aient la même hauteur, et qu'ils s'enchainent correctement de gauche à droite ...
Si quelqu'un a la solution ... (j'ai joué des heures avec les positions absolute, relative et float sans succès)
Merci ...
# et la CSS ?
Posté par gastounet . Évalué à 1.
Histoire de ne pas partir de rien... Ca fait un moment que je n'ai pas réessayé de jouer avec le positionnement.
[^] # Re: et la CSS ?
Posté par Nelis (site web personnel) . Évalué à 2.
Du style
#leftPane {
float:left;
width:10em;
}
#rightPane {
margin-left:10em;
}
# à la source
Posté par Brahici . Évalué à 2.
http://www.w3c.org/TR/CSS21/visuren.html#fixed-positioning(...)
je pense que ça devrait faire ton affaire.
[^] # Re: à la source
Posté par Nelis (site web personnel) . Évalué à 2.
Est-ce qu'il y aurait moyen d'avoir le même résultat avec relative ou float ?
[^] # Re: à la source
Posté par Cali_Mero . Évalué à 2.
# openweb est ton ami
Posté par Epsos . Évalué à 3.
Les cours d'initiation au positionnement float devraient t'aider ...
Basiquement, tu vas te retrouver avec ceci :
.leftpanel
{
float: left;
width : 50%;
}
.rightpanel
{
float: left;
width : 50%;
}
L'important ici ce sont les width :si tu ne les specifient pas en conjonction avec ton float, ca ne marche pas.
[^] # Re: openweb est ton ami
Posté par Epsos . Évalué à 2.
$> cat test.css
#leftPane
{
float: left;
width: 50%;
}
#rightPane
{
float: left;
width: 50%;
}
Et ca marche a la fois sous IE et sous firefox.
Sinon, tu peux t'inspirer de la css de Wiclear si tu veux (wiclear.free.fr) : ca ressemble pas mal a ce que tu veux faire ...
[^] # Re: openweb est ton ami
Posté par Nelis (site web personnel) . Évalué à 2.
body {
height: 750px;
overflow:none;
margin:10px;
padding:0px;
}
#leftPane {
border: solid 1px;
float: left;
width : 20%;
height:750px;
}
#rightPane {
border: solid 1px;
border-left: 0px;
float: left;
width : 79%;
height:750px;
}
Merci beaucoup !!
[^] # Re: openweb est ton ami
Posté par Nelis (site web personnel) . Évalué à 3.
Merci bcp, au niveau des width c'est parfait !
Il faut que je chipotte encore un peu pour le height maintenant.
Suivre le flux des commentaires
Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.