des DL et des DIV

Commmint · 26 Janvier 2005

Bonjour,

j'utilise des DL pour construire une mosaique de vignettes.

Comment spécifier le nombre maximum de colonnes souhaitées de manière "classe"

J'utilise une balise DIV spécifiant une largeur maximum pour étaler chaque DL mais j'aimerai quelque chose de plus dynamique, genre quand la largeur des DL change, la grille reste fixée en 3 colonnes

un exemple ici

dl.livredor {
	font-family: tahoma;
	font-size: 11px;
	color: #666666;
	background-color: #eeeeee;
	width: 250px;
	padding: 7px 10px 10px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-top-color: #BB1100;
	border-right-color: #BB1100;
	border-bottom-color: #BB1100;
	border-left-color: #BB1100;
	float: left;
	clear: right;
	margin: 5px;
}
.livredor dt {
	font-family: Tahoma;
	font-size: 11px;
	color: #CC1100;
}
.livredor dd {
	font-family: Tahoma;
	font-size: 11px;
	color: #888888;
}
.mosaique {
	width: 600px;
	position: relative;
	height: 600px;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
}

et le HTML

<div class="mosaique">

<dl class="livredor">
<dt>dans le DT1</dt>
<dd>Le contenu du DD qui est limité en largeur par la classe du DL et c'est tant mieux d'ailleurs...<BR></dd>
<dd>un DD en plus</dd>
</dl>

<dl class="livredor">
<dt>dans le DT1</dt>
<dd>Le contenu du DD qui est limité en largeur par la classe du DL et c'est tant mieux d'ailleurs...<BR></dd>
<dd>un DD en plus</dd>
</dl>

<dl class="livredor">
<dt>dans le DT1</dt>
<dd>Le contenu du DD qui est limité en largeur par la classe du DL et c'est tant mieux d'ailleurs...<BR></dd>
<dd>un DD en plus</dd>
</dl>

</div>

dans cet exemple, vous l'aurez remarqué, le DIV ne permet l'affichage que de 2 DL.

si quelqu'un a une idée je suis preneur, je débute en CSS !!!

merci d'avance !!! :lol:

MarvinLeRouge · 26 Janvier 2005

Salut,

Sans analyse précise de ton code, je dirais qu'il faut que chaque dl occupe au total (width + padding + border + margin) 33% de son conteneur (donc ton div), et soit en float : left.

Commmint · 30 Janvier 2005

J'ai alors relu mon topic et je trouve que c'est incompréhensible :fou: :fou:

Je pense pas qu'il y ait de solution pour ça par contre, autre problème :

J'ai deux DIV sur la même ligne, celui de gauche spécifié en 200 pixels de large dans l'attribut BOX, je voudrais que le DIV de droite occupe automatiquement la largeur restante jusqu'au bout de la page.

Est-ce possible ? :huh:

J'essaie de me mettre gentiment au Tableless...

Modifié 30 Janvier 2005 par Commmint

PsyKoTiK · 30 Janvier 2005

je pense que tu devrais spécifier un min-width , puis mettre un width en % et comme ca pour les deux blocs

++

Commmint · 30 Janvier 2005

honte sur moi et ma famille, je n'y arrive pas. C'est peut être impossible.

Je vous donne le code actuel :

// les CSS
.cmenu {
	font-family: Tahoma;
	font-size: 11px;
	line-height: 15px;
	color: #999999;
	background-color: #eeeeee;
	padding: 10px;
	float: left;
	clear: right;
	margin-right: 1px;
}
// le HTML
<div class="cmenu" style="width: 200px;">le menu ici</div>
<div class="cmenu" style="width: 400px;">Le contenu ici</div>

je reprécise mon objectif: que le DIV de droite aille jusqu'au bout de la fenêtre et soit extensible. Dans la config actuelle, si je mets un pourcentage, le DIV passe au dessous de premier :fou:

Merci de votre aide !!! :gueule:

LaurentDenis · 30 Janvier 2005

L'idée, si tu utilises les flottants, c'est :

- de ne faire flotter que le premier élément, doté d'une largeur fixe

- de laisser le 2e élément en flux remplir l'espace disponible à côté du flottant.

En CSS:

.cmenu {
color: #999999;
background-color: #eeeeee;
padding: 10px;
float: left;
width: 200px;
}
.contenu {
border: 1px solid;
margin-left: 220px;
}

en HTML:

 
<div class="cmenu">le menu ici</div>
<div class="contenu">Le contenu ici</div>

tictact · 30 Janvier 2005

tu essaies quelque chose comme ca:

<head>
<style type="text/css">
<!--

html,body {
height: 100%;
width: 100%;
overflow: auto;
}
.cmenu {
font-family: Tahoma;
font-size: 11px;
line-height: 15px;
color: #999999;
background-color: #eeeeee;
padding: 10px;
float: left;
clear: right;
margin-right: 10px;
}

.cmenu2 {
font-family: Tahoma;
font-size: 11px;
line-height: 15px;
color: #999999;
background-color: #eeeeee;
padding: 10px;
height: 100%;
margin-left: 10px;
overflow: auto;
}
-->
</style></head>
<body>
<div class="cmenu">le menu ici</div>
<div class="cmenu2" >Le contenu ici</div>

le contenu occupe l'espace droit, et toute la hauteur de la page.

Modifié 30 Janvier 2005 par Monique

Commmint · 30 Janvier 2005

merci à tous les deux, je vais essayer...

mais Laurentdenis, ton code me parait bien mais il n'existe plus de dépendance entre la largeur du premier DIV et le margin-left du deuxième. J'aurai aimé un truc moins "en dur". Je garde le truc quand meme, merci :lol:

LaurentDenis · 30 Janvier 2005

il n'existe plus de dépendance entre la largeur du premier DIV et le margin-left du deuxième.

margin-left = width + padding latéraux (200+10+10)

Cette largeur et cette marge sont nécessaires : un élément flottant non remplacé doit avoir une largeur explicite. Le code sans largeur de tictact... fait flop dans Opera, par exemple.

Accessoirement, voir Initiation au positionnement CSS : 2.position float pour les bases sur les flottants.

Commmint · 30 Janvier 2005

oui le code de tictact ne permet pas de gérer correctement le contenu et les marges du second DIV...

Merci Laurentdenis pour ce lien génial j'ai tout pigé à la première lecture... :lol:

Connexion

des DL et des DIV

Sujets conseillés

Commmint

MarvinLeRouge

Commmint

PsyKoTiK

Commmint

LaurentDenis

tictact

Commmint

LaurentDenis

Commmint

Veuillez vous connecter pour commenter

Parcourir

Activité