Webmaster Hub > Problème de création de colonnes dans un div

Version complète: sur le forum Webmaster Hub : Problème de création de colonnes dans un div

Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS

labarique

jeudi 27 mars 2008 à 15:46

Bonjour,

nouveau dans le monde du CSS, je viens de me lire le tutoriel en 15 parties de pompage.net (http://www.pompage.net/pompe/cssdezero-1/) avant de me lancer dans la réalisation d'une mise en page pour mon site.

Une fois cette lecture achevée, je me retrouve avec un souci dans la composition de ma page : je souhaite mettre le contenu d'une div en deux colonnes, elles mêmes codées en div. Pourtant, alors qu'il y a la place pour qu'elles soient l'une à la suite des autres, les deux <DIV> (en rose) s'empilent.

Quelqu'un a-t-il une idée ? Ci-joint mon fichier html.

D'avance merci !

CODE

<HTML>

<!-- CODE SPIP DE BASE -->

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html dir="#LANG_DIR" lang="#LANG">
<head>
<title>[(#NOM_SITE_SPIP|textebrut)]</title>
[<meta name="description" content="(#DESCRIPTIF_SITE_SPIP|couper{150}|textebrut)" />]
<style type="text/css" title="mes_styles" media="all">
<!--

body
	{
		background-color: #F4F4F4;
	margin: 0
	}
	
#en_tete
	{position : relative;
		background-color: #F4F4F4;
	height: 130px
		}

#navigation 
	{
	color: white;
	font-family: Verdana;
	font-size: 9px;
	line-height: 16px;
	background-color: #82836D;
	text-align: center;
	letter-spacing: 6px;
	margin-bottom: 15px;
	height: 16px
	}

.nav_gauche
	{
	text-align: right;
	width: 20%;
	float: left
	}

.element-de-menu
	{
	color: #758642;
	margin-top: 20px;
	margin-left: 20px;
	border-top: 0 none;
	border-right: 0 none;
	border-bottom: 1px dotted #758642;
	border-left: 0 none
	}

.element-de-menu a:link 
	{
	color: #758642;
	text-decoration: none
	}

.element-de-menu a:hover 
	{
	color: #c63;
	text-decoration: none
	}

.milieu
	{
	padding-left: 36px;
	width: 50%;
	float: left;
	}

.cellule_milieu

	{
		background: #E6E6FA;
		font-size: small;
		width: 100%;
	}

.cellule_milieu_titre
{
		background: #E6E6FA;
		font-weight: bold;
		font-size: 12px;
		width: 100%;
		background-color: #6b6c5a;
	}

.col_milieu
{
		width: 50%;
		border: 1px solid #000;
		font-size: 12px;
		background-color: #FF1493;
	}
	
	
.nav_droite
	{
	font-size: 10px;
	font-style: italic;
	line-height: 20px;
	padding-left: 3%;
	width: 15%;
	float: left
	}

#pied-de-page
	{
	color: white;
	font-size: 9px;
	line-height: 16px;
	background-color: #6b6c5a;
	text-align: center;
	letter-spacing: 6px;
	height: 16px;
	clear: left
	}

p { text-indent: 3em}

ul {margin: 1em 0 1em 40px }
ul li { margin: .5em 0 .5em 0 }


 -->
</style>
</head>

<BODY>
<div id="en_tete">TITRE DE LA PAGE</div>
<div id="navigation"><a href="#">ACCUEIL</a> | <a href="#">HISTOIRE</a>  | <a href="#">NATURE</a> | <a href="#">VISITEURS</a> |<a href="#"> CONTACT</a></div>
<div class="nav_gauche">
			<p>&nbsp;</p>
			<div class="element-de-menu">Actualités</DIV>
			<div class="element-de-menu">Séminaires</DIV>
			<div class="element-de-menu">Expériences</DIV>
			<div class="element-de-menu">Documentation</DIV>
			<div class="element-de-menu">Encyclopédie</DIV>
			<p>&nbsp;</p>
</DIV>

<div class="milieu">


<Div class="cellule_milieu">
<DIV CLASS="cellule_milieu_titre">Actualités</DIV>
<DIV CLASS="col_milieu">Petit texte assez intéressant.</DIV>
<DIV CLASS="col_milieu">QQSD QDQSDLK JKL lkjsfdjkl j lksflkjsdlkf sklfjklj.QQSD QDQSDLK JKL lkjqlksdj lkjklsfdjkl j lksdjflkjsdlkf sklfjklj.
</DIV>
</Div>
<BR />

<Div class="cellule_milieu">
<DIV CLASS="cellule_milieu_titre">Expériences</DIV>
QQSD QDQSDLK JKL lkjqlksdj lkjklsfdjkl j <STRONG>lksdjflkjsdlkf</STRONG> sklfjklj.QQSD QDQSDLK JKL lkjqlksdj lkjklsfdjkl j lksdjflkjsdlkf sklfjklj.QQSD QDQSDLK JKL lkjqlksdj lkjklsfdjkl j lksdjflkjsdlkf sklfjklj.QQSD QDQSDLK JKL lkjqlksdj lkjklsfdjkl j lksdjflkjsdlkf sklfjklj.QQSD QDQSDLK JKL lkjqlksdj lkjklsfdjkl j lksdjflkjsdlkf sklfjklj.QQSD QDQSDLK JKL lkjqlksdj lkjklsfdjkl j lksdjflkjsdlkf sklfjklj.QQSD QDQSDLK JKL lkjqlksdj lkjklsfdjkl j lksdjflkjsdlkf sklfjklj.
</Div>

</DIV>

<div id="pied-de-page">
			<a href="#">ACCUEIL</a> | <a href="#">HISTOIRE</a>  | <a href="#">NATURE</a> | <a href="#">VISITEURS</a> |<a href="#"> CONTACT</a>
						</div>
</BODY>

</HTML>

captain_torche

jeudi 27 mars 2008 à 15:59

Tout d'abord, bienvenue.

Pour commencer, afin que tes divs se trouvent l'un à côté de l'autre, il faut les définir en "flottants", car leur comportement de base est de type "block", c'est-à-dire que l'élément suivant se retrouve automatiquement à la ligne.

CODE

.col_milieu {
float: left;
}

Toutefois, cela ne fonctionnera pas encore, car tes colonnes font toutes les deux exactement 50% de la zone, et possèdent une bordure extérieure de 1 pixel, ce qui fait que le total dépasse très légèrement les 100% de ta largeur, d'où le fait qu'elles soient encore l'une en-dessous de l'autre.
Comme tu utilises une mise en page flottante, on peut difficilement se passer des pourcentages, il va falloir trouver un moyen de passer outre cette limitation :
- soit en te privant de ces bordures
- soit en trouvant une autre méthode pour utiliser la bordure (une image de fond, par exemple)

Pour finir, tu pourras constater que la zone de dessous se retrouve en-dessous des colonnes. Pour contourner ce souci, il te suffit de préciser que cet élément doit annuler les positionnements flottants précédents :

CODE

.cellule_milieu {
clear: left;
}

On peut également utiliser clear: both, qui aurait aussi annulé les positionnement flottants éventuellement définis à droite.

Pour finir, par souci de respect de la sémantique des balises, tu peux aisément remplacer tes div class="cellule_milieu_titre" par une balise de titre appropriée (h1 à h6).
Il te suffit ensuite d'en préciser le style dans ta CSS :

CODE

.cellule_milieu h1 {
/* Tu recopies ici le contenu de ton style .cellule_milieu_titre */
}

C'est une erreur fréquemment faite par les reconvertis du design tabulaire, qui utilisaient auparavant des cellules de type td class="titre" (J'en ai fait partie).

labarique

jeudi 27 mars 2008 à 16:53

Rebonjour,

et merci pour la rapidité de ta réponse ! Effectivement, j'avais totalement manqué cette révolution des <DIV>. De mon temps, comme on dit, je codais toute la mise en page en crachant des TR, TD, TABLE à la volée. C'était très bourrin, mais très efficace. Ce qui m'étonne avec les DIV, ce sont les différences d'affichage selon les navigateurs.

J'ai corrigé les bugs que tu m'as indiqués, mais j'en ai trouvé d'autres, notamment un petit souci que je qualifierai de "dégoulinage de <div>", particulièrement visible sous Firefox...

CODE

<HTML>

<!-- CODE SPIP DE BASE -->

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html dir="#LANG_DIR" lang="#LANG">
<head>
<title>[(#NOM_SITE_SPIP|textebrut)]</title>
[<meta name="description" content="(#DESCRIPTIF_SITE_SPIP|couper{150}|textebrut)" />]
<style type="text/css" title="mes_styles" media="all">
<!--

body
	{
	font-size: small;
	font-family: Verdana, Geneva, Arial, sans-serif;
	line-height: 180%;
	background-color: #F4F4F4;
	margin: 0
	}
	
#en_tete
	{position : relative;
		background-color: #F4F4F4;
	height: 130px
		}

#navigation 
	{
	color: white;
	font-family: Verdana;
	font-size: 9px;
	line-height: 16px;
	background-color: #82836D;
	text-align: center;
	letter-spacing: 6px;
	margin-bottom: 15px;
	height: 16px
	}

.nav_gauche
	{
	text-align: right;
	width: 20%;
	float: left
	}

.element-de-menu
	{
	color: #758642;
	margin-top: 20px;
	margin-left: 20px;
	border-top: 0 none;
	border-right: 0 none;
	border-bottom: 1px dotted #758642;
	border-left: 0 none
	}


.milieu
	{
	padding-left: 36px;
	width: 50%;
	float: left;
	}

.cellule_milieu

	{
		background: #E6E6FA;
		font-size: small;
		width: 100%;
	}
	
.cellule_milieu h1

	{background: #E6E6FA;
		font-weight: bold;
		font-size: 12px;
		width: 100%;
		background-color: #6b6c5a
			}

.col_milieu
{
 width: 50%;
margin: 1px solid #000;
 font-size: 12px;
 background-color: #FF1493;
 float: left;
 }
	
.nav_droite
	{
	font-size: 10px;
	font-style: italic;
	line-height: 20px;
	padding-left: 3%;
	width: 15%;
	float: left
	}

#pied-de-page
	{
	color: white;
	font-size: 9px;
	line-height: 16px;
	background-color: #6b6c5a;
	text-align: center;
	letter-spacing: 6px;
	height: 16px;
	clear: left
	}

 -->
</style>
</head>

<BODY>
<div id="en_tete"><img src="IMG/logo_mv.png" alt="Mondes Virtuels" height="124" width="413" border="0"></div>
<div id="navigation"><a href="#">ACCUEIL</a> | <a href="#">HISTOIRE</a>  | <a href="#">NATURE</a> | <a href="#">VISITEURS</a> |<a href="#"> CONTACT</a></div>
<div class="nav_gauche">
			<p>&nbsp;</p>
			<div class="element-de-menu">Actualités</DIV>
			<div class="element-de-menu">Séminaires</DIV>
			<div class="element-de-menu">Expériences</DIV>
			<div class="element-de-menu">Documentation</DIV>
			<div class="element-de-menu">Encyclopédie</DIV>
			<p>&nbsp;</p>
</DIV>

<div class="milieu">

<a href="#paragraphe">
Ceci est un lien vers le bas de ma page d'accueil
</a>

<Div class="cellule_milieu">
<H1>Actualités</H1>
<DIV CLASS="col_milieu"><STRONG>Actus du jour</STRONG><BR />Petit texte assez intéressant.</DIV>
<DIV CLASS="col_milieu"><STRONG>Actus du mois</STRONG><BR />QQSD QDQSDLK JKL lkjsfdjkl j lksflkjsdlkf sklfjklj.QQSD QDQSDLK JKL lkjqlksdj lkjklsfdjkl j lksdjflkjsdlkf sklfjklj.
</DIV>
</Div>
<BR />

<Div class="cellule_milieu">
<H1>Expériences</H1>

<DIV CLASS="col_milieu"><STRONG>Expérience du jour</STRONG><BR />Petit texte assez intéressant.</DIV>
<DIV CLASS="col_milieu"><STRONG>Expérience du mois</STRONG><BR />QQSD QDQSDLK JKL lkjsfdjkl j lksflkjsdlkf sklfjklj.QQSD QDQSDLK JKL lkjqlksdj lkjklsfdjkl j lksdjflkjsdlkf sklfjklj.
</DIV>
</Div>


</DIV>
<DIV CLASS="nav_droite">
<div class="element-de-menu">Derniers commentaires</DIV>
<div class="element-de-menu">Derniers documents</DIV>
</DIV>

<div id="pied-de-page">
			<a href="#">ACCUEIL</a> | <a href="#">HISTOIRE</a>  | <a href="#">NATURE</a> | <a href="#">VISITEURS</a> |<a href="#"> CONTACT</a>
						</div>
</BODY>

</HTML>

captain_torche

jeudi 27 mars 2008 à 16:59

Cela ressemble en tout point à ce que je disais en milieu de message

Ajoute un clear: left à ta classe .cellule_milieu

labarique

jeudi 27 mars 2008 à 17:12

Super, et merci encore.

J'avais compris que les float et les clear étaient des balises particulièrement clés, mais je ne les maîtrise pas encore très bien. Je vais me replonger un peu dans la littérature...

Juste une dernière chose : avec le clear:left, ça marche, mais mon div de gauche ("actualité du jour") est plus court(e) que mon div de droite ("actualité du mois"). Comme le background de ces cellules est rose, ça se voit.

Evidemment, je peux jouer sur les couleurs de background pour harmoniser tout ça. Mais imaginons que je veuille conserver ces cellules roses (si si, imaginons...) : comment faudrait-il procéder pour harmoniser les hauteurs des deux colonnes (qui sont toutes deux des div class="col_milieu") ??

captain_torche

jeudi 27 mars 2008 à 17:18

Ce n'est pas possible de le faire.
On peut toutefois tricher, en les mettant toutes les deux dans un div conteneur, et en appliquant la couleur de fond ou une image de fond à ce div.

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.