#container {
position: centered; /* centered in browser window */
min-margin: 2em; /* if browser window too little, keep 2em as margin */
width: 65em;
height: 45em;
}
#leftPane {
position: left; /* At the left in container */
width: 12em;
/* height automatically herited from container */
}
#rightPane {
position: fill; /* fill container space */
}
#searchBox {
position: top; /* At the top in leftPane */
height: 3em;
/* width automatically herited from leftPane */
}
#menu {
position: fill; /* fill leftPane space */
}
#navigation {
position: top; /* At the top in rightPane */
height: 3em;
/* width automatically herited from rightPane */
}
#content {
position: fill; /* fill rightPane space */
overflow:auto;
}
----------------------------
Ca permettrait de faire les layout bcp plus simplement ... Ici, pour les tailles et les positions, on s'y perd ... On ne sait plus qui hérite de qui, si les pourcents sont par rapport au parent ou au browser, ...
[^] # Re: C'est une façon de penser
Posté par Nelis . En réponse au journal Positionnement CSS. Évalué à 3.
HTML :
[div id="container"]
[div id="leftPane"]
[div id="searchBox"]
...
[/div]
[div id="menu"]
...
[/div]
[/div]
[div id="rightPane"]
[div id="navigation"]
...
[/div]
[div id="content"]
...
[/div]
[/div]
[/div]
CSS :
#container {
position: centered; /* centered in browser window */
min-margin: 2em; /* if browser window too little, keep 2em as margin */
width: 65em;
height: 45em;
}
#leftPane {
position: left; /* At the left in container */
width: 12em;
/* height automatically herited from container */
}
#rightPane {
position: fill; /* fill container space */
}
#searchBox {
position: top; /* At the top in leftPane */
height: 3em;
/* width automatically herited from leftPane */
}
#menu {
position: fill; /* fill leftPane space */
}
#navigation {
position: top; /* At the top in rightPane */
height: 3em;
/* width automatically herited from rightPane */
}
#content {
position: fill; /* fill rightPane space */
overflow:auto;
}
----------------------------
Ca permettrait de faire les layout bcp plus simplement ... Ici, pour les tailles et les positions, on s'y perd ... On ne sait plus qui hérite de qui, si les pourcents sont par rapport au parent ou au browser, ...