Suite à un autre post ou il y a les :
:arrow: Tout dans la balise table !!
et...
:arrow: Tout dans la balise div !!
Voici un bout de code qui démontre ce qu'il est très facile de faire pour une présentation pourtant complexe en apparence...
Tout cela en restant entièrement accessible !!
:arrow: Tout dans la balise table !!
et...
:arrow: Tout dans la balise div !!
Voici un bout de code qui démontre ce qu'il est très facile de faire pour une présentation pourtant complexe en apparence...
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html lang=fr xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<style type=text/css>
#header {
background-color: #00ccff;
}
#menu {
width: 22.5%;
background-color: #99cccc;
}
#pub {
height: 60px;
width: 77%;
position: absolute;
top: 0px;
background-color: #99aacc
}
#contenu {
margin-left: 23%;
position: absolute;
}
#corps {
margin-top: 60px;
width: 77%;
background-color: #22aacc;
}
#bas {
width: 77%;
height: 60px;
background-color: #aaddee;
}
#colonne {
width:97%;
margin: auto;
}
.float {
background-color: #99aacc;
float: left;
width: 33.3%;
margin: 1em 0;
}
.floatbis {
background-color: #ff66cc;
float: left;
width: 33.3%;
margin: 1em 0;
}
.both {
clear: both;
}
</style>
</head>
<body>
<div id=header align="center">
Du texte à afficher avant le menu et le contenu en haut de page par exemple.<br>
Ce dernier pousse l'ensemble vers le bas.
</div>
<div id=conteneur>
<div id=contenu>
<div id=corps>
<p>le texte principal du site s'affiche avant les colonnes éventuelles <br>
en prenant toute la hauteur disponible comme ci-après.
<div id=colonne>
<div class="floatbis">
La première colonne s'affiche de la même taille que les deux autres centré au milieu du contenu.<br>
<br>
<br>
</div>
<div class="float">
La deuxième colonne avec son contenu<br>
<br>
</div>
<div class="floatbis">
Et la troisième...<br>
<br>
</div>
</div>
<div class="both">
La fin du contenu principal peut s'afficher en dessous des colonnes.
</div>
</div>
<div id=bas>
les liens éventuel en bas de page
</div>
<div id=pub>
la publicité s'affiche<br>
en haut de page avec 60 pixels de hauteur
</div>
</div>
<div id=menu>Le menu de gauche<br>
s'affiche ici
</div>
</div>
</body>
</html>Tout cela en restant entièrement accessible !!
