28212 sujets

CSS et mise en forme, CSS3

Chevauchement de background

Bonjour
Voila j'ai un bug d'afichage sur IE (certaines versions) et je ne comprends pas trop
en gros je voudrais que tout le div texte soit blanc mais des que je rentre une autre div a l'interieur le blanc n'est plus total, il recouvre que la partie du div "actu"
ce sera peut etre plus explicite comme ca

merci
Nadege

<style type="text/css">
<!--
#texte{
	margin-top: 0; 
	margin-bottom :0px; 
	margin-right : auto; 
	margin-left : auto; 
	padding: 0px; 
	position: relative;
	width:925px; 
	background-color:#FFFFFF;
}
#actu{
	font-family:Georgia, "Times New Roman", Times, serif;
	background-color:#FFFFFF;
	float: left;
	width: 17%;
	padding-top:15px;
	padding-right: 15px;
	padding-left: 15px;
	text-align: left;
}
body {
	background-color: #090;
}
</style>
</head>

<body>
<div id="texte" >tout ce div doit etre blanc<br />
 <div id="actu">le texte est ici avec fond blanc</div>
</div>
</body>
</html>
Bonjour,

Tu pourrais expliquer plus précisément ton problème...?
Je n'arrive pas à comprendre ce que tu veux... tu veux que que ton div "actu" soit complètement dans le div "texte" et que ça paraisse dans un seul grand rectangle blanc de la div "texte"?
Si c'est cela, c'est l'utilisation du float qui te gêne?
ben oui c'est ca
je comprends pas pourquoi le float gene? tu peux m'expliquer stp
une autre question qui me vient si dans un div texte on veut le diviser en 3 div on fait comment pour mettre le s3 a cote l'un de l'autre?
<style type="text/css">
<!--
#texte{
	position: relative;
	width:925px; 
	background-color:#FFFFFF;
}
#actu1{
	width: 25%;
	text-align: left;
}
#actu2{
	width: 50%;
	text-align: left;
}
#actu3{
	width: 25%;
	text-align: left;
}
body {
	background-color: #090;
}
</style>
</head>

<body>
<div id="texte" >
  <div id="actu1">le texte 1 est ici</div>
  <div id="actu2">le texte 2 est ici</div>
  <div id="actu3">le texte 3 est ici</div>
</div>



merci
Alors on va dire que j'ai bien compris,
Je te suggère donc d'aller voir cet article
http://openweb.eu.org/articles/initiation_float
Pour régler ce problème, comme c'est indiqué dans l'article, et comme j'aime le faire, j'utilise une autre <div> que tu appelles comme tu veux mais à qui tu indique la propriété clear: both qui va obliger cette div à se placer en dessous de tout contenu flottant, et donc d'être prise en compte dans ta grande <div> texte en rectangle blanc.

En reprenant ton exemple:
pour les styles:


#texte{
	margin-top: 0; 
	margin-bottom :0px; 
	margin-right : auto; 
	margin-left : auto; 
	padding: 0px; 
	position: relative;
	width:925px; 
	background-color:#FFFFFF;
	border: 1px solid black;
}
#actu{
	font-family:Georgia, "Times New Roman", Times, serif;
	background-color:#FFFFFF;
	float: left;
	width: 17%;
	padding-top:15px;
	padding-right: 15px;
	padding-left: 15px;
	text-align: left;
	border: 1px solid black;
}
.spacer {
	clear:both;	
}


Et pour le Xhtml:


<div id="texte" >tout ce div doit etre blanc<br />
 <div id="actu">le texte est ici avec fond blanc</div>
 <div class="spacer"></div>
</div>


Pour ce qui est de "diviser" en 3 ton div, il suffit d'appliquer à chacune de tes colonnes actu1, actu2, actu3 la propriété float: left;
Et même principe, tu ajoutes une <div> avec la propriété clear: both; en dessous, le tout dans ta <div> texte pour que tout soit intégré dedans...
Tu as normalement toutes les informations nécessaires à la lecture de l'article, est-ce que ça te va?
Sujet clos
Aller à