bonjour,
3 , 2 , 1
<edit>
les images d'origines ne sont plus accessible , voici un
ajout d'image pour garder ce topic utilisable (assez ressemblantes aux originales)
et un article intitulé : 5,4,3,2,1,0 :
http://yidille.free.fr/plux/valign/index.php?6-5-4-3-2-1-0
pour aller un peu plus loins
</edit>
(3)
c'est un codage relativement simple , et sans aprofondir , voici comment je ferais (- 1 div pour les stats )
<!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><title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
text-align: center;
}
#global {
width: 643px;
text-align: left;
margin-left: auto;
margin-right: auto;
background: transparent url(milieu.jpg) top left repeat-y;
}
#conteneur {
background: transparent url(haut.jpg) top left no-repeat;
}
#main {
position: relative;
background: transparent url(bas.jpg) bottom left no-repeat;
padding-bottom: 80px;
min-height:390px;
padding-top:120px;
}
#menu {
float: left;
margin: 100px 0px 0px 20px;
width: 150px;
}
h1 , h2 , p {
margin: 0px 0px 0px 180px;
width: 370px;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
#main {
height:390px;
}
#menu {
display:inline;
}
</style>
<![endif]-->
</head>
<body>
<div id="global">
<div id="conteneur">
<div id="main">
<div id="menu">
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Nos produits</a>
<ul>
<li><a href="#">Produit 1</a></li>
<li><a href="#">Produit 2</a></li>
<li><a href="#">Produit 3</a></li>
</ul>
</li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Liens</a></li>
</ul>
</div>
<h1>Section numéro une</h1>
<p>Elitr
fabulas mel ex. Sed admodum detracto an. In vel diam quas exerci, at
velit aliquip denique cum. His ex altera definitionem, in sumo
eloquentiam pro, nec ut posse reformidans. Nonumy aliquando vim at, in
alterum torquatos consetetur vel. Viris habemus dolores nam ea, utinam
option eu per, cu duo vidit modus deterruisset. Cum te diam persecuti.
Iudico partiendo concludaturque pro ex, no quas natum volumus est, vis
et dicunt scripta. Te ius feugiat euripidis reprehendunt, vocent
aliquip nonummy per ea, te duis graeci conceptam nam. No nullam habemus
vel, te est autem verterem detraxit, eu minimum propriae ius. Mel diam
quidam te, at cum stet convenire expetenda, cum senserit democritum te.
Ad elit ancillae neglegentur his, et eam placerat conceptam, justo
quaerendum sed te. Vel tamquam nominavi torquatos ad, te option
phaedrum pro, elit aliquip corrumpit in ius. Eum volumus pericula cu.
Per lorem saepe timeam te, cum ludus inciderint ut. Mucius rationibus
eloquentiam nec eu, virtute accusata assueverit an pri, ei mea tempor
bonorum equidem. Qui idque molestiae mnesarchum ex.</p>
<h1>Une autre grande section</h1>
<p>Sit
voluptaria consequuntur interpretaris ea, salutatus comprehensam usu
ea. Qui te summo electram iracundia, ex mel scripta tritani. Eos eius
minim laoreet ne, labitur pertinax est ne. Nam et tamquam appellantur,
enim mediocrem cu cum. Everti verear cu has, ad quo facete fastidii. Te
est alia ubique. Mea in populo utamur assueverit, delenit oportere
explicari in sit, possim abhorreant deterruisset ea ius. Eam ei augue
possit minimum. Eam cu facete mollis, debitis patrioque quaerendum duo
eu. Pri probo error id. Tation volumus cu sea, id enim agam meis vim.
Cu mucius intellegebat delicatissimi eum, illum movet labore usu ei. At
ferri ubique vix, has eu omnesque evertitur, commodo nusquam deleniti
in sed. Euismod intellegat per cu. Cum et eros quaestio, enim populo
cum in.</p>
<h2>Une sous-section</h2>
<p>Lorem
ipsum no sit altera forensibus, vix ea veniam fierent molestie. Duo
iriure veritus ei, est no regione dolores. Vel et labore nemore
referrentur, aeterno convenire eu sed, cum porro zzril te. Et ius
labitur explicari, has no quis sententiae moderatius. Aliquip scaevola
apeirian vel eu, aliquip mentitum ut pri, rebum nihil te his. Eam malis
euismod ad. Aeterno corrumpit eu quo. Solet vocent voluptatibus at cum,
animal constituto definitiones sit ei. Qui et tale recteque, habeo
persecuti dissentias in his. Id eum mollis insolens maiestatis. Minim
noster corrumpit cu usu, eu ferri oportere consequuntur vel. Porro
salutandi assentior vis ad, no has assum sonet sapientem, usu doctus
euismod te. Sed vitae noster ei, no duo sumo facer. Ne sed imperdiet
voluptatum disputationi. Wisi aliquid in pro, ex ridens tritani docendi
nam, ius ut ocurreret persecuti. Ne quo eius falli eruditi, ius alia
oblique antiopam ut, ne nec impedit corpora eligendi. His puto menandri
ad, idque similique abhorreant et pri. Ad sint inermis eligendi mea, te
sit possit offendit. Ex clita fierent eum, an qui debitis nonummy
facilisis, in per moderatius definitiones. Nonummy repudiare eos ea.
Ius modo putant expetenda ad, ius nostrud eligendi te, vis partem
minimum cu. </p></div>
</div>
</div>
</div>
</body></html>
en reutilisant tes images et ta base , l'imbrication "divite" est differente , un min-height est mis en place et le bug double marge sur le menu est pris en consideration.
(2) (-2 div pour les stat)
on peut aussi passer l'image milieu en arriere plan de body et se passer d'un div suplementaire .
<!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><title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
* {margin:0;padding:0}
body {
text-align: center;
background: transparent url(milieu.jpg) center center repeat-y;
}
#global {
width: 644px;
text-align: left;
margin-left: auto;
margin-right: auto;
background: transparent url(haut.jpg) top left no-repeat;
position:relative;
left:1px;
}
#main {
position: relative;
background: transparent url(bas.jpg) bottom left no-repeat;
padding-bottom: 80px;
min-height:390px;
padding-top:120px;
}
#menu {
float: left;
margin: 100px 0px 0px 20px;
width: 150px;
}
h1 , h2 , p {
margin: 0px 0px 0px 180px;
width: 370px;
}
ul {padding-left:1em;margin-left:1em;}
</style>
<!--[if lte IE 6]>
<style type="text/css">
#main {
height:390px;
}
#menu {
display:inline;
}
</style>
<![endif]-->
</head>
<body>
<div id="global">
<div id="main">
<div id="menu">
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Nos produits</a>
<ul>
<li><a href="#">Produit 1</a></li>
<li><a href="#">Produit 2</a></li>
<li><a href="#">Produit 3</a></li>
</ul>
</li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Liens</a></li>
</ul>
</div>
<h1>Section numéro une</h1>
<p>Elitr
fabulas mel ex. Sed admodum detracto an. In vel diam quas exerci, at
velit aliquip denique cum. His ex altera definitionem, in sumo
eloquentiam pro, nec ut posse reformidans. Nonumy aliquando vim at, in
alterum torquatos consetetur vel. Viris habemus dolores nam ea, utinam
option eu per, cu duo vidit modus deterruisset. Cum te diam persecuti.
Iudico partiendo concludaturque pro ex, no quas natum volumus est, vis
et dicunt scripta. Te ius feugiat euripidis reprehendunt, vocent
aliquip nonummy per ea, te duis graeci conceptam nam. No nullam habemus
vel, te est autem verterem detraxit, eu minimum propriae ius. Mel diam
quidam te, at cum stet convenire expetenda, cum senserit democritum te.
Ad elit ancillae neglegentur his, et eam placerat conceptam, justo
quaerendum sed te. Vel tamquam nominavi torquatos ad, te option
phaedrum pro, elit aliquip corrumpit in ius. Eum volumus pericula cu.
Per lorem saepe timeam te, cum ludus inciderint ut. Mucius rationibus
eloquentiam nec eu, virtute accusata assueverit an pri, ei mea tempor
bonorum equidem. Qui idque molestiae mnesarchum ex.</p>
<h1>Une autre grande section</h1>
<p>Sit
voluptaria consequuntur interpretaris ea, salutatus comprehensam usu
ea. Qui te summo electram iracundia, ex mel scripta tritani. Eos eius
minim laoreet ne, labitur pertinax est ne. Nam et tamquam appellantur,
enim mediocrem cu cum. Everti verear cu has, ad quo facete fastidii. Te
est alia ubique. Mea in populo utamur assueverit, delenit oportere
explicari in sit, possim abhorreant deterruisset ea ius. Eam ei augue
possit minimum. Eam cu facete mollis, debitis patrioque quaerendum duo
eu. Pri probo error id. Tation volumus cu sea, id enim agam meis vim.
Cu mucius intellegebat delicatissimi eum, illum movet labore usu ei. At
ferri ubique vix, has eu omnesque evertitur, commodo nusquam deleniti
in sed. Euismod intellegat per cu. Cum et eros quaestio, enim populo
cum in.</p>
<h2>Une sous-section</h2>
<p>Lorem
ipsum no sit altera forensibus, vix ea veniam fierent molestie. Duo
iriure veritus ei, est no regione dolores. Vel et labore nemore
referrentur, aeterno convenire eu sed, cum porro zzril te. Et ius
labitur explicari, has no quis sententiae moderatius. Aliquip scaevola
apeirian vel eu, aliquip mentitum ut pri, rebum nihil te his. Eam malis
euismod ad. Aeterno corrumpit eu quo. Solet vocent voluptatibus at cum,
animal constituto definitiones sit ei. Qui et tale recteque, habeo
persecuti dissentias in his. Id eum mollis insolens maiestatis. Minim
noster corrumpit cu usu, eu ferri oportere consequuntur vel. Porro
salutandi assentior vis ad, no has assum sonet sapientem, usu doctus
euismod te. Sed vitae noster ei, no duo sumo facer. Ne sed imperdiet
voluptatum disputationi. Wisi aliquid in pro, ex ridens tritani docendi
nam, ius ut ocurreret persecuti. Ne quo eius falli eruditi, ius alia
oblique antiopam ut, ne nec impedit corpora eligendi. His puto menandri
ad, idque similique abhorreant et pri. Ad sint inermis eligendi mea, te
sit possit offendit. Ex clita fierent eum, an qui debitis nonummy
facilisis, in per moderatius definitiones. Nonummy repudiare eos ea.
Ius modo putant expetenda ad, ius nostrud eligendi te, vis partem
minimum cu. </p></div>
</div>
</div>
</body></html>
(1)
Avec les navigateurs recents , il est possible de mettre milieu dans html , haut dans body et bas dans global avec un min-height. marge a zero pour le depart et un doctype valide.
<!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><title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
* {margin:0;padding:0}
html {
text-align: center;
background: transparent url(milieu.jpg) center center repeat-y;
}
body {
text-align: center;
background: transparent url(haut.jpg) top center no-repeat;
}
#global {
width: 644px;
text-align: left;
margin-left: auto;
margin-right: auto;
/* background: transparent url(haut.jpg) top left no-repeat;*/
position:relative;
left:1px;
position: relative;
background: transparent url(bas.jpg) bottom left no-repeat;
padding-bottom: 80px;
min-height:390px;
padding-top:120px;
}
#menu {
float: left;
margin: 100px 0px 0px 20px;
width: 150px;
}
h1 , h2 , p {
margin: 0px 0px 0px 180px;
width: 370px;
}
ul {padding-left:1em;margin-left:1em;}
</style>
<!--[if lte IE 6]>
<style type="text/css">
#main {
height:390px;
}
#menu {
display:inline;
}
</style>
<![endif]-->
</head>
<body>
<div id="global">
<div id="menu">
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Nos produits</a>
<ul>
<li><a href="#">Produit 1</a></li>
<li><a href="#">Produit 2</a></li>
<li><a href="#">Produit 3</a></li>
</ul>
</li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Liens</a></li>
</ul>
</div>
<h1>Section numéro une</h1>
<p>Elitr
fabulas mel ex. Sed admodum detracto an. In vel diam quas exerci, at
velit aliquip denique cum. His ex altera definitionem, in sumo
eloquentiam pro, nec ut posse reformidans. Nonumy aliquando vim at, in
alterum torquatos consetetur vel. Viris habemus dolores nam ea, utinam
option eu per, cu duo vidit modus deterruisset. Cum te diam persecuti.
Iudico partiendo concludaturque pro ex, no quas natum volumus est, vis
et dicunt scripta. Te ius feugiat euripidis reprehendunt, vocent
aliquip nonummy per ea, te duis graeci conceptam nam. No nullam habemus
vel, te est autem verterem detraxit, eu minimum propriae ius. Mel diam
quidam te, at cum stet convenire expetenda, cum senserit democritum te.
Ad elit ancillae neglegentur his, et eam placerat conceptam, justo
quaerendum sed te. Vel tamquam nominavi torquatos ad, te option
phaedrum pro, elit aliquip corrumpit in ius. Eum volumus pericula cu.
Per lorem saepe timeam te, cum ludus inciderint ut. Mucius rationibus
eloquentiam nec eu, virtute accusata assueverit an pri, ei mea tempor
bonorum equidem. Qui idque molestiae mnesarchum ex.</p>
<h1>Une autre grande section</h1>
<p>Sit
voluptaria consequuntur interpretaris ea, salutatus comprehensam usu
ea. Qui te summo electram iracundia, ex mel scripta tritani. Eos eius
minim laoreet ne, labitur pertinax est ne. Nam et tamquam appellantur,
enim mediocrem cu cum. Everti verear cu has, ad quo facete fastidii. Te
est alia ubique. Mea in populo utamur assueverit, delenit oportere
explicari in sit, possim abhorreant deterruisset ea ius. Eam ei augue
possit minimum. Eam cu facete mollis, debitis patrioque quaerendum duo
eu. Pri probo error id. Tation volumus cu sea, id enim agam meis vim.
Cu mucius intellegebat delicatissimi eum, illum movet labore usu ei. At
ferri ubique vix, has eu omnesque evertitur, commodo nusquam deleniti
in sed. Euismod intellegat per cu. Cum et eros quaestio, enim populo
cum in.</p>
<h2>Une sous-section</h2>
<p>Lorem
ipsum no sit altera forensibus, vix ea veniam fierent molestie. Duo
iriure veritus ei, est no regione dolores. Vel et labore nemore
referrentur, aeterno convenire eu sed, cum porro zzril te. Et ius
labitur explicari, has no quis sententiae moderatius. Aliquip scaevola
apeirian vel eu, aliquip mentitum ut pri, rebum nihil te his. Eam malis
euismod ad. Aeterno corrumpit eu quo. Solet vocent voluptatibus at cum,
animal constituto definitiones sit ei. Qui et tale recteque, habeo
persecuti dissentias in his. Id eum mollis insolens maiestatis. Minim
noster corrumpit cu usu, eu ferri oportere consequuntur vel. Porro
salutandi assentior vis ad, no has assum sonet sapientem, usu doctus
euismod te. Sed vitae noster ei, no duo sumo facer. Ne sed imperdiet
voluptatum disputationi. Wisi aliquid in pro, ex ridens tritani docendi
nam, ius ut ocurreret persecuti. Ne quo eius falli eruditi, ius alia
oblique antiopam ut, ne nec impedit corpora eligendi. His puto menandri
ad, idque similique abhorreant et pri. Ad sint inermis eligendi mea, te
sit possit offendit. Ex clita fierent eum, an qui debitis nonummy
facilisis, in per moderatius definitiones. Nonummy repudiare eos ea.
Ius modo putant expetenda ad, ius nostrud eligendi te, vis partem
minimum cu. </p></div>
</div>
</body></html>
l'histoire peut se terminer sur un seul div !
++
Modifié par gcyrillus (20 Oct 2008 - 03:25)
? ).
).
