[Css] Centrer une liste de définitions

romer

04/02/2009 à 12:32

wrote:

La page
http://www.maxdesign.com.au/presentation/definition/dl-image-gallery.htm
présente une galerie d'images présentée au moyen d'une liste de
définitions. J'aimerai intégrer cette technique à mon petit site.

Seulement, je ne parviens pas à trouver la solution pour centrer une
image, si elle est oprheline.

As-tu aussi centré le <dt> ? je pense que oui et ça ne doit pas marcher.
J'ai eu aussi ce problème pour un cas similaire mais sans image et après
avoir galéré longtemps à cause d'IE6 (le seul en cause), j'ai opté à mon
grand dam pour un tableau dans lequel j'ai mis 3 colonnes et ça ne bouge
pas !

Mais je suis preneur aussi si une solution existe pour tous les
navigateurs. -- A+

Romer

Thibault

04/02/2009 à 13:30

On Wed, 4 Feb 2009 02:42:00 -0800 (PST), wrote:

Bonjour,

Bonjour,

La page http://www.maxdesign.com.au/presentation/definition/dl-image-gallery.htm
présente une galerie d'images présentée au moyen d'une liste de
définitions. J'aimerai intégrer cette technique à mon petit site.

Seulement, je ne parviens pas à trouver la solution pour centrer une
image, si elle est oprheline.

Je m'explique :

Sur la première ligne, trois images s'affichent. Si je veux en
afficher une quatrième, elle est naturellement repoussée sur la ligne
suivante par manque de place. Or, si cette quatrième image est seule,
elle est alignée à gauche, ce qui ne me semble pas très heureux sur le
plan esthétique : je préfèrerai qu'elle soit centrée.

En fait c'est liée à l'approche que tu as choisie : faire flotter les
images à gauche c'est donc tout à fait normal et « logique ». La
solution passera à mon avis par la motorisation (si c'est du statique
rien ne t'empêche de modifier à la main le dernier <dl>).

Il faudra que tu détectes le cas précis où en fin de ligne il ne te
reste qu'une image. Dans ce cas, annule la « flottaison » (avec un
conteneur style div avec clear: both; par exemple et en fermant le
conteneur des précédents <dl>), et place le dernier <dl> *sans* float:
left; mais avec des marges gauche et droites à "auto". Ton dernier <dl>
sera ainsi centré dans son conteneur.

Je ne vois pas d'approche simple en CSS sans toucher au markup ni sans
motorisation.

SAM

04/02/2009 à 13:48

Le 2/4/09 11:42 AM, a écrit :

Bonjour,

La page http://www.maxdesign.com.au/presentation/definition/dl-image-gallery.htm
présente une galerie d'images présentée au moyen d'une liste de
définitions. J'aimerai intégrer cette technique à mon petit site.

Seulement, je ne parviens pas à trouver la solution pour centrer une
image, si elle est oprheline.

Je m'explique :

Sur la première ligne, trois images s'affichent.

et c'est quoi comme balise la 1ère ligne ?

Si je veux en
afficher une quatrième, elle est naturellement repoussée sur la ligne
suivante par manque de place. Or, si cette quatrième image est seule,
elle est alignée à gauche, ce qui ne me semble pas très heureux sur le
plan esthétique : je préfèrerai qu'elle soit centrée.

Ça m'étonnerait que ce soit possible ?!

Si le DL contenant est en float il n'est pas en inline ...

Comment faire ? Voilà deux heures que je cherche en vain.

La seule chose à faire est de sortir l'orpheline du truc-bazar en lui
collant une classe spécifique.

Merci pour vos conseils et votre aide.

Voici ma "rustine" (testée avec IE6 et Fx3) :
... mais il faut savoir quelle est celle qui est tte seule sur une ligne :-/

<html>
<head>
<style type="text/css">
#gallery {
width:300px;
border: 1px solid;
margin: auto;
}
#gallery dl
{
border: 1px solid #000;
background-color: #ddd;
text-align: center;
padding: 10px;
width: 102px;
float: left;
margin: 10px;
}

