28172 sujets

CSS et mise en forme, CSS3

Problème de background qui ne s'étire pas verticalement (avec float)

Bonsoir,

je suis toute débutante en CSS et je rencontre une petite difficulté...

Je vais essayer d'expliquer les choses clairement... Mon site, en plus d'un header et d'un footer, contient une colonne principale à gauche et une colonne de menus à droite. Je les ai placé avec l'attribut float, left pour la colonne centrale et right pour la colonne de droite. La colonne centrale a un fond blanc uni et la colonne de droite une fond coloré toujours uni, je voudrais que ces background aillent systématiquement jusqu'au footer, j'ai donc utilisé "repeat-y". Cependant le repeat-y n'est pas pris en compte, si je mets du contenu dans la colonne de droite en laissant la colonne principale vide, le background de la colonne principale ne fait que la hauteur du margin-top que j'ai mis, après plus rien, c'est le background de la page que je vois jusqu'au footer. Idem si je remplis la colonne principale en laissant la colonne de droite vide...
J'espère que mes explications sont claires...
Si vous souhaitez une capture d'écran, faîtes-moi signe Smiley cligne

Voilà l'extrait de code xhtml se trouvant entre le header et le footer :
<!-- Debut Colonne Centrale -->
	<div id="centre"></div>
	<!-- Fin Colonne Centrale -->
	
    <!-- Debut Colonne Droite -->
    <div id="droite">

      <!-- Titre -->
      <h1>Menu 1</h1>
      
      <!-- Début Bloc Droite -->
      <div class="bloc">

        <dl>
          <dd>- <a href="x" title="Lien">Lien vers un site</a></dd>
          <dd>- <a href="x" title="Lien">Lien vers un site</a></dd>
          <dd>- <a href="x" title="Lien">Lien vers un site</a></dd>
          <dd>- <a href="x" title="Lien">Lien vers un site</a></dd>
          <dd>- <a href="x" title="Lien">Lien vers un site</a></dd>
          <dd>- <a href="x" title="Lien">Lien vers un site</a></dd>
        </dl>

      </div>
      <!-- Fin Bloc Droite --> 
	  
      </div>	
	
    <!-- Fin Colonne Droite -->
	
    <br class="clear" />


Et voilà le CSS correspondant :

/*                  */
/* Colonne Centrale */
/*                  */

#centre {
width: 768px;
background-color: #FFFFFF;
background-repeat: repeat-y;
border-left: #bc4415 1px solid;
text-align: justify;
float: left;
/* top right bottom left */
margin: 0 0 0 0;
padding-top: 20px;
padding-bottom: 20px;
}



/*                */
/* Colonne Droite */
/*                */

#droite {
width: 190px;
background-color: #fae8e6;
background-repeat: repeat-y;
border-right: #bc4415 1px solid;
float: right;
/* top right bottom left */
padding-top: 20px;
padding-bottom: 20px;
}

/* Titres Droite */

#droite h1 {
width: 190px;
height: 31px;
line-height: 28px;
font-size: 12pt;
text-align: center;;
text-decoration: none;
color: #FFFFFF;
background: url("../images/menu-titre.jpg") no-repeat;
}

/* Bloc Droite */

#droite .bloc {
width: 190px;
color: #bc4415;
/* top right bottom left */
margin: 0 0 30px 0;
}

#droite .bloc dl {
margin: 0;
}

#droite .bloc dd {
width: 190px;
height: 18px;
font-size: 10pt;
text-align: left;
text-indent: 20px;
margin: 0;
}


/* Retour à la ligne forcé */

.clear {
clear: both;
}


J'espère que vous ne verrez pas trop de bétises et que vous pourrez me dire comment rendre mes fonds de colonne extensibles en hauteur... N'hésitez pas à critiquer mon code si j'ai fait des maladresses, tant que ça me fait progresser, je demande que ça ! Smiley lol

Merci beaucoup d'avance de votre aide !
Vatsyayana
Modifié par Vatsyayana (22 Jul 2009 - 00:50)
C'est exactement le problème auquel je viens de donner une réponse dans un topic un peu en dessous... ^^'

Bases toi sur la démarche suivante :


<div id="conteneur">
    <div id="contenu">
    <div id="menu">
</div>



#conteneur {
    overflow:hidden;
    position:relative;
}

#contenu {
    float:left;
    height:100%:
    position:absolute;
    width:800px; /*exemple*/
}

#menu {
    float:left;
    height:100%:
    left:800px /* largeur du conteneur*/
    position:absolute;
    width:200px; /*exemple*/
}


Concernant background-repeat: repeat-y; ça ne s'applique qu'au mode de répétition d'une éventuelle image en arrière plan de l'élément.
Modifié par moust (21 Jul 2009 - 22:49)
Merci Moust !

Désolée pour la double question, mais je suis tellement débutante qu'il est difficile pour moi d'identifier un problème se rapprochant du mien Smiley cligne

Je vais essayer tout de suite... et je reviens te dire ce que ça a donné.

