Probleme avec la position absolute
Posté : 17 juin 2009, 17:42
Bonjour
voilà j'ai un soucis que j'essai de resoudre depuis plusieurs jours et dont je ne trouve pas la reponse
Comme le cas est un peu complexe je prefere mettre le code et un dessin du resultat final que je souhaiterais et qui n'est pas ce que j'obtient sur un ecran 22 pouce
Le div photo et completement à droite quand au div=ruban je n'arrive pas a le remonter (il disparait)
Merci de votre aide je cale
le css
voilà j'ai un soucis que j'essai de resoudre depuis plusieurs jours et dont je ne trouve pas la reponse
Comme le cas est un peu complexe je prefere mettre le code et un dessin du resultat final que je souhaiterais et qui n'est pas ce que j'obtient sur un ecran 22 pouce
Le div photo et completement à droite quand au div=ruban je n'arrive pas a le remonter (il disparait)
Merci de votre aide je cale
Code : Tout sélectionner
<body class="home">
<div id="menu"> <ul>
<li>1 * </li>
<li><a href="#">2</a> * </li>
<li><a href="#">3</a> * </li>
<li><a href="#">4</a></li>
</ul> </div>
<div id="photo"></div>
<div id="container" class="home">
<h1 id="logo"></h1>
<div id="header" class="home">
<div class="ruban"><img src="images/ruban.png" width="980" height="233" /></div>
<div class="texte" id="texte">texte<div>
</div>
</div>
</body>Code : Tout sélectionner
a{
color: #100E07;}
body.home {
text-align: center;
background-color: #B6A987;
background-image: url(../images/fond.jpg);
background-repeat: no-repeat;
background-position: center ;
}
body {
background: #B6A987 ;
text-align: center;
font: Georgia, "Times New Roman", Times, serif;
}
h1#logo {
display: block;
width: 320px;
height: 160px;
background: url(../images/logo.png) no-repeat;
text-indent: -9999px;
margin-top: 35px;
margin-left: 35px;
}
#container {
width: 980px;
margin: 0 auto;
text-align: left;
position: relative;
}
#container.home {
background: none;
}
#header {
height: 225px;
position: relative;
text-align: center !important;
width: 980px;
}
#header.home {
height: 340px;
position: relative;
width: 980px;
overflow: hidden;
}
#menu {
display: block;
width: 980px;
height: 22px;
margin-left: 10px;
margin-top: 25px;
margin-bottom:20px;
font-size: 21px;
color: #FFFFFF;
text-align:left;
}
#menu ul { padding:0; margin:0; list-style:none; }
#menu ul li { display:inline; text-decoration:none; }
#menu ul li a {
color: #302A1C;
text-decoration:underline;
}
#menu ul li a:hover {
text-decoration:none;
}
#photo{
width: 284px;
height: 188px;
background: url(../images/sable.png) no-repeat;
position: absolute;
z-index: 2;
top: 20px;
right: 20px;
}
.ruban {
width: 980px;
height: 245px;
position: absolute;
z-index: 3;
left: 0px;
background: url(../images/ruban.png) no-repeat;
}
.texte {
width: 470px;
height: 200px;
position: absolute;
z-index: 4;
top: 80px;
right: 85px;
font-size: 12px;
color: #100E07;
text-align: justify;
font-family: Georgia, "Times New Roman", Times, serif;
}