Problème positionnement CSS

Fermé

Darkh - 24 août 2012 à 17:33
Darkh62 Messages postés 14 Date d'inscription vendredi 24 août 2012 Statut Membre Dernière intervention 18 octobre 2014 - 24 août 2012 à 18:18

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:

#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
Test de positionnement cesi - Forum Études / Formation High-Tech
Enlever couleur lien css ✓ - Forum CSS
Css premier plan ✓ - Forum CSS
Exemple test de positionnement greta - Forum Études / Formation High-Tech
Logiciel positionnement gratuit - Guide

1 réponse

Réponse 1 / 1

prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
Modifié par prosthetiks le 24/08/2012 à 18:16

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>

Darkh62 Messages postés 14 Date d'inscription vendredi 24 août 2012 Statut Membre Dernière intervention 18 octobre 2014
24 août 2012 à 18:18

Salut,
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à.

Discussions similaires

tests du greta

trait horizontal avec du css

Enlever le soulignement sous les liens en HTML/CSS

[CSS] Forcé retour à la ligne

HTML - définir taille bouton