28173 sujets

CSS et mise en forme, CSS3

Bonjour, Smiley biggrin
Voila mon soucis j'ai mis des images en float right et left a coté de mes texte puis j'ai distinquer la partie texte-image de mes 2 bloc de news.
Le probleme c'est que quand mon contenu n'est pas assez grand ca chamboule l'affichage et mes blocs de news ne saffiche plus bien, pourtant j'ai bien distiguer avec les div. J'ai essayer aussi de jouer avec les position relative absolute ca na rien donné.
voila a quoi ca ressemble lorsque le text n'est pas assez grand:

http://img138.imageshack.us/img138/8755/a1zp2.jpg

ca se remet dans le bon ordre lorsque le text est long:

http://img137.imageshack.us/img137/4071/a2uk1.jpg

j'aimerais que ca s'affiche correctement quel qu'en soit la premiere partie.

et mon code :

.img_drt{
	border:2px solid #EEE; /*fillet en bordure des photos */
	float:right;
	margin : 10px 20px 5px 10px;
	padding: 5px ;
}

.img_gch{
	border:2px solid #EEE; /*fillet en bordure des photos */
	float:left;
	margin : 10px 10px 5px 20px;
	padding: 5px;
}
.affiche{
	float: left;
	height: 296px;
	width: 360px;
	margin:10px;
	background: url(images/affiche.jpg) no-repeat;
}
.actualite{
	float: right;
	height: 296px;
	width: 360px;
	margin: 10px;
	background: url(images/actualite.jpg) no-repeat;
}
.actualite_article{

	font-size:0.8em;
	margin: 30px 5px 10px 5px;
	padding: 20px 0 0 0;

}
#bloc{

display:block;

}
.textsection{
	margin :5px 10px 10px 10px; 
	padding : 5px 10px 10px 15px; 
}



Html :


				<div id="contenu"><!-- Ceci est mon contenu principal -->
					<div class="textsection">
						<h1>12 Jours avant l'ouverture</h1>
						<h2>Bienvenue sur le site du festival WEEK ZIK!</h2>
						<h3>du 15 au 25 Mars pour un RDV inoubliable dans Little Ville  </h3>
						<img src="images/chanteur.jpg" width="148" height="108" class="img_drt">
						<p class="text">La 41ème édition du Festival s'est achevé le 29 août dernier en l'Abbatiale Saint-Robert de La Chaise-Dieu.Le rendez-vous est déjà pris pour l'année prochaine.! D'ici là, nous vous proposerons quelquesrendez-vous en saison, et vous pourrez suivre
les actualités du Festival via ce site internet.</p>
						<img src="images/logo_ville.jpg" width="148" height="108" class="img_gch">
						<p class="text">Little ville Description de la ville Le rendez-vous est déjà pris pour l'année prochaine...<br />
D'ici là, nous vous proposerons quelques rendez-vous en saison, et vous pourrez suivre les actualités du Festival via ce site internet.<br />

 
A bientôt en Auvergne pour de grands moments musicaux...</p>
					</div>	
					<div id="bloc">
									<!-- BLOCS !-->
							<div class="affiche">
									<p>bla bla bla</p>
							</div>
					
							<div class="actualite">
								<span class="actualite_article">Rencontrez les artistes du groupe bresilienBanda calypso le 23 Mars à l'hotel Méridien ! <br /></span>
								<span class="actualite_article">Les tickets du concert de Santana prévu au Rex club sont deja disponible à la réservation ! <br /></span>
								<span class="actualite_article">Concert gratuit à la place de la gare le 24 Marsà 21 heure, plusieurs stars mondiales seront au RDV! <br /></span>
								<span class="actualite_article">Profitez du tarif réduit étudiant : 55 € au lieu de 85€ pour avoir libre accés à tous les concerts du festival ! </span>
							</div>
					</div>
				</div>

Thx
Modifié par eagle84 (07 Feb 2008 - 15:56)
Bonjour,

À vue de nez, c'est un problème de dépassement des flottants contenus dans div.textsection.

Ça se traite par un des moyens habituels: overflow: auto|hidden, un peu de clear: both, etc.
Florent V. a écrit :
Bonjour,

À vue de nez, c'est un problème de dépassement des flottants contenus dans div.textsection.

Ça se traite par un des moyens habituels: overflow: auto|hidden, un peu de clear: both, etc.

Ah la classe !
j'ai tenter le overflow: auto et ca a marché du premier coup merci !
Smiley biggrin