Retourner aux forums || Retourner au forum Programmation.web
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 ...
Vache qui rit, à moitié dans son lit
et la CSS ?
On peut voir la CSS ?
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 (page perso, ) le 01/03/2005 à 15:11. (lien). Évalué à 2.J'ai essayé tellement de choses ...
Du style
#leftPane {
float:left;
width:10em;
}
#rightPane {
margin-left:10em;
}--
Vache qui rit, à moitié dans son lit
à la source
dans la spécification CSS2, il y a un bon exemple de mise en page en colonne que j'utilise souvent (c'est là pour ça :-))
http://www.w3c.org/TR/CSS21/visuren.html#fixed-positioning(...)
je pense que ça devrait faire ton affaire.
python, postgresql, xml, gtk, linux, open-source !
-
[^]Re: à la source
Posté par Nelis (page perso, ) le 01/03/2005 à 15:09. (lien). Évalué à 2.Merci, cela fonctionne sauf que c'est du fixed ... Donc pour la fenetre de contenu ce n'est pas top, et en plus ça ne marche pas sous IE ....
Est-ce qu'il y aurait moyen d'avoir le même résultat avec relative ou float ?--
Vache qui rit, à moitié dans son lit-
[^]Re: à la source
-
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.
-
[^]Re: openweb est ton ami
Posté par Epsos (page perso, ) le 01/03/2005 à 15:27. (lien). Évalué à 2.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 ...-
[^]Re: openweb est ton ami
Posté par Nelis (page perso, ) le 01/03/2005 à 15:36. (lien). Évalué à 2.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
-
-
[^]Re: openweb est ton ami
Posté par Nelis (page perso, ) le 01/03/2005 à 15:30. (lien). Évalué à 3.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
Revenir en haut de page || Retourner aux forums || Retourner au forum Programmation.web
Cette page a été générée par Templeet en 0.0577s (dont 0.0048 de SQL).
Cette page est peut-être conforme xhtml 1.0.
Information sur le site.
Cette discussion est archivée, il n'est plus possible de laisser des commentaires.
Note : les commentaires appartiennent à ceux qui les ont postés. Nous n'en sommes pas responsables.