0
Bonjour,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 ...
> Lire le message (9 commentaires, moyenne: 2,1).
Vous avez demandé le commentaire #540548.
Run by 
Cette page a été générée par Templeet en 0.0617s (dont 0.0046 de SQL).
Cette page est peut-être conforme xhtml 1.0.
Information sur le site.
Faire un don !
openweb est ton ami
Va faire un tour sur openweb : www.openweb.eu.org
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.
[ Répondre ]
[^]Re: openweb est ton ami
Je viens d'essayer chez moi :
$> 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 ...
[ Répondre ]
[^]Re: openweb est ton ami
Avec ça, ça me convient :
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 !!
Vache qui rit, à moitié dans son lit
[ Répondre ]
[^]Re: openweb est ton ami
J'ai déjà essayé OpenWeb ;-)
Merci bcp, au niveau des width c'est parfait !
Il faut que je chipotte encore un peu pour le height maintenant.
Vache qui rit, à moitié dans son lit
[ Répondre ]