[Css] Centrer une liste de définitions

Le
ooviwivoo
Bonjour,

La page http://www.maxdesign.com.au/presentation/definition/dl-image-galler=
y.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 l=
e
plan esthétique : je préfèrerai qu'elle soit centrée.

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

Merci pour vos conseils et votre aide.

Cordialement,

V.
Questions / Réponses high-tech
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses Page 1 / 2
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
romer
Le #22058001

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
Le #22057991
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
Le #22057981
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>Title here</dt>
<dd>Description here</dd>
</dl>
<dl>
<dt>Title here</dt>
<dd>Description here</dd>
</dl>
<dl class="une">
<dt>Title here</dt>
<dd>Description here</dd>
</dl>
<dl>
<dt>Title here</dt>
<dd>Description here</dd>
</dl>
<dl>
<dt>Title here</dt>
<dd>Description here</dd>
</dl>
<hr>
</div>
</body>
</html>
romer
Le #22057971
Thibault
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
Le #22057961
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
Le #22057951
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
Le #22057931
Bonsoir.

"" 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
Le #22057911
"Bernd" 1ium537.10z32801o6gamgN%

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
Le #22057901
Le 2/5/09 2:46 PM, jacques77 a écrit :

"Bernd" 1ium537.10z32801o6gamgN%

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
Le #22057891
On Wed, 4 Feb 2009 15:49:41 +0100, Bernd wrote:
Thibault
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.
Publicité
Poster une réponse
Anonyme