Problème positionnement CSS
Darkh
-
Darkh62 Messages postés 16 Statut Membre -
Darkh62 Messages postés 16 Statut Membre -
Bonjour,
Actuellement je suis en train de coder un site, mais je rencontre actuellement 2 problème..
Pour faire clair: je possède sur ma page central,3 images
- 1 images pour le haut du cadre,
- 1 image pour le milieu(et ses bordure sur les coté)
- 1 image pour le bas
Mon problème est que lorsque j'ai trop de texte, le milieu ne se répète pas,
J'ai pourtant bien utiliser les propriété min-height, et background-repeat,
Mon second soucis, c'est l'image du bas qui ne descent pas en fonction de son contenu.
Mon CSS:
Aperçu:
http://img87.xooimage.com/files/c/1/7/apercu-375e0b7.png
Merci de votre aide.
Actuellement je suis en train de coder un site, mais je rencontre actuellement 2 problème..
Pour faire clair: je possède sur ma page central,3 images
- 1 images pour le haut du cadre,
- 1 image pour le milieu(et ses bordure sur les coté)
- 1 image pour le bas
Mon problème est que lorsque j'ai trop de texte, le milieu ne se répète pas,
J'ai pourtant bien utiliser les propriété min-height, et background-repeat,
Mon second soucis, c'est l'image du bas qui ne descent pas en fonction de son contenu.
Mon CSS:
#h_contenu
{
background-image:url('./images/head_contenu.png');
position:relative;
top: 136px;
left:193px;
height: 10px;
width: 1011px;
}
#middle_contenu
{
background-image:url('./images/middle_contenu.png');
background-repeat:repeat-y;
width:1011px;
min-height:50px;
position:relative;
left:192px;
top:135px;
}
#bot_contenu
{
background-image:url('./images/bottom_contenu.png');
width:100%;
height:1000px;
position:relative;
top:120px;
left:193px;
}
Aperçu:
http://img87.xooimage.com/files/c/1/7/apercu-375e0b7.png
Merci de votre aide.
A voir également:
- Problème positionnement CSS
- Logiciel positionnement gratuit - Guide
- Exemple test de positionnement greta - Forum Études / Formation High-Tech
- Css exposant ✓ - Forum CSS
- Enlever le soulignement d'un lien css ✓ - Forum Webmastering
- CSS/Comment enlever couleur liens ? ✓ - Forum CSS
1 réponse
Hello,
un exemple vaut mieux qu'un long discours:
++
un exemple vaut mieux qu'un long discours:
<html>
<head>
<title></title>
<meta charset="utf8">
<style type="text/css">
#global li{
margin: 30px;
list-style: none;
}
.box{
width: 500px;
padding:20px 50px;
display : table-cell;
vertical-align: middle;
background-color: #999;
height: 50px;
border-radius: 10px;
color: white;
position: relative;
text-transform: uppercase;
text-align: center;
border-top: #ccc double 3px;
background: #9695a5; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #9695a5 0%, #474747 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#9695a5), color-stop(100%,#474747)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #9695a5 0%,#474747 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, #9695a5 0%,#474747 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, #9695a5 0%,#474747 100%); /* IE10+ */
background: radial-gradient(ellipse at center, #9695a5 0%,#474747 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9695a5', endColorstr='#474747',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.step{
position: absolute;
top:5px;
left: 5px;
font-size: 6pt;
}
#global li a{
text-decoration: none;
text-transform: uppercase;
}
</style>
</head>
<body>
<div id="global">
<ul>
<li>
<a href="#">
<div class="box">
<div class="step">Etape 1</div>
Une inscription 100% gratuite sur notre site
</div>
</a>
</li>
<li>
<a href="#">
<div class="box">
<div class="step">Etape 2</div>
J'accède à des offres gratuites
J'accède à des offres gratuites
J'accède à des offres gratuites
J'accède à des offres gratuites
J'accède à des offres gratuites
J'accède à des offres gratuites
J'accède à des offres gratuites
J'accède à des offres gratuites
J'accède à des offres gratuites
J'accède à des offres gratuites
</div>
</a>
</li>
<li>
<a href="#">
<div class="box">
<div class="step">Etape 3</div>
Je remplis gratuitement les offres proposées et je<br />gagne des euros
</div>
</a>
</li>
</ul>
</div>
</body>
</html>
++
Si j'ai bien compris il faut donc que je rajoute une div a chaque fois ?
Sachant que la div "global je la possède déjà.