Aller au contenu

des DL et des DIV

Commmint

Par Commmint
dans (X)HTML et CSS

 Partager

Sujets conseillés

Commmint

Commmint

Posté
Posté

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:

Lien vers le commentaire
Partager sur d’autres sites
Commmint

Commmint

Posté
  • Auteur
Posté (modifié)

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é par Commmint
Lien vers le commentaire
Partager sur d’autres sites
Commmint

Commmint

Posté
  • Auteur
Posté

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:

Lien vers le commentaire
Partager sur d’autres sites
LaurentDenis

LaurentDenis

Posté
Posté

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>

Lien vers le commentaire
Partager sur d’autres sites
tictact

tictact

Posté
Posté (modifié)

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é par Monique
Lien vers le commentaire
Partager sur d’autres sites
Commmint

Commmint

Posté
  • Auteur
Posté

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:

Lien vers le commentaire
Partager sur d’autres sites
LaurentDenis

LaurentDenis

Posté
Posté
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.

Lien vers le commentaire
Partager sur d’autres sites
Commmint

Commmint

Posté
  • Auteur
Posté

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:

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...