#gallery dl.une
{
float: none;
clear: left;
margin: auto;
}

#gallery dt { font-weight: bold; }

#gallery dt img
{
border: 1px solid #000;
width: 100px;
height: 100px;
}
#gallery dd
{
margin: 0;
padding: 0;
}
#gallery hr
{
clear: left;
visibility: hidden;
}
</style>
</head>
<body>
<h1>ma galerie</h1>
<div id="gallery">
<dl>
<dt><img src="asm1.gif" alt=""></dt>
<dt>Title here</dt>
<dd>Description here</dd>
</dl>
<dl>
<dt><img src="asm1.gif" alt=""></dt>
<dt>Title here</dt>
<dd>Description here</dd>
</dl>
<dl class="une">
<dt><img src="asm1.gif" alt=""></dt>
<dt>Title here</dt>
<dd>Description here</dd>
</dl>
<dl>
<dt><img src="asm1.gif" alt=""></dt>
<dt>Title here</dt>
<dd>Description here</dd>
</dl>
<dl>
<dt><img src="asm1.gif" alt=""></dt>
<dt>Title here</dt>
<dd>Description here</dd>
</dl>
<hr>
</div>
</body>
</html>

Le 2/4/09 11:42 AM, ooviwivoo@gmail.com a écrit :

Bonjour,

La page http://www.maxdesign.com.au/presentation/definition/dl-image-gallery.htm
présente une galerie d'images présentée au moyen d'une liste de
définitions. J'aimerai intégrer cette technique à mon petit site.

Seulement, je ne parviens pas à trouver la solution pour centrer une
image, si elle est oprheline.

Je m'explique :

Sur la première ligne, trois images s'affichent.

et c'est quoi comme balise la 1ère ligne ?

Si je veux en
afficher une quatrième, elle est naturellement repoussée sur la ligne
suivante par manque de place. Or, si cette quatrième image est seule,
elle est alignée à gauche, ce qui ne me semble pas très heureux sur le
plan esthétique : je préfèrerai qu'elle soit centrée.

Ça m'étonnerait que ce soit possible ?!

Si le DL contenant est en float il n'est pas en inline ...

Comment faire ? Voilà deux heures que je cherche en vain.

La seule chose à faire est de sortir l'orpheline du truc-bazar en lui
collant une classe spécifique.

Merci pour vos conseils et votre aide.

Voici ma "rustine" (testée avec IE6 et Fx3) :
... mais il faut savoir quelle est celle qui est tte seule sur une ligne :-/

<html>
<head>
<style type="text/css">
#gallery {
width:300px;
border: 1px solid;
margin: auto;
}
#gallery dl
{
border: 1px solid #000;
background-color: #ddd;
text-align: center;
padding: 10px;
width: 102px;
float: left;
margin: 10px;
}

#gallery dl.une
{
float: none;
clear: left;
margin: auto;
}

#gallery dt { font-weight: bold; }

#gallery dt img
{
border: 1px solid #000;
width: 100px;
height: 100px;
}
#gallery dd
{
margin: 0;
padding: 0;
}
#gallery hr
{
clear: left;
visibility: hidden;
}
</style>
</head>
<body>
<h1>ma galerie</h1>
<div id="gallery">
<dl>
<dt><img src="asm1.gif" alt=""></dt>
<dt>Title here</dt>
<dd>Description here</dd>
</dl>
<dl>
<dt><img src="asm1.gif" alt=""></dt>
<dt>Title here</dt>
<dd>Description here</dd>
</dl>
<dl class="une">
<dt><img src="asm1.gif" alt=""></dt>
<dt>Title here</dt>
<dd>Description here</dd>
</dl>
<dl>
<dt><img src="asm1.gif" alt=""></dt>
<dt>Title here</dt>
<dd>Description here</dd>
</dl>
<dl>
<dt><img src="asm1.gif" alt=""></dt>
<dt>Title here</dt>
<dd>Description here</dd>
</dl>
<hr>
</div>
</body>
</html>

Vous avez filtré cet utilisateur ! Consultez son message