Merci encore.
Alors, le problème de background est arrangé ! Merci beaucoup !
2 petits soucis par contre :
- pour le menu, impossible de mettre le code CSS que tu m'avais donné, apparemment c'est le "position: absolute;" qui faisait tout foirer, y'avait plus rien, j'ai donc laissé cette partie du code comme avant en y ajoutant le "height: 100%;"
- ensuite, j'ai testé de remplir la colonne centrale de plein de paragraphes de textes pour voir si le background de la colonne de droite s'agrandirait bien aussi, mais là mon texte est tronqué, ça ne descend pas plus bas que le contenu de la colonne de droite. Alors là, je comprends pas...

Voilà mon code css :

#contenu {
overflow: hidden;
position: relative;
}

#centre {
width: 768px;
background-color: #FFFFFF;
border-left: #bc4415 1px solid;
text-align: justify;
float: left;
height: 100%;
position: absolute;
margin: 0;
padding-top: 20px;
padding-bottom: 20px;
}

#menu {
width: 190px;
background-color: #fae8e6;
border-right: #bc4415 1px solid;
float: right;
height: 100%;
padding-top: 20px;
padding-bottom: 20px;
}
Ok j'ai trouvé ce qui n'allait pas. Voici la version corrigée (avec juste les paramètres qui nous intéressent) :


#centre {
    float:left;
    width:768px;
}

#menu {
    height:100%;
    left:768px; /* largeur du bloc contenu */
    position:absolute;
    width:190px;
}


Rien à changer pour "#contenu" Smiley cligne
Modifié par moust (22 Jul 2009 - 00:10)
Ça fait tout sauter comme la première fois malheureusement :


#contenu {
overflow: hidden;
position: relative;
}

#centre {
float: left;
width: 768px;
height: 100%;
position: absolute;
background-color: #FFFFFF;
border-left: #bc4415 1px solid;
text-align: justify;
margin: 0 0 0 0;
padding-top: 20px;
padding-bottom: 20px;
}

#menu {
height: 100%;
left: 768px;
position: absolute;
width: 190px;
background-color: #fae8e6;
border-right: #bc4415 1px solid;
padding-top: 20px;
padding-bottom: 20px;
}

#contenu {
overflow: hidden;
position: relative;
}

#centre {
float: left;
width: 768px;
height: 100%; /* inutile */
position: absolute; /* à retirer */
background-color: #FFFFFF;
border-left: #bc4415 1px solid;
text-align: justify;
margin: 0 0 0 0;
padding-top: 20px;
padding-bottom: 20px;
}

#menu {
height: 100%;
left: 768px;
position: absolute;
width: 190px;
background-color: #fae8e6;
border-right: #bc4415 1px solid;
padding-top: 20px;
padding-bottom: 20px;
}

Je t'ai annoté les paramètres à retirés. Je viens encore de testé et ça rend le bon résultat (sous Firefox en tout cas).
Ça y est !!! Ça marche !!!

Je n'ai pas forcément compris pourquoi, surtout qu'on n'emploie pas la même technique pour la colonne centrale où on utilise le "float: left;" et pour la colonne de droite où on utilise le "position: absolute;" et le "height: 100%;".
Le "overflow: hidden" et "position: relative" doivent avoir leur utilité aussi.
J'avoue ne pas très bien comprendre les propriétés position et overflow, même float j'ai du mal... enfin l'important est que ça marche !

Merci beaucoup Moust !
C'est les subtilités de CSS ^^

Pour les explications :

- à ma connaissance, height:100%; ne fonctionne qu'avec les éléments en position:absolute;

- overflow:hidden; permet de "ré-englober" les éléments flottants qu'il contient et qui dépassent alors.

- le position:relative; dans le conteneur général est utile pour le positionnement des éléments en absolute qu'il contient. D'une certaines façon ça permet de le désigner comme position de référence pour ces derniers.
Oup's, j'ai parlé trop vite...

Si j'enlève le contenu de la colonne centrale, ça me tronque la colonne de droite...
moust a écrit :
C'est les subtilités de CSS ^^

Pour les explications :

- à ma connaissance, height:100%; ne fonctionne qu'avec les éléments en position:absolute;

- overflow:hidden; permet de "ré-englober" les éléments flottants qu'il contient et qui dépassent alors.

- le position:relative; dans le conteneur général est utile pour le positionnement des éléments en absolute qu'il contient. D'une certaines façon ça permet de le désigner comme position de référence pour ces derniers.


J'ai rien compris !!!! Smiley biggol
Mais merci d'avoir essayé ! Smiley lol (je te rassure, je pense que c'est moi qui suis une calamité hein Smiley langue )
Modifié par Vatsyayana (22 Jul 2009 - 00:47)
Vatsyayana a écrit :
Oup's, j'ai parlé trop vite...

Si j'enlève le contenu de la colonne centrale, ça me tronque la colonne de droite...

Déjà répondu par MP vu que tu m'a posé également la question par ce biais.

Ajouter min-height prenant comme valeur la hauteur du menu de droite permet de verrouiller le problème.

Mais incompatible avec les vielles version de IE donc à voir si quelqu'un a une meilleur solution Smiley rolleyes
Sujet clos
Aller à