28172 sujets

CSS et mise en forme, CSS3

Layout deux colonnes... ou une seule

Bonsoir à tous,

j'ai un petit souci de mise en page pour une <div> contenant des éléments qui sont présents ou absents en fonction de la page.

Exemple:

<div id="main">
<div id="images">
<img src="" alt="" />
<img src="" alt="" />
</div>
<div id="text"><h2>Titre</h2>
<p>Lorem Ipsum ad infinitum ou pas...</p>
<p>Lorem tagada tsoin tsoin</p>
</div>
<div id="quotes"><h2>Quotes</h2>
<p>"J'ai adoré c'était trop beau" <strong>Papa</strong></p>
</div>
</div>

La <div id="main"> est fixe (mettons 600px)
La <div id="images"> n'existe pas toujours, et les photos contenues ne font pas toujours la même largeur.
Les <div="text"> et <div id="quotes"> contiennent toujours des paragraphes, de longueur variable. Il n'est pas forcément nécessaire de séparer ces deux <div>.

J'essaie de faire en sorte que:
- La <div id="images"> soit alignée sur la gauche et ne dépasse jamais 250px
- Les images contenues dans la <div id="images"> soient superposées verticalement
- Les <div="text"> et <div id="quotes"> s'enroulent autour des images, mais qu'elles occupent toute la largeur de la <div id="main"> même si la <div id="images"> n'existe pas.
- Les titres des <div="text"> et <div id="quotes"> aient une image (différente) en tête de titre
- La <div id="main"> contienne le tout (donnons lui un background rose pour l'exemple.
- Et que le tout ait le même look sur IE6, IE7 et Firefox (soyons fous)
Ne nous soucions pas des paddings et margins pour l'exemple.

Voilà ce que j'ai fait en CSS:

#main,#images,#images img,#text,#text p,#text h2,#quotes,#quotes p,#quotes h2{
padding:0;
margin:0;
}
#main{
width:600px;
}
#images{
width:250px;
float:left;
overflow:hidden; /* des fois que les images dépassent */
}
#images img{
max-width:248px; /* marche pas sur IE6 */
border:1px solid #bbb;
}
#text{
}
#quotes{
}
#text h2{
background:transparent url(text.png) no-repeat left top;
padding:0 0 0 24px;
}
#quotes h2{
background:transparent url(quotes.png) no-repeat left top;
padding:0 0 0 24px;
}
#text p{
}
#quotes p{
}

Mon souci (après avoir écrit et testé ce que j'ai écrit se limite à l'image d'arrière-plan de mes titres. Comment faire en sorte qu'elle s'affiche sur tous les navigateur (elle est cachée derrière les images de la <div id="images">).

Exemple du code complet:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>

<style type="text/css">
body{
margin:auto;
padding:0;
}
#main,#images,#images img,#text,#text p,#text h2,#quotes,#quotes p,#quotes h2{
padding:0;
margin:0;
}
#main{
width:600px;
background-color:pink;
}
#images{
width:250px;
float:left;
overflow:hidden; /* des fois que les images dépassent */
}
#images img{
max-width:248px; /* marche pas sur IE6 */
border:1px solid #bbb;
}
#text{
}
#quotes{
}
#text h2{
background:transparent url(http://www.lipsum.com/images/fr/fr.gif) no-repeat left top;
padding:0 0 0 24px;
}
#quotes h2{
background:transparent url(http://www.lipsum.com/images/fr/fr.gif) no-repeat left top;
padding:0 0 0 24px;
}
#text p{
}
#quotes p{
}
br{
clear:both;
}
</style>
</head>
<body>
<div id="main">
	<div id="images">
		<img src="http://www.google.fr/intl/fr_fr/images/logo.gif" alt="toto" />
		<img src="http://www.google.fr/intl/fr_fr/images/logo.gif" alt="tutu" />
	</div>
	<div id="text"><h2>Titre</h2>
		<p>Nulla facilisi. Quisque mauris diam, facilisis ut, laoreet ac, feugiat vel, metus. Sed lobortis nunc at neque. In hac habitasse platea dictumst. Etiam et magna quis neque vestibulum viverra. Curabitur posuere. Mauris id felis eget eros tempus euismod. Fusce aliquet. Quisque iaculis, lorem sit amet facilisis semper, magna massa tincidunt dolor, ac rhoncus sapien arcu id lectus. Mauris ultrices ultricies mi. Etiam aliquam placerat metus.</p>
		<p>Nulla tempus sollicitudin felis. Duis ultricies tempor odio. Nunc hendrerit velit at odio.</p>
	</div>
	<div id="quotes"><h2>Quotes</h2>
		<p>"J'ai adoré c'était trop beau" <strong>Papa</strong></p>
	</div>
<br />
</div>
</body>
</html>

Modifié par effisk (22 Jul 2008 - 01:20)
Bonjour,

Les flottants ne repoussent pas les blocs, mais uniquement leur «contenu» (texte, éléments de type en-ligne). Si tu veux empêcher qu'un élément de type bloc (un titre, un paragraphe, un DIV, etc.) soit recouvert par un flottant, il faut que ce bloc soit repoussé par le flottant. Ça peut se faire avec un contexte de formatage dans tous les navigateurs modernes (dont IE7), et avec du HasLayout pour IE6 et 7.

Je te laisse faire des recherches sur ces concepts (pour le HasLayout, tu peux commencer par la FAQ du forum).
Sujet clos
Aller à