[CSS] Dimensions de liens

Version imprimable

Salut,

Sous IE j'ai fais des liens entourés d'un cadre et d'une dimension précise: 100*20.
Sous IE donc ça passe très bien les dimensions sont respectées.

Sous FF par contre, le cadres colle au texte (Voyez l'image).
Voila mon code:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 a.top { width: 100px; height: 19px; padding-top: 1px; display: inline-block; background-image: url(images/atop.jpg); color: gray; text-decoration: none; border: 1px solid #DBDEDF; text-align: center; font-family: "Verdana"; } a.top:hover { background-image: url(images/atophover.jpg); color: black; }
Comment réglé ce problème?
Merci

29/04/2006, 10h50
Swoög

Salut !

C'est parce que ton a est en display : inline-block...
Il me semble que FF n'accepte pas les width et height sur un élément inline ;)

essaie de passer la balise en block totalement ^^
29/04/2006, 11h41
Anduriel

Ah c'est vrai que cette fois les dimensions sont respectées mais si je mets plusieurs liens à la suite le prochain revient à chaque fois à la ligne (en fait c'est pour ça que j'avais mis inline).
Donc comment faire pour les laisser à la suite?
Merci
29/04/2006, 11h44
Swoög

pour les laisser à la suite, tu pourrais (par exemple) les passer en float : left ou float : right... ;)

Bon, par contre, il est vrai que ça pourrait entrainer des comportements étranges, mais normalement, ça devrait être très limité (tout dépend de comment sont organisés les éléments de la page, je n'ai que très rarement eu des problèmes avec cette méthode ;) )

Super !
Enfin j'arrive avec ça à un dernier problème: mes liens sont bien positionnés mais évidemment àa gauche de ma ligne. Moi je voudrai qu'ils soient centrés (oui je suis dur...). L'aligne="center" ne fonctionne pas à cause du float, même en les mettant dans un div.
Voila la partie du code HTML:
Code:

1 2 3 4 5 6 7 <td align="center" bgcolor="white" class="menu"> <a href="#" class="top">Home</a> <a href="#" class="top">Portail</a> <a href="#" class="top">Download</a> <a href="#" class="top">Contact</a> <a href="#" class="top">Liens</a> </td>
Comment faire?
Merci

heu... pas testé, mais essaie ceci :

Code:

1
2
3
4
5
6
7
<td align="center" bgcolor="white" class="menu"><div style="margin-right : auto; margin-left : auto;">
            <a href="#" class="top">Home</a>
            <a href="#" class="top">Portail</a>
            <a href="#" class="top">Download</a>
            <a href="#" class="top">Contact</a>
            <a href="#" class="top">Liens</a>
        </div></td>

Au fait : mélanger mise en page/forme tabulaire et CSS, c'est pas tip top ;)

29/04/2006, 13h30
ilood

Salut

Ou laisser les lien en in-line et utiliser les padding.
Mais tes boîtes n'auront jamais la même taille. Elles varieront en fonction du contenu.

De toute façon il faut bien penser que la taille des caractères n'est pas la même chez tous les utilisateurs. En fixant la taille de tes boites en pixels le contenu risque de sortir de celles-ci.
29/04/2006, 13h33
Swoög

Citation:

Envoyé par ilood

De toute façon il faut bien penser que la taille des caractères n'est pas la même chez tous les utilisateurs. En fixant la taille de tes boites en pixels le contenu risque de sortir de celles-ci.

Saut si la taille de la police est elle-même spécifiée en px...

ensuite, c'est le débat "mise en page/forme aboslue ou relative à la configuration de l'utilisateur ?"...

min-width serait la solution... mais IE ne le supporte pas (encore)

Citation:
Envoyé par Swoög
heu... pas testé, mais essaie ceci :
Code:

1 2 3 4 5 6 7 <td align="center" bgcolor="white" class="menu"><div style="margin-right : auto; margin-left : auto;"> <a href="#" class="top">Home</a> <a href="#" class="top">Portail</a> <a href="#" class="top">Download</a> <a href="#" class="top">Contact</a> <a href="#" class="top">Liens</a> </div></td>
Au fait : mélanger mise en page/forme tabulaire et CSS, c'est pas tip top ;)
La le div est bien centré, mais étant donné que mes éléments <a> sont float il ne "font pas partie" du div, ils ne sont pas dedans. Donc ça ne fonctionne pas :(
Euh sinon qu'entends tu par "mélanger mise en page/forme tabulaire et CSS, c'est pas tip top"? HTML + CSS = :( ?

29/04/2006, 13h37
ilood

Citation:

Envoyé par Swoög

Saut si la taille de la police est elle-même spécifiée en px...

Ceci n'est valable que sur IE. Sous Firefox même une taille en px peut-être modfiée.
29/04/2006, 13h38
Swoög

je vois dans ton code une balise td donc tu procède par une mise en page tabulaire (à l'aide de tableaux) c'est UN style de mise en page (je m'apesentirais pas sur le sujet, y'a déjà assez de trolls là-dessus :mouarf: ;))
A côté de ça, tu veux utiliser du CSS... ce qui risque de provoquer quelques collisions entre les deux styles de mise en page...

voilà ce que je veux dire par "Mise en Forme Tabulaire et CSS ne font pas bons ménage" ;)

sinon, pour ce qui est de ton problème de centrage...

comme tu as l'air d'avoir spécifier un design fixe (avec positionnement en pixels)...

autant spécifier un margin-left pour le premier élément a de ta liste, ainsi il sera décalé vers la gauche, et tout les autres le seront aussi, donnant l'impression qu'ils sont centrés ;)
29/04/2006, 13h40
Swoög

Citation:

Envoyé par ilood

Ceci n'est valable que sur IE. Sous Firefox même une taille en px peut-être modfiée.

Dans ce cas, il s'agit d'une configuration inhabituelle, et on peut modifier tout le design de tous les sites avec... donc à ce niveau là... tenir ou non compte du design du site sur le quel on est, je dirais qu'on a déjà choisi d'aller à l'encontre des choix du webmaster puisqu'on impose les siens !
29/04/2006, 13h44
ilood

Citation:

Envoyé par Anduriel

La le div est bien centré, mais étant donné que mes éléments <a> sont float il ne "font pas partie" du div, ils ne sont pas dedans. Donc ça ne fonctionne pas :(

Le début de solution de Swöog est bon. Le soucis c'est qu'il essaie de center un contenu qui fait une taille de 100%.
A mon avis tu devrais donner une taille à ce div.
Si on se base sur les valeurs de départ, chaque item doit faire 100px, tu as 5 items. Il faut alors que ton div fasse 500px.
29/04/2006, 13h45
Swoög

Citation:

Envoyé par ilood

Le début de solution d'anduriel est bon. Le soucis c'est qu'il essaie de center un contenu qui fait une taille de 100%.
A mon avis tu devrais donner une taille à ce div.
Si on se base sur les valeurs de départ, chaque item doit faire 100px, tu as 5 items. Il faut alors que ton div fasse 500px.

sans compter les espacements ;)

à ce niveau, autant filer un margin-left au premier a de la série ^^
29/04/2006, 13h49
ilood

Citation:

Envoyé par Swoög

sans compter les espacements ;)

