Forum de discussion
Forum « Programmation HTML » (archives)
Re: Equivalent CSS des frames (1 menu, 1 bandeau, 1 contenu)
Envoyé: 25 avril 2004, 10h23 par Oznog
Premièrement sache que les tableaux ne sont pas désuet et font toujours parties des spécifications du XHTML 1.0 dernier en liste!
On va y aller étape par étape.
1. Le style HTML
HTML {
OVERFLOW: hidden;
WIDTH: 100%;
HEIGHT: 100%;
}
- Pas besoin de cacher ce qui dépasse le 100% x 100% ! C'Est de toute façon à l'extérieur de la fenêtre!
- Et par défaut c'est aussi 100% x 100% donc pas besoin de le spécifier.
Le style pourait donc être :
HTML {}
aucun style en fait!
2. Le style BODY
BODY {
OVERFLOW: hidden;
WIDTH: 100%;
HEIGHT: 100%;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
PADDING-TOP: 0px;
MARGIN: 0px;
}
Encore à 100% donc pas besoin de "overflow". Et aussi par défaut à 100% alors pas besoin de dimension. Enfin, pas besoin de spécifier l'unité (px) avec 0. Et un "padding" right-left-bottom-top = padding tout court.
ça devrait être :
BODY {
padding: 0;
margin: 0;
}
Maintenant les 3 div...
1. Le menu
#menu {
OVERFLOW: hidden;
LEFT: 0px;
top: 0px;
WIDTH: 100%;
HEIGHT: 100%;
background-attachment: fixed;
background-image: url(../images/menu.gif);
background-repeat: no-repeat;
z-index: 1;
}
Pourquoi à 100% ? Tu le veux Fixe alors si je me base sur le bandeau avec une marge de 250 pixel tu devrais le fixer à 250 px! Mais puisque tu veux que la page s'ajuste en proportion avec la résolution je te conseille une pourcentage, sinon tu va avoir beaucoup plus de dificulté.
#menu {
OVERFLOW: hidden;
LEFT: 0px;
top: 0px;
WIDTH: 20%;
HEIGHT: 100%;
background-attachment: fixed;
background-image: url(../images/menu.gif);
background-repeat: no-repeat;
z-index: 1;
}
2. Le bandeau
#bandeau {
OVERFLOW: hidden;
text-align: center;
position:absolute;
float: right;
margin-left: 20%;
top: 0px;
WIDTH: 80%;
HEIGHT: 120px;
background-attachment: fixed;
background-image: url(../images/bandeau.gif);
background-repeat: no-repeat;
z-index: 2;
}
Tu utilise l'espace restant et donc 80% une position absolu (sinon il va en bas ou à la suite.) Pour l'afficher en haut avec un menu fixe à 250 tu devra lui accorder l'expace exact, pas un pixels de plus sinon il se retrouve encore en bas. Et note enfin le "text-align" pour centrer le contenu.
3. Le corp ou contenu:
#contenu {
overflow: auto;
position: relative;
top: -300px;
HEIGHT: 100%;
width: 80%;
float: right;
z-index: 3;
background-color: #009900;
}
Pourquoi -300?? Enfin, place le avec une marge de 20%.
#contenu {
overflow: auto;
position: absolute;
top: 120px;
margin-left:20%;
HEIGHT: 100%;
width: 80%;
float: right;
z-index: 3;
background-color: #009900;
}
Code complet :
<html>
<head>
<style>
BODY {
padding: 0;
MARGIN: 0px;
background-color: #ccc;
}
#menu {
OVERFLOW: hidden;
LEFT: 0px;
top: 0px;
WIDTH: 20%;
HEIGHT: 100%;
background-attachment: fixed;
background-image: url(../images/menu.gif);
background-repeat: no-repeat;
z-index: 1;
background-color: #990000;
}
#bandeau {
OVERFLOW: hidden;
text-align: center;
position:absolute;
margin-left:20%;
top: 0px;
WIDTH: 80%;
HEIGHT: 120px;
background-attachment: fixed;
background-image: url(../images/bandeau.gif);
background-repeat: no-repeat;
z-index: 2;
background-color: #CCCCFF;
}
#contenu {
overflow: auto;
position: absolute;
top: 120px;
margin-left:20%;
HEIGHT: 100%;
width: 80%;
float: right;
z-index: 3;
background-color: #009900;
}
</style>
</head>
<body>
<div id=menu>
(images-map)
</div>
<div id=bandeau>
Titre - Sous-titre
</div>
<div id=contenu>
Blablabla
</div>
</body>
</html>
Bon, le XHTML c'est toujours une question d'ajustement. Ce code peut être assuréement optimisé avec un peu d'attention.
Ciao
Oznog
Réponses
|