28173 sujets

CSS et mise en forme, CSS3

[Résolu] Faire 3 petits blocs en colonne dans la page

Bonjour à tous,

Je souhaite faire comme le site eyrolles (www.eyrolles.com), qui présente 3 livres en colonne sur sa page d'accueil.

C'est à dire qu'il faut que ce soit flexible (agrandissement du bloc quand on étire la fenêtre du navigateur) et en utilisant les blocs (sur eyrolles, c'est un tableau)

J'ai essayé de travailler dessus avec les différents positionnement, les float, etc... mais rien ne fonctionne correctement et j'en appelle votre aide.

Le code HTML ressemble à ceci (il peut être modifié au besoin) :

<div id="column1">
	<h3>Lorem ipsum dolor sit amet</h3>
	<img src="./data/files/img.png" alt="" width="60" height="60" />
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Praesent pretium rhoncus lectus. Nulla scelerisque rutrum justo. Vestibulum suscipit tristique nisl. Donec quis felis. Quisque auctor scelerisque nunc.</p>
	<p><a href="./#" title="En savoir plus...">En savoir plus...</a></p>
</div>
<div id="column2">
	<h3>Lorem ipsum dolor sit amet</h3>
	<img src="./data/files/img.png" alt="" width="60" height="60" />
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Praesent pretium rhoncus lectus. Nulla scelerisque rutrum justo. Vestibulum suscipit tristique nisl. Donec quis felis. Quisque auctor scelerisque nunc.</p>
	<p><a href="./#" title="En savoir plus...">En savoir plus...</a></p>
</div>
<div id="column3">
	<h3>Lorem ipsum dolor sit amet</h3>
	<img src="./data/files/img.png" alt="" width="60" height="60" />
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Praesent pretium rhoncus lectus. Nulla scelerisque rutrum justo. Vestibulum suscipit tristique nisl. Donec quis felis. Quisque auctor scelerisque nunc.</p>
	<p><a href="./#" title="En savoir plus...">En savoir plus...</a></p>
</div>


Avez vous déjà rencontré ce problème et trouvé une solution ?


Je vous remercie !
Modifié par Surfoo (05 May 2006 - 08:44)
Bonjour Surfoo !!

Pour avoir des colonnes flexibles, tu dois leur attribuer une largeur en %.
Dans le cas de 3 colonnes (ici de largeur égale, je suppose), chaque colonne aura 30% en largeur (30% de la largeur de leur conteneur : la fenêtre, ou de l'élément parent).

Ensuite, pour les aligner, il faut les faire flotter (à gauche par exemple).

Le code CSS de base pour achever ceci sur tes 3 div est donc :
div
{
	float: left;   /* on fait flotter le bloc à gauche */
	width: 30%;  /* largeur %, flexible */
	margin: 0 5px;
}

J'ai ajouté une marge externe de 5 pixels à gauche et droite de chaque div pour aérer.

Et voilà, ça flotte ! Smiley cligne

Voilà ce que ça donne (screenshot cliquable issu de mon test) :
upload/3529-surfoo.png
Modifié par Ladytron (04 May 2006 - 15:35)
Bonjour !

Tout d'abord pour mon premier message, bravo à Alsacreations et à tous ceux qui gravitent autour pour les infos d'une haute qualité !

Sinon je poste car j'ai un soucis similaire : je voudrais faire 3 colonnes mais fixes. Dans un <div id="contenu"> j'ai mis 3 <div> qui portent le nom :
- colonne gauche
- centre
- colonne droite et j'aimerai bien que ces trois blocs soient dans le div page.

contenu = 800 px
gauche = 200 px
centre = *
droite = 100 px

Savez vous comment faire ? Mon code CSS est le suivant :

#contenu {
	background-color: #FFFFFF;
	width: 796px;
	margin: auto;
	text-align: left;
	font-style: normal;
	font: Arial, Helvetica, sans-serif;
	font-size: 12px;
}


#centre {
	background-color:#FFCC00;
	margin-left: 140px;
	margin-right: 80px;
	text-align: left;
	font-family: "Times New Roman", Times, serif;
	font-size: 14px;
}

#col_gauche {
	width: 128px;
	background-color: #E5E5E5;
	color: #000000;
	font-family: Arial, Helvetica, sans-serif;
}

#col_droite {
	width: 60px;
	background-color: #FEEBD2;
	color: #000000;
	font-family: Arial, Helvetica, sans-serif;
}


Et le code HTML :

<body>

	<div id="conteneur">

		<div id="logo"><a href="http://www.site.com" title="Titre du logo"></a></div>
		<div id="pub"><img src="banniere.gif"></div>

		<div id="menu"><div id="nav-menu">
			<ul>	<li id="menu1"><a href="#" title="#"></a></li>
					<li id="menu2"><a href="#" title="#"></a></li>
					<li id="menu3"><a href="#" title="#"></a></li>
					<li id="menu4"><a href="#" title="#"></a></li>	</ul>
		</div></div>
		
		<div id="contenu">
			<div id="col_droite">#</div>
			<div id="col_gauche">#</div>
			<div id="centre">#</div>
		</div>
		
	</div>

	<div id="basdepage">#</div>

</body>


Voilà comment j'ai organisé tout cela... Le résultat marche tres bien pour le placement du logo, des 4 rubriques du menu et de la bannière pub. Seul couac est justement cette question : comment faire 3 colonnes fixes dans un conteneur fixe ?

Si vous voyez d'où cela pourrait venir, vous seriez d'une très grande aide. Je suis en train de défendre l'usage du CSS pour remplacer les tables pour des questions de propreté et pour l'accessibilité.

Impératif que le tout passe sous IE Windows.

Merci beaucoup...
...et à bientôt Smiley smile

stefhan
Re-bonjour,

Bon le probleme n'est plus résolu puisque j'ai mis un footer (basdepage) en bas et il n'apparaît pas. Pour cause, il est *sous* le div flottant !

J'ai beau utiliser un

.spacer {
		clear:both;
}

...je vois pas la solution.

Auriez vous une idée ?
pour Stefhan

Salut

Ce CSS devrait faire ce que tu demande 

#contenu {
	background-color: #FFFFFF;
	width: 796px;
	margin: auto;
	text-align: left;
	font-style: normal;
	font: Arial, Helvetica, sans-serif;
	font-size: 12px;
}

#centre {
	background-color:#FFCC00;
	text-align: left;
	font-family: "Times New Roman", Times, serif;
	font-size: 14px;
}

#col_gauche {
	width: 128px;
	background-color: #E5E5E5;
	color: #000000;
	font-family: Arial, Helvetica, sans-serif;
	[#red]float: left;[/#]
}

#col_droite {
	width: 60px;
	background-color: #FEEBD2;
	color: #000000;
	font-family: Arial, Helvetica, sans-serif;
	[#red]float: right;[/#]
}
[#red]#basdepage {
	width: 100%;
}[/#]


A+
Modifié par gege71 (05 May 2006 - 19:09)
Sujet clos
Aller à