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.
1 réponse
-
Hello,
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>
++
