bonjour à vous,
je cherche à faire un gabarit web contenant un div global 960px centré
inside je met un header puis je met un div flottant cols auquel je rajoute une image d'arrière plan pour simuler des colonnes (système de fausses colonnes)
à l'interieur de celui ci je mets 5 colonnes flottantes de largeur fixe 188px,
leur hauteur n'est pas fixée car le contenu sera dynamique et non determiné
les colonnes 1 à 4 ont une marge à droite de 5px
enfin je met un footer
la colonne 1 qui contient la navigation doit être en dernier dans le code html
->(c'est entre autre pour cela que je mets des colonnes flottantes) et
j'ai entouré les colonnes qui ne contiennent pas la barre de navigation d'un div flottant à droite nommé contenu
la page est visible icihttp://www.jeremieparmentier.com/test/alsa/alsa.html
bon ben après de laborieux essais je sollicite de l'aide de votre part
ps y a pas mal de latin c'est pour vérifier l'adaptation de cols et des fausses colonnes à un remplissage de taille différente
merci de votre aide
voici le code ainsi que l'image d'arrière plan
je cherche à faire un gabarit web contenant un div global 960px centré
inside je met un header puis je met un div flottant cols auquel je rajoute une image d'arrière plan pour simuler des colonnes (système de fausses colonnes)
à l'interieur de celui ci je mets 5 colonnes flottantes de largeur fixe 188px,
leur hauteur n'est pas fixée car le contenu sera dynamique et non determiné
les colonnes 1 à 4 ont une marge à droite de 5px
enfin je met un footer
la colonne 1 qui contient la navigation doit être en dernier dans le code html
->(c'est entre autre pour cela que je mets des colonnes flottantes) et
j'ai entouré les colonnes qui ne contiennent pas la barre de navigation d'un div flottant à droite nommé contenu
la page est visible icihttp://www.jeremieparmentier.com/test/alsa/alsa.html
bon ben après de laborieux essais je sollicite de l'aide de votre part
ps y a pas mal de latin c'est pour vérifier l'adaptation de cols et des fausses colonnes à un remplissage de taille différente
merci de votre aide
voici le code ainsi que l'image d'arrière plan
<!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>5 cols</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="X-UA-Compatible" content="IE=8">
<STYLE type="text/css">
body{behavior:url(cssHoverFix.htc);
background-color:#e6e6e6;
font-family:Helvetica,Verdana,Arial,sans-serif;
font-size:62.5%
}
#global{ width:960px; border:1px solid #B0C4DE;margin-left:auto;margin-right:auto;position:relative;}
#header{width:100%;height:125px; background-color:#7A96DF ;}
#search{ width:300px;
height:27px; float: right; }
#cols{
background-image: url(5cols2.gif);
background-repeat: repeat-y;
float:left;
border-bottom:1px solid #B0C4DE;
}
#contenu{
float:right;
width:767px;}
#col1 {
width:188px;
float:left;
margin-right:5px;}
#col2 {
font-size: 1.5em;
width:188px;
margin-right:5px;
float:left
margin-left:193px;
z-index: 0}
#col3 { margin-left:193px; margin-right:5px; width:188px;
clear:left;
float:left;
z-index: 0;
}
#col4 {
width:188px;float:left;
margin-left:386px;
margin-right:5px;
}
#col5 { width:188px;float:left; background-color: #FFFFFF ;
margin-left:574px;
}
#footer{
background-color:#999999;
clear:both;
float:left;
width:100%;
text-align:center;
height:25px;
line-height:25px;}
.clear{clear:both;}
#global #navigation {width:188px;
font-size:16px;
font-family:Helvetica,Verdana,Arial,sans-serif;
}
#global #navigation ul{margin:0px; padding:0px; background-color:#666;}
#global #navigation ul a{color:#FFF;}
#global #navigation ul ul{
display:none;
position:absolute;
left:188px;
top:0px;
border:#fff solid;
border-width:1px;
background-color:#999;
}
#global #navigation ul li{
height:90px;
font-size:18px;
font-family:Helvetica,Verdana,Arial,sans-serif;
list-style:none;
background-image: url(list.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
padding-left:10px;
color:#FFF;
border-top:#fff solid;
border-bottom:#fff solid;
border-width:1px;
cursor:pointer;}
#global #navigation ul li a{text-decoration:none;}
#global #navigation ul li:hover {background-color:#F90; position:relative;
background-image: url(list2.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
padding-left:10px;
}
#global #navigation ul li:hover ul{display:block;}
#global #navigation ul ul li{
border-top:#fff solid;
border-bottom:#fff solid;
border-width:1px;
font-size:16px;
text-decoration:none;
height:45px;
width:188px;
float:left;
display:inline;}
#global #navigation ul ul li:hover {
text-decoration:underline;
border:none;
border-top:#fff solid;
border-bottom:#fff solid;
border-width:1px;
}
#global #navigation li:hover ul li ul {display:none;}
#global #navigation ul ul li ul {left:190px;background-color:#999;}
#global #navigation ul ul li:hover ul {display:block; z-index: 5;}
#conteneurInput div
{
background : #def;
position : relative;
border : 1px solid #999;
text-align : center;
}
label
{
background : #fc6;
padding-right : 5px;
margin-right : 3px;
}
#conteneurInput input
{
background : none;
border : 0;
padding : 0 6px;
width : 130px;
background : #def;
}
#cols span.top-left
{
position : absolute;
width : 4px;
height : 4px;
overflow : hidden;
top : -1px;
left : -1px;
background : url("images/top-left.gif");
}
#cols span.bottom-left
{
position : absolute;
width : 4px;
height : 4px;
overflow : hidden;
bottom : -1px;
left : -1px;
background : url("images/bottom-left.gif");
}
#cols span.bottom-right
{
position : absolute;
width : 4px;
height : 4px;
overflow : hidden;
bottom : -1px;
right : -1px;
background : url("images/bottom-right.gif");
}
#cols span.top-right
{
position : absolute;
width : 4px;
height : 4px;
overflow : hidden;
top : -1px;
right : -1px;
background : url("images/top-right.gif");
}
</STYLE> </head><body>
<div id="global">
<div id="header">Header
</div>
<div id="cols">
<div id="contenu">
<div id="col5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque cursus molestie molestie. Phasellus metus diam, pulvinar ut placerat quis, pellentesque id quam. Maecenas elementum aliquam enim, eu fermentum ligula sodales a. Fusce vitae turpis mauris. Vestibulum et velit ipsum, sit amet dapibus mi. Quisque tempor augue et ligula faucibus dictum. In quis odio at erat imperdiet lobortis. Donec non nisi sed erat dignissim ultricies in eget sapien. Mauris non nisl eu libero interdum porta. Etiam euismod nisl non turpis rhoncus mattis malesuada magna consequat. Aliquam ultrices magna eget quam venenatis at vestibulum tellus commodo. Donec id porta ante. Pellentesque vulputate elementum cursus.
Fusce laoreet condimentum mi a pretium. Nulla vitae nibh ante, in convallis elit. Nulla non lacus nulla. Donec libero metus, rutrum non placerat a, tempus non ante. Etiam lobortis eros ac risus pulvinar auctor. Suspendisse eget pellentesque dui. Donec hendrerit, quam cursus pretium aliquam, turpis diam egestas felis, sed faucibus nisi turpis fermentum tellus. Duis luctus lacinia nisi, eget condimentum ligula gravida ac. Sed iaculis vestibulum erat ut eleifend. Phasellus et nunc non tellus accumsan auctor sed quis orci. Donec non pellentesque elit. Donec convallis tempus ipsum, non aliquam enim bibendum a. Pellentesque a leo ligula. Nulla non neque augue. Pellentesque interdum nunc eu velit facilisis ut volutpat orci elementum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque quis arcu in dui rhoncus ornare. Fusce lobortis lacus ut nisl commodo viverra. Etiam suscipit, dui sed volutpat sollicitudin, est nisl facilisis orci, eu ornare nisi sem a diam.
Phasellus placerat ultrices ligula, consequat commodo lectus elementum at. Morbi rutrum porta libero at tempor. Aenean ullamcorper aliquam nulla vel volutpat. Phasellus sit amet bibendum purus. Curabitur vitae magna sit amet orci eleifend imperdiet aliquam nec tortor. Aenean lectus metus, suscipit eget fermentum vitae, laoreet vitae lectus. Praesent vel ligula ac neque consectetur mattis eu a lacus. Proin et varius odio. Cras neque enim, dictum placerat consequat vitae, posuere ut odio. Donec ut lorem vitae dolor iaculis vulputate. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas molestie accumsan dolor, non tristique purus convallis ac. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam pulvinar lacinia blandit. Phasellus non justo in tortor semper faucibus. Aenean in leo ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis, neque vel semper placerat, mi mauris pulvinar nulla, a convallis enim nisl non arcu. Cras lacinia massa nec dolor pellentesque lacinia. Suspendisse pharetra facilisis purus, at laoreet erat sagittis pulvinar.
Curabitur porttitor metus luctus eros tristique eget bibendum lorem porttitor. Nulla aliquet nulla sed neque ultricies tempor. Suspendisse suscipit leo at velit rutrum pellentesque. Morbi tincidunt arcu et ante dictum non fringilla quam luctus. Curabitur aliquet purus nec dolor bibendum eget laoreet quam volutpat. Aliquam facilisis vehicula egestas. Morbi tristique suscipit dolor et placerat. Duis rutrum interdum lectus, non condimentum orci ornare quis. Praesent eu condimentum urna. Morbi pellentesque mi non neque tincidunt dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec tincidunt convallis orci et mattis. Etiam mi nisl, semper vitae rutrum ac, posuere a leo. Maecenas rhoncus, libero et scelerisque interdum, dolor purus mollis leo, at lacinia leo ante eu massa. Pellentesque tellus quam, adipiscing quis sagittis id, imperdiet quis lectus. Praesent ut diam nisl, nec pulvinar diam. Quisque vel sapien neque. Donec hendrerit adipiscing quam, in sagittis odio sodales sed. Vestibulum a ullamcorper sapien.
Morbi vestibulum bibendum interdum. Donec vitae lacus quam, non lacinia ligula. Etiam gravida commodo semper. Sed et adipiscing libero. Nullam aliquet feugiat ipsum, a porta odio sodales quis. Aenean eu venenatis nisi. Sed a leo vitae lorem sollicitudin sodales ut et purus. Nam nec elit id ligula rutrum pharetra nec in erat. Nulla facilisi. Suspendisse at</div>
<div id="col4">col4</div>
<div id="col3"><fieldset id="conteneurInput">
<label for="login">Login :</label>
<div>
<span class="top-left"> </span>
<span class="bottom-left"> </span>
<span class="bottom-right"> </span>
<span class="top-right"> </span>
<input type="text" name="login" id="login" />
</div>
</fieldset>col3
</div>
<div id="col2"><h3> consectetur adipiscing elit. Quisque cursus</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque cursus molestie molestie. Phasellus metus diam, pulvinar ut placerat quis, pellentesque id quam. Maecenas elementum aliquam enim, eu fermentum ligula sodales a. Fusce vitae turpis mauris. Vestibulum et velit ipsum, sit amet dapibus mi. Quisque tempor augue et ligula faucibus dictum. In quis odio at erat imperdiet lobortis. Donec non nisi sed erat dignissim ultricies in eget sapien. Mauris non nisl eu libero interdum porta. Etiam euismod nisl non turpis rhoncus mattis malesuada magna consequat. Aliquam ultrices magna eget quam venenatis at vestibulum tellus commodo. Donec id porta ante. Pellentesque vulputate elementum cursus.
Fusce laoreet condimentum mi a pretium. Nulla vitae nibh ante, in convallis elit. Nulla non lacus nulla. Donec libero metus, rutrum non placerat a, tempus non ante. Etiam lobortis eros ac risus pulvinar auctor. Suspendisse eget pellentesque dui. Donec hendrerit, quam cursus pretium aliquam, turpis diam egestas felis, sed faucibus nisi turpis fermentum tellus. Duis luctus lacinia nisi, eget condimentum ligula gravida ac. Sed iaculis vestibulum erat ut eleifend. Phasellus et nunc non tellus accumsan auctor sed quis orci. Donec non pellentesque elit. Donec convallis tempus ipsum, non aliquam enim bibendum a. Pellentesque a leo ligula. Nulla non neque augue. Pellentesque interdum nunc eu velit facilisis ut volutpat orci elementum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque quis arcu in dui rhoncus ornare. Fusce lobortis lacus ut nisl commodo viverra. Etiam suscipit, dui sed volutpat sollicitudin, est nisl facilisis orci, eu ornare nisi sem a diam.
Phasellus placerat ultrices ligula, consequat commodo lectus elementum at. Morbi rutrum porta libero at tempor. Aenean ullamcorper aliquam nulla vel volutpat. Phasellus sit amet bibendum purus. Curabitur vitae magna sit amet orci eleifend imperdiet aliquam nec tortor. Aenean lectus metus, suscipit eget fermentum vitae, laoreet vitae lectus. Praesent vel ligula ac neque consectetur mattis eu a lacus. Proin et varius odio. Cras neque enim, dictum placerat consequat vitae, posuere ut odio. Donec ut lorem vitae dolor iaculis vulputate. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas molestie accumsan dolor, non tristique purus convallis ac. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam pulvinar lacinia blandit. Phasellus non justo in tortor semper faucibus. Aenean in leo ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis, neque vel semper placerat, mi mauris pulvinar nulla, a convallis enim nisl non arcu. Cras lacinia massa nec dolor pellentesque lacinia. Suspendisse pharetra facilisis purus, at laoreet erat sagittis pulvinar.
Curabitur porttitor metus luctus eros tristique eget bibendum lorem porttitor. Nulla aliquet nulla sed neque ultricies tempor. Suspendisse suscipit leo at velit rutrum pellentesque. Morbi tincidunt arcu et ante dictum non fringilla quam luctus. Curabitur aliquet purus nec dolor bibendum eget laoreet quam volutpat. Aliquam facilisis vehicula egestas. Morbi tristique suscipit dolor et placerat. Duis rutrum interdum lectus, non condimentum orci ornare quis. Praesent eu condimentum urna. Morbi pellentesque mi non neque tincidunt dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec tincidunt convallis orci et mattis. Etiam mi nisl, semper vitae rutrum ac, posuere a leo. Maecenas rhoncus, libero et scelerisque interdum, dolor purus mollis leo, at lacinia leo ante eu massa. Pellentesque tellus quam, adipiscing quis sagittis id, imperdiet quis lectus. Praesent ut diam nisl, nec pulvinar diam. Quisque vel sapien neque. Donec hendrerit adipiscing quam, in sagittis odio sodales sed. Vestibulum a ullamcorper sapien.
Morbi vestibulum bibendum interdum. Donec vitae lacus quam, non lacinia ligula. Etiam gravida commodo semper. Sed et adipiscing libero. Nullam aliquet feugiat ipsum, a porta odio sodales quis. Aenean eu venenatis nisi. Sed a leo vitae lorem sollicitudin sodales ut et purus. Nam nec elit id ligula rutrum pharetra nec in erat. Nulla facilisi. Suspendisse at sem tellus. Duis ultrices enim eu augue pulvinar adipiscing. Suspendisse convallis libero ut turpis sodales sed mattis odio pellentesque. Vivamus pulvinar orci eu mauris auctor ac elementum metus varius. Etiam commodo turpis non dolor tristique ut pretium elit molestie. Nullam lacinia, ipsum commodo bibendum euismod, odio ligula posuere leo, et molestie ipsum orci eget lacus. Proin eget diam non mi blandit dictum. Vestibulum cursus libero sed elit pulvinar quis condimentum ante scelerisque. Aliquam ullamcorper massa interdum eros pharetra commodo.
</div>
</div><!-- END OF contenu -->
<div id="col1">
<div id="navigation">
<ul>
<li><br/><a href=""> adipiscing elit</a>
<ul >
<li><a href="">non lacinia ligula</a></li>
<li><a href="">bibendum lorem porttitor</a></li>
<li><a href="">mi a pretium</a></li>
<li><a href="">commodo lectus </a></li>
<li><a href="">Phasellus </a></li>
<li><a href="">Le convallis</a></li>
</ul>
</li>
</ul>
<ul>
<li><br/><a href="">libero at tempor</a>
<ul>
<li><a href="">Curabitur»</a>
<ul>
<li><a href=""> Phasellus </a></li>
<li><a href=""> Phasellus </a></li>
<li><a href=""> Phasellus </a></li>
<li><a href=""> Phasellus </a></li>
</ul>
</li>
<li>non lacus nulla »</a>
<ul>
<li><a href=""> Team Phasellus </a></li>
<li><a href=""> Phasellus mes</a></li>
<li><a href="">Nulla vitae</a></li>
<li><a href=""> adipiscing elit</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li><br/><a href="">lectus</a>
<ul>
<li><a href=""> laoreet vitae lectus</a></li>
<li><a href=""> laoreet vitae lectus</a></li>
<li><a href=""> eget bibendum </a></li>
</ul>
</li>
</ul>
</div> <!-- END OF navigation -->
</div> <!-- END OF col1 -->
</div><!-- END OF cols -->
<div id="footer">footer</div> </div> </div> <!-- END OF global -->
</body>
</html>