Le 2/4/09 11:42 AM, a écrit :

Bonjour,

La page http://www.maxdesign.com.au/presentation/definition/dl-image-gallery.htm
présente une galerie d'images présentée au moyen d'une liste de
définitions. J'aimerai intégrer cette technique à mon petit site.

Seulement, je ne parviens pas à trouver la solution pour centrer une
image, si elle est oprheline.

Je m'explique :

Sur la première ligne, trois images s'affichent.

et c'est quoi comme balise la 1ère ligne ?

Si je veux en
afficher une quatrième, elle est naturellement repoussée sur la ligne
suivante par manque de place. Or, si cette quatrième image est seule,
elle est alignée à gauche, ce qui ne me semble pas très heureux sur le
plan esthétique : je préfèrerai qu'elle soit centrée.

Ça m'étonnerait que ce soit possible ?!

Si le DL contenant est en float il n'est pas en inline ...

Comment faire ? Voilà deux heures que je cherche en vain.

La seule chose à faire est de sortir l'orpheline du truc-bazar en lui
collant une classe spécifique.

Merci pour vos conseils et votre aide.

Voici ma "rustine" (testée avec IE6 et Fx3) :
... mais il faut savoir quelle est celle qui est tte seule sur une ligne :-/

<html>
<head>
<style type="text/css">
#gallery {
width:300px;
border: 1px solid;
margin: auto;
}
#gallery dl
{
border: 1px solid #000;
background-color: #ddd;
text-align: center;
padding: 10px;
width: 102px;
float: left;
margin: 10px;
}

#gallery dl.une
{
float: none;
clear: left;
margin: auto;
}

#gallery dt { font-weight: bold; }

#gallery dt img
{
border: 1px solid #000;
width: 100px;
height: 100px;
}
#gallery dd
{
margin: 0;
padding: 0;
}
#gallery hr
{
clear: left;
visibility: hidden;
}
</style>
</head>
<body>
<h1>ma galerie</h1>
<div id="gallery">
<dl>
<dt><img src="asm1.gif" alt=""></dt>
<dt>Title here</dt>
<dd>Description here</dd>
</dl>
<dl>
<dt><img src="asm1.gif" alt=""></dt>
<dt>Title here</dt>
<dd>Description here</dd>
</dl>
<dl class="une">
<dt><img src="asm1.gif" alt=""></dt>
<dt>Title here</dt>
<dd>Description here</dd>
</dl>
<dl>
<dt><img src="asm1.gif" alt=""></dt>
<dt>Title here</dt>
<dd>Description here</dd>
</dl>
<dl>
<dt><img src="asm1.gif" alt=""></dt>
<dt>Title here</dt>
<dd>Description here</dd>
</dl>
<hr>
</div>
</body>
</html>

romer

04/02/2009 à 15:49

Thibault <tj+ wrote:

Il faudra que tu détectes le cas précis où en fin de ligne il ne te
reste qu'une image. Dans ce cas, annule la « flottaison » (avec un
conteneur style div avec clear: both; par exemple et en fermant le
conteneur des précédents <dl>), et place le dernier <dl> *sans* float:
left; mais avec des marges gauche et droites à "auto". Ton dernier <dl>
sera ainsi centré dans son conteneur.

Pour des images c'est peut-être jouable mais si ce sont par ex. 2 blocs
de texte mis côte à côte , ça ne l'est plus dès l'instant où
l'utilisateur agrandit son texte à l'écran - tout se désorganise.

