28173 sujets

CSS et mise en forme, CSS3

Problème de retour à la ligne dans un div + texte

Bonjour !
Voila j ai un problème épineux :
je voudrais une page (actuellement sans CSS) ressemblant à cela : http://start1g.ovh.net/~starters/index.html
Je début en CSS et le meilleur résultat que j'aie pu obtenir jusqu'ici est ceci : http://start1g.ovh.net/~starters/probleme/index.html

Voici mes codes html et css :

<!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"  lang="fr">
  <head>
    <meta http-equiv="Content-Type" content="text/html;      charset=utf-8" />
    <title>Montitreblabla</title>
<link rel="stylesheet" type="text/css" href="CSS/layout.css" />

  </head>




<body>

<div id="introbig">
    <div id="intrologo"><a href="asbl.html"><img src="images/asbl.jpg" alt="Informations sur notre association."  width="120" height="120" border="0" /></a></div>

	<div id="intrologo"><a href="ssc.html"><img src="images/ssc.jpg" alt="Informations sur la Smart Student Card" 								width="120" height="120" border="0" /></a></div>
	<div id="intrologo"><a href="live.html"><img src="images/live.jpg" alt="Informations sur Starters Live (Concerts)" 							width="120" height="120" border="0" /></a></div>
	<div id="intrologo"><a href="meetings.html"><img src="images/meetings.jpg" alt="Informations sur les conf&eacute;rences d'entreprenariat" 	width="120" height="120" border="0" /></a></div>
	<div id="intrologo"><a href="discovery.html"><img src="images/discovery.jpg" alt="Informations sur les visites d'entreprises" width="120" height="120" border="0" /></a></div>

	<div id="introimg"><a href="ssc.html"><img src="images/intro/asbltemp.jpg" width="120" height="170" border="0" /></a></div>
	<div id="introimg"><a href="ssc.html"><img src="images/intro/sscimagedessous.jpg" width="120" height="170" border="0" /></a></div>
	<div id="introimg"><a href="ssc.html"><img src="images/intro/concert.JPG" width="120" height="170" border="0" /></a></div>
	<div id="introimg"><a href="ssc.html"><img src="images/intro/meeting.jpg" width="120" height="170" border="0" /></a></div>
	<div id="introimg"><a href="ssc.html"><img src="images/intro/discovery.jpg" width="120" height="170" border="0" /></a></div>
	

	<div id="introtxt"><img src="images/intro/fleche.jpg" width="10" height="10" />Qui sommes-nous? Que faisons-nous ? Quel est notre but ?</div>
    <div id="introtxt"><img src="images/intro/fleche.jpg" width="10" height="10" />D&eacute;couvrez notre carte offrant diverses r&eacute;ductions dans de nombreux commerces Bruxellois !</div>
	<div id="introtxt"><img src="images/intro/fleche.jpg" width="10" height="10" />Vibrez au son des groupes en tout genre lors de nos concerts organises !</div>
	<div id="introtxt"><img src="images/intro/fleche.jpg" width="10" height="10" />Enrichissez-vous de nombreuses exp&eacute;riences que nos invit&eacute;s vous feront vivre !</div>
	<div id="introtxt"><img src="images/intro/fleche.jpg" width="10" height="10" />D&eacute;couvrez le monde des entreprises sans plus attendre ! </div>
</div>

</body>
</html>



div#introbig {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	top : 50px;
	background : #ffffff;
	width : 800px;
	border : none;
	text-align: center;
}
div#intrologo {
	position: relative;
	margin: 20px 20px 20px 20px;
	border : 0px;
	width : 120 px;
	height : 120 px;
	float:left;
	
}

div#introimg {
	position: relative;
	margin: 20px 20px 20px 20px;
	border: 0px;
	width: 120 px;
	height: 170 px;
	float:left;
	
}

div#introtxt {
	position: relative;
	margin: 20px 20px 20px 20px;
	border: 0px;
	width: 120 px;
	height: 100 px;
	float:left;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: x-small;
	font-weight: bold;
	color: #666666;
}

div#main {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	top: 50px;
	background : #ffffff;
	width:750px;
	border: none;
	padding-bottom : 10px;
	text-align: center;
}


Je n'arrive pas à faire en sorte que les div "introtxt" fassent un retour à la ligne du texte ! J'ai nettement l'impression que tous les attributs "height" et "width" ne sont absolument pas respectés Smiley ohwell

Aurélien


EDIT : j'ai transformé les "id" en "class" avec les changements impliqués dans le CSS, même resultat... J'ai essayé design:block; pour introtxt, même résultat...

En fait, mon code se résume à 15 div se suivant, mais la largeur maximale est atteinte apres 5 div, ce qui permet mon "retour à la ligne". Ce n'est peut etre pas la meilleure manière de faire, qu'en pensez-vous ? Est ce une cause du problème ?
J'ai également essaye d'implanter 3 conteneurs "introbig" ; un par ligne mais le résultat est identique...

La seule chose qui semble donner un résultat est d'écrire un texte dans le div comportant une des images. Il reste bien vertical par rapport à l'image, mais si je fais cela pour au moins 3 images d'une même ligne, le retour à la ligne ne se fait plus, le texte déborde sur le coté et toute la structure s'embrouille !
BOUH !
Modifié par MisterAure (23 Oct 2006 - 10:51)
Salut ,



-plutot que de caser ton texte dans des divs, mets le dans des balises appropriées (<p></p> ou<li></li> par exemple)
-ce n'est pas "design:block;" mais "display:block;"
-les id doivent être des identifiants uniques, sinon utilise les classes.
-l'attribut alt="texte alternatif à l'image" n'est pas facultatif.

Une fois reglée la mise en forme sémantique, tu partira sur des bases plus saines et tu y verra plus clair. Tu pourras alors te pencher sur la mise en forme visuelle.
Sujet clos
Aller à