28173 sujets

CSS et mise en forme, CSS3

Problème de background-repeat avec 2 colonnes

Bonjour,

J'ai un problème avec un background-repeat ( image 1px). J'ai une div "contenu" qui contient 2 autres div "colonne_droite" et "colonne_gauche". Logiquement la div contenu devrait être tout recouverte de l'image ( 1px _ qui se répèter.Cependant, l'image se répète seulement selon la taille de la "colonne_droite" et non de la taille de la div "contenu".

Exemple en ligne : http://www.pascalandreallaire.com/test/index.php

Code Html

<body>
<div id="container">
  
  <div id="header">header</div><!-- fin div header -->
 
  <div id="contenu">
  
    <div id="colonne_gauche"> <br/>
      Colonne #1 avec du texte<br/>
      Post haec Gallus Hierapolim profecturus ut expeditioni specie tenus adesset, Antiochensi plebi suppliciter obsecranti ut inediae dispelleret metum, quae per multas difficilisque causas adfore iam sperabatur, non ut mos est principibus, quorum diffusa potestas localibus subinde medetur aerumnis, disponi quicquam statuit vel ex provinciis alimenta transferri conterminis, sed consularem Syriae Theophilum prope adstantem ultima metuenti multitudini dedit id adsidue replicando quod invito rectore nullus egere poterit victu.
      
      At nunc si ad aliquem bene nummatum tumentemque ideo honestus advena salutatum introieris, primitus tamquam exoptatus suscipieris et interrogatus multa coactusque mentiri, miraberis numquam antea visus summatem virum tenuem te sic enixius observantem, ut paeniteat ob haec bona tamquam praecipua non vidisse ante decennium Romam.
      
      Quam quidem partem accusationis admiratus sum et moleste tuli potissimum esse Atratino datam. Neque enim decebat neque aetas illa postulabat neque, id quod animadvertere poteratis, pudor patiebatur optimi adulescentis in tali illum oratione versari. Vellem aliquis ex vobis robustioribus hunc male dicendi locum suscepisset; aliquanto liberius et fortius et magis more nostro refutaremus istam male dicendi licentiam. Tecum, Atratine, agam lenius, quod et pudor tuus moderatur orationi meae et meum erga te parentemque tuum beneficium tueri debeo. </div>
    
	<div id="colonne_droite"> Colonne #2 </div>
 
  </div>
  
  
  <div id="footer"><h3>footer</h3></div><!--  fin div footer -->

</div><!-- fin div container -->
</body>


CSS

body
{
	background-color:#d4d392;
	font-size:100%;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}

#container
{
	position:relative;
    margin-left: auto;
    margin-right: auto;
    width:727px;
	height:auto;
}

#header
{
	width:727px;
	height:136px;
	background-color:#00CCCC;
}

#contenu
{
	width:727px;
	background-image:url(../img/ligne_contenu.gif);
	background-repeat:repeat-y;
	background-color:#CC33FF;
}

#colonne_gauche
{
	width:520px;
	float:left;
}

#colonne_droite
{
	min-height:100%;
}

#footer
{
	width:727px;
	height:60px;
	background-color:#999900;
	clear: both;
}

Modifié par Sgtcook (20 Jun 2007 - 04:47)
Hello Smiley smile

Normal, ta colonne de droite est DANS ta colonne de gauche... Une <div> étant un élément de type bloc tes colonnes se placent les unes en dessous des autres.

Modifie ton code de la sorte et ça devrait fonctionner :
<div id="contenu">

     <div id="colonne_gauche">
          Colonne #1 avec du texte<br/>
          Post haec Gallus Hierapolim [...] 
     </div>

     <div id="colonne_droite"> 
          Colonne #2 
     </div>

</div>

Au passage c'est pas une bonne idée de semer des <br/> un peu partout dans le code, applique plutôt les propriétés margin et padding à tes éléments. La mise à jour du site n'en sera que plus facile Smiley cligne
Modifié par BeliG (20 Jun 2007 - 09:26)
Florent V. a écrit :
Mettre un overflow: hidden sur div#contenu devrait faire l'affaire.

Sans doute, mais est-ce vraiment logique de mettre la colonne de droite dans la colonne de gauche ? Je suis d'avis qu'il devrait revoir sa structure avant de bidouiller avec les overflow...
BeliG a écrit :
Sans doute, mais est-ce vraiment logique de mettre la colonne de droite dans la colonne de gauche ? Je suis d'avis qu'il devrait revoir sa structure avant de bidouiller avec les overflow...

Heu... la structure que j'ai sous les yeux est la suivante :
<div id="contenu">
	<div id="colonne_gauche"> Colonne #1 avec du texte </div>
	<div id="colonne_droite"> Colonne #2 </div> 
</div>

Pas de problème d'imbrication en vue.
Modifié par Florent V. (20 Jun 2007 - 10:17)
Florent V. a écrit :
Pas de problème d'imbrication en vue.

Exact. J'avais pas vu la </div> de colonne_gauche, placée au bout du rouleau. Toutes mes excuses.
Florent V. a écrit :
Il s'agit surtout d'un classique problème de dépassement des flottants (enfin, du flottant) :
http://web.covertprestige.info/test/03-elements-flottants-et-element-parent-1.html