Quant au clear, je l'ai fait mais comme il s'appliquait à un float dans
un autre float (un peu tordu, c'est vrai), le clear se réglait sur le
float père et ça fichait encore plus la pagaïlle !

Je ne vois pas d'approche simple en CSS sans toucher au markup ni sans
motorisation.

Qu'appelle t-on la "motorisation" ?
--
A+

Romer

ooviwivoo

04/02/2009 à 15:59

Bonjour,

Merci pour vos messages...

Une motorisation comme compter les images par exemple en Php,
Thibault ? ? Si nombre d'images est multiple de 3, afficher un premier
style... Sinon, compter les images, s'il en reste 2 appliquer un
deuxième style, s'il en reste 1 appliquer un troisième style, c'est à
peu près ça ?

Hou là, c'est de donner un bien grand mal...

... Même si en parlant de "rustine", Sam, je ne sais pas combien il y
aura d'images à afficher à l'avance !

Merci.

V.

SAM

04/02/2009 à 19:42

Le 2/4/09 3:59 PM, a écrit :

Bonjour,

Merci pour vos messages...

Une motorisation comme compter les images par exemple en Php,
Thibault ? ? Si nombre d'images est multiple de 3, afficher un premier
style...

à ce compte on n'a qu'à les grouper par 3 directement
(dans un div ou autre balise kivabien (LI ?) )

Sinon, compter les images, s'il en reste 2 appliquer un
deuxième style, s'il en reste 1 appliquer un troisième style, c'est à
peu près ça ?

Hou là, c'est de donner un bien grand mal...

C'est pas nous qui avons posé le blème ;-)

... Même si en parlant de "rustine", Sam, je ne sais pas combien il y
aura d'images à afficher à l'avance !

Ben ... pour un affichage d'images rangées par 2 sur une ligne :

<script type="text/javascript">
window.onload = function() {
var g = document.getElementById('gallery');
g = g.getElementsByTagName('DL');
if(g.length %2 >0)
g[g.length-1].className = 'une';
}
</script>

Par exemple.

Ou pour 3 images /ligne :

window.onload = function() {
var g = document.getElementById('gallery');
g = g.getElementsByTagName('DL');
var n = g.length;
if(n%3 != 0) {
if(n%2 == 0) g[n-1].className = 'une';
else
g[n-2].className = g[n-1].className = 'deux';
}
}

--
sm

Patrick 'Zener' Brunet

04/02/2009 à 22:29

Bonsoir.

"" a écrit dans le message
de news

La page
http://www.maxdesign.com.au/presentation/definition/dl-image-gallery.htm
présente une galerie d'images présentée au moyen d'une liste de
définitions. J'aimerai intégrer cette technique à mon petit site.

Seulement, je ne parviens pas à trouver la solution pour centrer une
image, si elle est oprheline.

Je m'explique :

Sur la première ligne, trois images s'affichent. Si je veux en
afficher une quatrième, elle est naturellement repoussée sur la
ligne
suivante par manque de place. Or, si cette quatrième image est
seule,
elle est alignée à gauche, ce qui ne me semble pas très heureux sur
le
plan esthétique : je préfèrerai qu'elle soit centrée.

En mettant {display: inline-block;} sur les DL et tous les DL
dans un DIV avec {text-align: center;} peut-être.

On dit du mal de inline-block, mais avec quelques précautions, c'est pas
mal.

On peut aussi grouper les DL deux par deux dans des DIV, ce qui aura pour
effet de forcer le point de césure lorsqu'elle se produit.

--
Cordialement.

* Patrick BRUNET www.ipzb.fr www.ipzb-pro.com
* E-mail: lien sur http://zener131.eu/ContactMe

jacques77

05/02/2009 à 14:46

"Bernd" a écrit dans le message de news:
1ium537.10z32801o6gamgN%

wrote:

La page
http://www.maxdesign.com.au/presentation/definition/dl-image-gallery.htm
présente une galerie d'images présentée au moyen d'une liste de
définitions. J'aimerai intégrer cette technique à mon petit site.

Seulement, je ne parviens pas à trouver la solution pour centrer une
image, si elle est oprheline.

As-tu aussi centré le <dt> ? je pense que oui et ça ne doit pas marcher.
J'ai eu aussi ce problème pour un cas similaire mais sans image et après
avoir galéré longtemps à cause d'IE6 (le seul en cause), j'ai opté à mon
grand dam pour un tableau dans lequel j'ai mis 3 colonnes et ça ne bouge
pas !

Mais je suis preneur aussi si une solution existe pour tous les
navigateurs. -- A+

Romer

Bonjour,
Il n'y a rien de "diabolique" à utiliser un tableau pour ce type d'information ;
il est tout à fait possible de comparer chaque vignette comme un élément de la
galerie d'images et de ce fait de la considérer comme une donnée "tabulaire",
donc à positionner dans un tableau.

SAM

05/02/2009 à 15:13

Le 2/5/09 2:46 PM, jacques77 a écrit :

"Bernd" a écrit dans le message de news:
1ium537.10z32801o6gamgN%
wrote:

La page
http://www.maxdesign.com.au/presentation/definition/dl-image-gallery.htm
présente une galerie d'images présentée au moyen d'une liste de
définitions. J'aimerai intégrer cette technique à mon petit site.

Seulement, je ne parviens pas à trouver la solution pour centrer une
image, si elle est oprheline.

As-tu aussi centré le <dt> ? je pense que oui et ça ne doit pas marcher.
J'ai eu aussi ce problème pour un cas similaire mais sans image et après
avoir galéré longtemps à cause d'IE6 (le seul en cause), j'ai opté à mon
grand dam pour un tableau dans lequel j'ai mis 3 colonnes et ça ne bouge
pas !

Mais je suis preneur aussi si une solution existe pour tous les
navigateurs. -- A+

Romer

Bonjour,
Il n'y a rien de "diabolique" à utiliser un tableau pour ce type
d'information ; il est tout à fait possible de comparer chaque vignette
comme un élément de la galerie d'images et de ce fait de la considérer
comme une donnée "tabulaire", donc à positionner dans un tableau.

Je ne comprends pas l'avantage du table (3 cellules par rangée à ce que
j'ai compris), ou même d'une liste si le côté sémantique titille, pour
centrer l'esseulée.

Il faudra bien là aussi user d'un moteur côté serveur pour disposer
l'esseulée dans la cellule (ou le LI) du milieu, non ?

Il n'est donc pas pire de garder la méthode flottante avec class
spécifique pour la trombine restée seule sur une "ligne".
AMHA

--
sm

Thibault

05/02/2009 à 16:42

On Wed, 4 Feb 2009 15:49:41 +0100, Bernd wrote:

Thibault <tj+ wrote:

Il faudra que tu détectes le cas précis où en fin de ligne il ne te
reste qu'une image. Dans ce cas, annule la « flottaison » (avec un
conteneur style div avec clear: both; par exemple et en fermant le
conteneur des précédents <dl>), et place le dernier <dl> *sans* float:
left; mais avec des marges gauche et droites à "auto". Ton dernier <dl>
sera ainsi centré dans son conteneur.

