Webmaster Hub > des DL et des DIV

Version complète: sur le forum Webmaster Hub : des DL et des DIV

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

Commmint

mercredi 26 janvier 2005 à 15:12

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

CODE

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

CODE

<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 !!!

MarvinLeRouge

mercredi 26 janvier 2005 à 20:27

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

dimanche 30 janvier 2005 à 10:42

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

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 ?

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

PsyKoTiK

dimanche 30 janvier 2005 à 14:42

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

++

Commmint

dimanche 30 janvier 2005 à 15:11

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

Je vous donne le code actuel :

CODE

// 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

Merci de votre aide !!! :gueule:

LaurentDenis

dimanche 30 janvier 2005 à 15:29

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:

CODE

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

en HTML:

CODE

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

tictact

dimanche 30 janvier 2005 à 15:41

tu essaies quelque chose comme ca:

CODE

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

</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.

Commmint

dimanche 30 janvier 2005 à 15:54

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

LaurentDenis

dimanche 30 janvier 2005 à 16:16

CITATION(Commmint @ dimanche 30 janvier 2005, 15h54)

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

dimanche 30 janvier 2005 à 16:35

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

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.