modèle 16 : pas de float dans partie centrale :'(
Bonjour,
J'utilise le modèle 16 d'alsa pour le site de ma boite.
Il fonctionne parfaitement sauf pour une chose :
On ne peut pas utiliser de "flotant" dans la partie centrale.
En effet, si l'on met un "hr.clearBoth" après le "flotant",
le "hr.clearBoth" se positionne non pas après le "flotant",
mais après le "menu de gauche" qui lui aussi est un flotant.
J'ai fait des recherchs sur le phorum, ce sujet a déja été posé,
mais jamais résolu
Je rappel pour info que l'intérêt du modèle 16 est d'avoir un site
à 3 colonnes, étirable, et que, lorsque l'une des 3 colonne est plus
grande que les 2 autres, elle pousse le footer.
Bref, c'est ce qu'il me faut, car je suis en train de migrer un site
(coder à l'origine en HTML4 => Tableau de mise en forme...très dégueux)
en full XHTML/CSS pour le rendre accessible aux handicapés divers.
Ma boîte vise le label argent d'accessiweb.org.
Et je voudrais éviter d'utiliser un tableau à 3 colonne.
.....trops de BlaBla, un peu de code vous fera tout comprendre
@++
Bonjour,
J'utilise le modèle 16 d'alsa pour le site de ma boite.
Il fonctionne parfaitement sauf pour une chose :
On ne peut pas utiliser de "flotant" dans la partie centrale.
En effet, si l'on met un "hr.clearBoth" après le "flotant",
le "hr.clearBoth" se positionne non pas après le "flotant",
mais après le "menu de gauche" qui lui aussi est un flotant.
J'ai fait des recherchs sur le phorum, ce sujet a déja été posé,
mais jamais résolu
Je rappel pour info que l'intérêt du modèle 16 est d'avoir un site
à 3 colonnes, étirable, et que, lorsque l'une des 3 colonne est plus
grande que les 2 autres, elle pousse le footer.
Bref, c'est ce qu'il me faut, car je suis en train de migrer un site
(coder à l'origine en HTML4 => Tableau de mise en forme...très dégueux)
en full XHTML/CSS pour le rendre accessible aux handicapés divers.
Ma boîte vise le label argent d'accessiweb.org.
Et je voudrais éviter d'utiliser un tableau à 3 colonne.
.....trops de BlaBla, un peu de code vous fera tout comprendre
<!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>Largeur fluide, header/menu haut/menu gauche flottant/menu droite flottant/contenu/footer.</title>
<style type="text/css">
/* CSS issu des tutoriels modéle 16 de css.alsacreations.com */
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
#header {
height: 50px;
background-color: #99CCCC;
}
#haut {
height: 30px;
background-color:#CCCCFF;
}
#conteneur {
position: absolute;
width: 100%;
/*background-color:#CCCCFF;*/
}
.centre {
/*background-color:#9999CC;*/
margin-left: 150px;
margin-right: 150px;
}
.centreSansSlotDroit {
margin-right: 0px;
}
.centreSansSlotGche {
margin-left: 0px;
}
#gauche {
background-color:#9999CC;
float:left;
width: 150px;
}
#droite {
background-color:#9999CC;
float:right;
width: 150px;
}
#pied {
clear:both;
height: 30px;
background-color: #99CC99;
}
#menuhaut {
list-style-type: none;
margin: 0;
padding:0;
}
#menuhaut li {
display: inline;
}
#menuhaut a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
#menuhaut a:hover {
text-decoration: none;
}
#menugauche {
list-style-type: none;
margin: 0;
padding:0;
}
#menugauche li {
margin-bottom: 5px;
}
#menugauche a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
#menugauche a:hover {
text-decoration: none;
}
#menudroit {
list-style-type: none;
margin: 0;
padding:0;
}
#menudroit li {
margin-bottom: 5px;
}
#menudroit a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
#menudroit a:hover {
text-decoration: none;
}
p {
margin: 0px 0px 0px 0px;
}
hr{font-size:0;line-height:0;clear:both;}
.floatLeft{
float: left;
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div id="conteneur">
<div id="header">
header <a href="http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS">
(voir tous les modèles)</a>
</div>
<div id="haut">
<ul id="menuhaut"><li><a href="#">Menu 1</a> </li><li><a href="#">Menu 2</a> </li><li><a href="#">Menu 3</a> </li><li><a href="#">Menu 4</a> </li></ul>
</div>
<div id="gauche">
<p>menu gauche</p>
<p>largeur fixe : 150px avec utilisation de la propriété <code>float:left;</code></p>
<ul id="menugauche"><li><a href="#">Menu 1</a></li><li><a href="#">Menu 2</a></li><li><a href="#">Menu 3</a></li><li><a href="#">Menu 4</a></li><li><a href="#">Menu 1</a></li><li><a href="#">Menu 2</a></li><li><a href="#">Menu 3</a></li><li><a href="#">Menu 4</a></li><li><a href="#">Menu 1</a></li><li><a href="#">Menu 2</a></li><li><a href="#">Menu 3</a></li><li><a href="#">Menu 4</a></li></ul>
</div>
<div id="droite">
<p>menu droit</p>
<p>largeur fixe : 150px avec utilisation de la propriété <code>float:right;</code></p>
<ul id="menudroit"><li><a href="#">Menu 1</a></li><li><a href="#">Menu 2</a></li><li><a href="#">Menu 3</a></li><li><a href="#">Menu 4</a></li></ul>
</div>
<div class="centre">
<div class="floatLeft">div en float left</div>
<p>Même avec contenu central court, l'utilisation des flottants combinés à l'utilisation de la propriété <code>clear:both;</code>
sur le pied de page, permet à ce dernier de "pousser" le conteneur pour
intégrer les éléments en float. Le pied de page est correctement
positionné à la suite des parties en float les plus longues.</p>
<p>Si le contenu central est plus long que les menus latéraux, il "pousse" également le pied de page vers le bas.</p>
<strong>bug : le hr applique son clear:both non pas à la div.floatLeft mais au menu de gauche qui lui aussi est en float:left </strong><br>
<hr/>
<p>Même avec contenu central court, l'utilisation des flottants combinés à l'utilisation de la propriété <code>clear:both;</code>
sur le pied de page, permet à ce dernier de "pousser" le conteneur pour
intégrer les éléments en float. Le pied de page est correctement
positionné à la suite des parties en float les plus longues.</p>
<p>Si le contenu central est plus long que les menus latéraux, il "pousse" également le pied de page vers le bas.</p>
<p>Même avec contenu central court, l'utilisation des flottants combinés à l'utilisation de la propriété <code>clear:both;</code>
sur le pied de page, permet à ce dernier de "pousser" le conteneur pour
intégrer les éléments en float. Le pied de page est correctement
positionné à la suite des parties en float les plus longues.</p>
<p>Si le contenu central est plus long que les menus latéraux, il "pousse" également le pied de page vers le bas.</p>
</div>
<div id="pied">
pied de page (se place en dessous des éléments flottants grâce à <code>clear:both;</code>)
</div>
</div>
</body></html>
@++