Pour des images c'est peut-être jouable mais si ce sont par ex. 2 blocs
de texte mis côte à côte , ça ne l'est plus dès l'instant où
l'utilisateur agrandit son texte à l'écran - tout se désorganise.

Pour les images je sais pas je n'en ai pas parlé :-)

Pour les deux blocs de texte je n'ai pas trop compris où tu veux en
venir, par contre ce qui est sûr c'est que même si l'utilisateur ne
touche pas à sa taille de texte, on ne peut jamais être sûr de la place
occupé par un texte et cela est *toujours* vrai.

Malheureusement beaucoup de développeurs ne gardent pas cet aspect en
tête (ou le néglige) et on voit trop de site contenant des éléments
fixées en hauteur (height au lieu de min-height) et le texte dégueule ou
est tronqué.

Quant au clear, je l'ai fait mais comme il s'appliquait à un float dans
un autre float (un peu tordu, c'est vrai), le clear se réglait sur le
float père et ça fichait encore plus la pagaïlle !

Je ne vois pas d'approche simple en CSS sans toucher au markup ni sans
motorisation.

Qu'appelle t-on la "motorisation" ?

Tout ce qui permet de faire du pré-traitement côté serveur, c'est à
dire du PHP, du perl du ruby... Tout ce qui est motorisé n'est pas
statique :-) Je ne sais pas si le terme est beaucoup employé mais dans
le milieu je l'entend souvent.

[Css] Centrer une liste de définitions

10 réponses

Veuillez sélectionner un problème