Bonjour la communauté !
J'ai pourtant tenté de faire quelque chose de propre.
Voilà, je tente de structurer les différentes <div> qui construiront les zones de mon site.
J'ai donc crée :
- Une div qui contient toutes les autres.
- Je lui ai donné un "width", un "height" auto et une position "relative".
- Toutes mes autres div, contenues dans celle-ci, sont en position "absolue". Or il s'avère que rien ne fonctionne comme je le veux. Je sais qu'il me retravailler le principe des <div>, plus que je ne le pensais.
Je vous présente mon code HTML et CSS, merci d'avance à celui ou celle qui pourrait m'aiguiller un peu sur l'absurdité qui ne prend même pas la peine de se cacher.
J'ai pourtant tenté de faire quelque chose de propre.
Voilà, je tente de structurer les différentes <div> qui construiront les zones de mon site.
J'ai donc crée :
- Une div qui contient toutes les autres.
- Je lui ai donné un "width", un "height" auto et une position "relative".
- Toutes mes autres div, contenues dans celle-ci, sont en position "absolue". Or il s'avère que rien ne fonctionne comme je le veux. Je sais qu'il me retravailler le principe des <div>, plus que je ne le pensais.
Je vous présente mon code HTML et CSS, merci d'avance à celui ou celle qui pourrait m'aiguiller un peu sur l'absurdité qui ne prend même pas la peine de se cacher.
<body>
<div id="grandconteneur">
<div id="entete">
<a href="http://www.test.fr/"><img class="logo" src="img/enseigne.png" alt="" title="retour accueil"></img></a>
<h1 class="titre"> test </h1>
<div id="intranet"><p class="test"> Test </p> </div>
</div>
<div id="corps">
<div id="leftmenu">
<div id="menu1">test <br /> test</div>
<div id="menu2">
<div id="hautmenu2"></div>
<div id="centremenu2"></div>
<div id="basmenu2"></div>
</div>
<div id="bloc2">
</div>
<div id="centre"></div>
<div id="rightcontent">
</div>
</div>
<div id="pied"> test
</div>
</div>
</body>
body {
background-color:#F1FFEE;
}
div#grandconteneur {
height : auto;
width : 960px;
position:relatif;
margin-right: auto;
margin-left: auto;
background-color:orange;
}
div#entete {
height: 146px;
width: 960px;
background-color:#5ea34b;
position:absolute;
}
a{
text-decoration:none;
}
div#intranet {
position:absolute;
float:right;
margin-top: -117px;
height:133px;
width:142px;
background-image:url(img/intranet.png);
}
.logo {
height:130px;
width:127px;
float:left;
}
.titre {
heigth: 200px;
width: 460px;
margin-right: 100px;
margin-left: 250px;
paddind: 0px;
text-align: center;
}
.test {
height: 26px;
width: 90px;
style-font:arial;
font-size:27px;
color:#FFFFFF;
margin-top:10px;
margin-left:50px;
}
div#corps {
position:absolute;
height:auto;
width : 960px;
margin-top: 146px;
}
div#leftmenu{
width:189px;
position:absolute;
float:left;
padding:30px 0 0 30px;
background-color:purple;
}
div#menu2 {
}
div#bloc3 {
height: 28px;
width: 605px;
position:absolute;
font-size: 19px;
background-color:#ffdd54;
margin-left:auto;
margin-right:auto;
}
div#centre{
height:100px;
width:548px;
position:absolute;
margin-top:10px;
background-color:red;
margin-left: 40px;
}
div#rightcontent {
}
div#pied {
height:34px;
width: 960px;
background-color: #brown;
position-relative;
}
</style>
