Discussion :

[Anduriel]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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 ^^

[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

[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 )

[Anduriel]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Swoög]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

[Swoög]

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)

[Anduriel]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 = ?

[ilood]

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.

[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 )
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

[Swoög]

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 !

[ilood]

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.

[Swoög]

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

[ilood]

sans compter les espacements

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

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

[Swoög]

Pour centrer ?

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

[ilood]

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[Anduriel]

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