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
|
![[Photo]](https://www.trucsweb.com/documents/images/2024/js-bs-formulaire-fetch.png)
Formulaire Bootstrap 5 Ajax avec validation.![[Photo]](http://www.trucsweb.com/documents/images/2023/elephants-Salvador_Dali_1948.jpg)
Sécuriser l’accès « bureau à distance » sous IIS![[Photo]](http://www.trucsweb.com/documents/images/2023/trou_noir_galaxie_M87.jpg)
L’AI au temps du Far-Web![[Photo]](http://www.trucsweb.com/documents/images/2023/gilles-villeneuve-montreal1978.jpg)
Sélecteurs JavaScript querySelector() et querySelectorAll()![[Photo]](http://www.trucsweb.com/documents/images/2023/evolution_de_lhomme.jpg)
CSS - Animations![[Photo]](http://www.trucsweb.com/documents/images/2023/univers-copernic.jpg)
Mode de couleurs (Color modes) Bootstrap 5![[Photo]](http://www.trucsweb.com/documents/images/2023/les_burgers_de_papa.jpg)
25 ans des Trucsweb - Bouton hamburger animé Bootstrap 5![[Photo]](http://www.trucsweb.com/documents/images/logos/l_whatwg.svg)
Living Standard pour HTML de Apple, Google, Mozilla, Microsoft ...et la W3C![[Photo]](http://www.trucsweb.com/documents/images/2022/tim-berners-lee-web-b.jpg)
Le nouveau HTML « Living Standard » et le XML![[Photo]](http://www.trucsweb.com/documents/images/2022/v_jacques_dutronc-les_cactus.jpg)
Sécuriser un formulaire de contact au Far-Web!
AbuseIPDB
Connexion