Ca se change ça. Tu définis tes margin et tes padding et tu fais ton petit calcul ;)

Citation:

Envoyé par Swoög

à ce niveau, autant filer un margin-left au premier a de la série ^^

A mon avis avec cette méthode il est très difficile de trouver uen bonne valeur pour centrer.
29/04/2006, 13h51
Swoög

Citation:

Envoyé par ilood

Pour centrer ? 8O

au moins en donner l'impression... si le td est de taille fixe (comme je le soupçonne) il n'y aura pas de changement, et ça évite un div supplémentaire...

J'ai l'impression que nous avons perdu notre ami Anduriel

Voilà l'idée que j'avais du menu :

Code:

1
2
3
4
5
6
7
a.top {
	display: block;
	float: left;
	margin: 0px;
	padding: 0px;
	width: 100px;
}

Code:

1
2
3
4
5
6
7
8
9
<tr>
    <td><div style="width: 500px;margin-right : auto; margin-left : auto;">
            <a href="#" class="top">Home</a>
            <a href="#" class="top">Portail</a>
            <a href="#" class="top">Download</a>
            <a href="#" class="top">Contact</a>
            <a href="#" class="top">Liens</a>
        </div></td>
  </tr>

29/04/2006, 14h11
Anduriel

Tabulaire... tableau, j'aurai peut être dû y pensé héhé :roll:
Merci à vous finalement le centre est tout bon :)

Fuseau horaire GMT +2. Il est actuellement 23h40.