18041 sujets

Questions générales et questions de débutants

[Resolu ]Textes dans DIV imbriqués

Bonjour,
Ne vous tordez pas de rire, je sais tout sur PHP POO POD MySql etc ... enfin a peut prés ... mais sur les style NON loin de là ... Smiley decu
Voila mon probléme j'ais a chaque annonce une série de DIV imbriqués (pour pas grand chose ?
je vous ais mis deux annonces , et j'ais mis le STYLE dans la page pour vous faciliter la tâche.
Sachez que chaque annonce a la même taille (l'URL background est de taille fixe.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
</head>
<body>
<style>
#concerton {
 margin : auto;background-image: url(http://www.taxi-rock.com/content_img/date_concert.jpg); margin-left: 360px; width: 546px; height: 87px;
}
#titre {
 margin-top: -6px; font-weight: bold; font-size: 18px; float: left; margin-left: 15px; font-family: Arial, sans-serif;
}
#lieu {
 margin-top: -3px; float: left; margin-left: 120px; font-family: Arial, sans-serif;
}
#date {
 font-size: 17px; float: right; color: white; margin-right: 10px; font-family: Arial, sans-serif; TEXT-ALIGN: right;
}
#comm {
 margin-top: 20px; font-size: 10px; float: left; margin-left: 6px; width: 427px; color: #455838; font-family: Arial, sans-serif; height: 35px;
}
span.mafonte3 { font-size : 3; }
span.LeLieu { color:'#587e3f';font-size : 2; }

</style>
<div id='concerton'>
 <div id='titre'>
  Fête de la musique
 </div>
 <div id='lieu'>
  <span class='mafonte3'>Lieu :</span> <span class='LeLieu'>Danube</span>
 </div>
 <div id='date'>
  21/06/2010<br /><br /><br />21H00
 </div>
 <div id='comm'>
 A l'occasion de la fete de la musique, Youssef nous ouvre ses portes, pour un 
 peu de remember. Plus d'info bientôt.
 </div>
</div>
<br />
<div id='concerton'>
 <div id='titre'>
  PRIVE
 </div>
 <div id='lieu'>
  <span class='mafonte3'>Lieu :</span> <span class='LeLieu'>Jambville</span>
 </div>
 <div id='date'>
  13/05/2010<br /><br /><br />20H00
 </div>
 <div id='comm'>
  Concert privé.
 </div>
</div>
</body></html>

Modifié par Christele (10 May 2010 - 09:06)
Tiens, essaye ça :
<div class="annonce">
	<div class="vert">
		<div class="clair">
			<span class="title">Lorem ipsum</span>
			<span class="lieu">dolor sit amet</span>
		</div>
		<div class="normal">
			<p class="description">Etiam pulvinar tortor vitae urna tincidunt vitae pulvinar velit venenatis. Nunc iaculis facilisis diam in placerat.</p>
		</div>
	</div>
	<div class="gris">
		<div class="clair">
			<span class="date">...</span>
		</div>
		<div class="normal">
			<span class="heure">...</span>
		</div>
	</div>
</div>

.annonce
{
	background: url('/Images/test.png') no-repeat;
	font-size: .85em;
	margin-bottom: 15px;
	padding: 0 4px;
	position: relative;
	width: 538px;
}
.vert
{
	height: 87px;
	width: 436px;
}
.vert p
{
	display: inline;
}

.vert .clair
{
	line-height: 43px;
	position: relative;
}
.titre { font-weight: bold; }
.lieu
{
	position: absolute;
	right: 0px;
}
.vert .normal { margin-top: 4px; }
.gris
{
	color: #FFF;
	height: 80px;
	padding: 0 4px;
	position: absolute;
	right: 4px;
	text-align: center;
	top: 4px;
	width: 90px;
}
.gris div { line-height: 40px; }
... et le résultat :

http://img22.imageshack.us/img22/9896/testqu.png

;)
Sujet clos
Aller à