Mettre un overflow: hidden sur div#contenu devrait faire l'affaire.

Pour le pied de page, tu as aussi un problème de fusion des marges :
http://web.covertprestige.info/test/04-blocs-imbriques-et-fusion-des-marges.html

Mettre un padding: 1px 0; sur le div#footer.


Merci pour les conseils, cependant le "0" dans padding: 1px 0; siginifie quoi ? le top ?
J'ai une autre question, est-ce normal de mettre float:left a "colonne droite" et a "colonne gauche" pour forcer la "colonne gauche" à faire un float left ?

Avec seulement un float left sur colonne droite
http://www.pascalandreallaire.com/test/avec_1_float_left.php

avec un float left pour "colonne droite" et "colonne gauche"
http://www.pascalandreallaire.com/test/avec_2_float_left.php

Code HTML pour les 2
<div id="container"> 
  <div id="header">header</div>
  <!-- fin div header -->
  
<div id="contenu">
  
  <div id="colonne_gauche">colonne gauche</div>
  <div id="colonne_droite">colonne droite</div>
		
</div>
	
  <div id="footer">
  		<h3>footer</h3>
  </div>
  <!--  fin div footer -->

</div>
<!-- fin div container -->


CSS de avec_1_float_left.php

Note : J'ai mis en gras le code pour colonne droite et gauche
body
{
	padding:0px;
	margin-left: 0px;
	margin-bottom: 0px;
	margin-right: 0px;
	margin-top: 0px;
	background-color:#d4d392;
	font-size:100%;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}

#container
{
	position:relative;
    margin-left: auto;
    margin-right: auto;
    width:727px;
    text-align: left;
	margin-top:10px;
}

#header
{
	width:727px;
	height:136px;
	background-color:#33FF66;
}

#contenu
{
	width:727px;
	height:auto;
	background-image:url(../img/ligne_contenu.gif);
	background-repeat:repeat-y;
	overflow:hidden;
}
[b]
#colonne_droite
{
	width:188px;
	height:auto;
	padding-left:7px;
	background-color:#339999;
}[/b]

#colonne_droite p
{
	padding-left:10px;
}


#colonne_droite ul
{
	padding:0px;
	margin:0px;
	padding-left:0px;
	list-style-type:none;
	text-decoration:none;
}
		
#colonne_droite ul li
{
	padding:0px;
	margin:0px;
	font-size:0.7em;
}


/**************/
[b]
#colonne_gauche
{
	width:520px;
	height:auto;
	min-height:300px;
	border-right:solid;
	border-right-color:#000000;
	border-right-width:1px;
	background-color:#CC9900;
	float:left;
}[/b]


#footer
{
	width:727px;
	height:60px;
	background-color:#00FFFF;
	background-repeat:no-repeat;
	clear: both;
	padding: 1px 0;
}

#header img
{
	float:left;
}


CSS de avec_2_float_left.php
body
{
	padding:0px;
	margin-left: 0px;
	margin-bottom: 0px;
	margin-right: 0px;
	margin-top: 0px;
	background-color:#d4d392;
	font-size:100%;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}

#container
{
	position:relative;
    margin-left: auto;
    margin-right: auto;
    width:727px;
    text-align: left;
	margin-top:10px;
}

#header
{
	width:727px;
	height:136px;
	background-color:#33FF66;
}

#contenu
{
	width:727px;
	height:auto;
	background-image:url(../img/ligne_contenu.gif);
	background-repeat:repeat-y;
	overflow:hidden;
}
[b]
#colonne_droite
{
	width:188px;
	height:auto;
	padding-left:7px;
	background-color:#339999;
	float:left;
}[/b]

#colonne_droite p
{
	padding-left:10px;
}


#colonne_droite ul
{
	padding:0px;
	margin:0px;
	padding-left:0px;
	list-style-type:none;
	text-decoration:none;
}
		
#colonne_droite ul li
{
	padding:0px;
	margin:0px;
	font-size:0.7em;
}


/**************/

[b]
#colonne_gauche
{
	width:520px;
	height:auto;
	min-height:300px;
	/*margin-left: 200px;*/
	border-right:solid;
	border-right-color:#000000;
	border-right-width:1px;
	background-color:#CC9900;
	float:left;
}[/b]


#footer
{
	width:727px;
	height:60px;
	background-color:#00FFFF;
	background-repeat:no-repeat;
	clear: both;
	padding: 1px 0;
}

#header img
{
	float:left;
}
Sgtcook a écrit :
Merci pour les conseils, cependant le "0" dans padding: 1px 0; siginifie quoi ? le top ?

propriété: a b; est une forme équivalente de propriété: a b a b;. Lorsqu'on a les quatre valeurs, on commence par le top et on tourne dans le sens des aiguilles d'une montre.

Donc dans padding: 1px 0; le 0 s'applique à padding-left et padding-right, tandis que le 1px s'applique à padding-top et padding-bottom.
Modifié par Florent V. (21 Jun 2007 - 01:13)
Sgtcook a écrit :
J'ai une autre question, est-ce normal de mettre float:left a "colonne droite" et a "colonne gauche" pour forcer la "colonne gauche" à faire un float left ?

Heu... je ne suis pas sûr de te suivre, là.

La chose à retenir, c'est que pour mettre deux blocs côte-à-côte il n'est pas nécessaire d'avoir deux flottants, un seul peut suffire. C'est même recommandé de ne pas mettre que des flottants sur une largeur (évite des problèmes potentiels de positionnement avec certains navigateurs, notamment avec IE6).

Par contre : le fait de faire flotter un élément ne va pas le faire miraculeusement remonter en haut à droite ou en haut à gauche d'un élément qui le précède. C'est le cas de figure de ton premier exemple : le premier bloc n'est pas flottant, et le deuxième bloc vient donc se placer en dessous. Toujours dans ce premier exemple, passer le deuxième bloc en float: right pour voir ce que ça change : le bloc va bien à droite, mais il ne remonte pas, en toute logique.

Pour mieux te familiariser avec les flottants, deux lectures conseillées :
http://openweb.eu.org/articles/initiation_float/
Un design fluide avec trois «colonnes», grâce au positionnement flottant

Dans le deuxième article, tu trouveras aussi un lien vers la page suivante :
http://web.covertprestige.info/test/07-colonnes-flottantes-et-place-dans-le-flux.html
Parfois, le plus simple est de visualiser directement les conséquences du positionnement flottant. Smiley smile
Florent V. a écrit :

Heu... je ne suis pas sûr de te suivre, là.

La chose à retenir, c'est que pour mettre deux blocs côte-à-côte il n'est pas nécessaire d'avoir deux flottants, un seul peut suffire. C'est même recommandé de ne pas mettre que des flottants sur une largeur (évite des problèmes potentiels de positionnement avec certains navigateurs, notamment avec IE6).

Par contre : le fait de faire flotter un élément ne va pas le faire miraculeusement remonter en haut à droite ou en haut à gauche d'un élément qui le précède. C'est le cas de figure de ton premier exemple : le premier bloc n'est pas flottant, et le deuxième bloc vient donc se placer en dessous. Toujours dans ce premier exemple, passer le deuxième bloc en float: right pour voir ce que ça change : le bloc va bien à droite, mais il ne remonte pas, en toute logique.

Pour mieux te familiariser avec les flottants, deux lectures conseillées :
http://openweb.eu.org/articles/initiation_float/
Un design fluide avec trois «colonnes», grâce au positionnement flottant

Dans le deuxième article, tu trouveras aussi un lien vers la page suivante :
http://web.covertprestige.info/test/07-colonnes-flottantes-et-place-dans-le-flux.html
Parfois, le plus simple est de visualiser directement les conséquences du positionnement flottant. Smiley smile


Excuse de m'avoir aussi mal exprimé Smiley decu

Normalement, j'ai un structure comme :


<div id="contenu">
   <div id="a">je suis a</div>
   <div id="b">je suis b</div>
</div>


et que je veux mettre la div "b" à la même hauteur que la div "a"



#a
{
width:...px
float:left;
}

#b
{
width:...px
}


Cependant l'exemple que j'ai mit plus haut ( voir mon avant-dernier message )

je dois faire ( voir en css plus bas ) pour avoir la div "b" à la même hauteur que la div "a" et cela me semble pas logique.

{
width:...px
float:left;
}

#b
{
width:...px
float:left;
}
Sgtcook a écrit :
Excuse de m'avoir aussi mal exprimé Smiley decu

Je t'excuse surtout de ne pas avoir lu les documents que je t'ai indiqué... Smiley rolleyes

Pour l'instant, tu n'as toujours pas compris le principe du positionnement flottant. Il est vrai que celui-ci n'est pas toujours évident à saisir (même si une fois qu'on a compris ça va tout seul). Les trois documents que je t'ai indiqué devraient t'aider à y voir plus clair.

Tu m'excuseras de privilégier le « comment ça marche ? » au « quel code je dois mettre ? ». Smiley cligne


PS : un indice : tester le code suivant :
#a {
width: 50%;
float:left;
border: solid 3px red;
background: transparent;
}
#b {
width: auto; /* valeur par défaut */
background: yellow;
}
Florent V. a écrit :

Je t'excuse surtout de ne pas avoir lu les documents que je t'ai indiqué... Smiley rolleyes

Pour l'instant, tu n'as toujours pas compris le principe du positionnement flottant. Il est vrai que celui-ci n'est pas toujours évident à saisir (même si une fois qu'on a compris ça va tout seul). Les trois documents que je t'ai indiqué devraient t'aider à y voir plus clair.

Tu m'excuseras de privilégier le « comment ça marche ? » au « quel code je dois mettre ? ». Smiley cligne


PS : un indice : tester le code suivant :
#a {
width: 50%;
float:left;
border: solid 3px red;
background: transparent;
}
#b {
width: auto; /* valeur par défaut */
background: yellow;
}


Après avoir relu les articles et fait quelques test avec ton exemple div#a et div#b, les float me semble un peu plus clair Smiley biggrin

Merci !
Sujet clos
Aller à