Discussion :

[Stessy]

Bonjour à tous et désolé pour le titre vague.

J'utilise cette partie de code pour afficher des liens <a> et la css ne réagit pas de la même panière selon que je sois sous ff ou IE

Code :

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

1
2
3
4
5
6
7
8
9
<div id="mainMenuDiv" style="position:relative;left:10px;width:950px;top:0px;height:35px;border:solid 1px white">
 
		<a href="proposal.jsp" style="width:180px;height:30px;border-style:outset;border-width:4px;background-color:#C3C3C3;color:#9F3638;border-color:#C3C3C3;font-weight:bold;font-family:Times New Roman;font-size:13pt;text-decoration:none;text-align:center">Registration</a>
		<a href="proposal.jsp" style="width:180px;height:30px;border-style:outset;border-width:4px;background-color:#9F3638;color:white;border-color:#9F3638;font-weight:bold;font-family:Times New Roman;font-size:13pt;text-decoration:none;text-align:center">Registration</a>
		<a href="proposal.jsp" style="width:180px;height:30px;border-style:outset;border-width:4px;background-color:#9F3638;color:white;border-color:#9F3638;font-weight:bold;font-family:Times New Roman;font-size:13pt;text-decoration:none;text-align:center">Registration</a>
		<a href="proposal.jsp" style="width:180px;height:30px;border-style:outset;border-width:4px;background-color:#9F3638;color:white;border-color:#9F3638;font-weight:bold;font-family:Times New Roman;font-size:13pt;text-decoration:none;text-align:center">Registration</a>
		<a href="proposal.jsp" style="width:180px;height:30px;border-style:outset;border-width:4px;background-color:#9F3638;color:white;border-color:#9F3638;font-weight:bold;font-family:Times New Roman;font-size:13pt;text-decoration:none;text-align:center">Registration</a>
 
</div>

Sous IE pas de problème, chaque <a> prends bien 180px en width mais sous FF il veut rien savoir et il utilise l'emplacement necessaire pour que la valeur entrée sois visible et rien de plus.

Si quelqu'un avait une petite idée derrière la tête pour résoudre ce problème cela m'arrangerait beaucoup.

D'avance merci pour vos réponses.

[MasterOfChakhaL]

Il faut que tu rajoutes un "display:block;" dans le style de tes balises a.

Certaines propriétés ne s'appliquent qu'à des éléments block et d'autres qu'aux éléments inline.

[Stessy]

En effet cela marche beaucoup mieux.

Un grand merci à toi.

Problème résolu

[Stessy]

J'ai parlé un peu trop vite.

Mon problème n'est pas résolu.

Il m'affiche tout sur une seule colonne mais 5 lignes.
Alors que je souhaite une seule ligne mais 5 colonnes.

Je m'en remet à vous car là je dois dire que je suis un peu perdu.

[MasterOfChakhaL]

Dans ce cas, si tu veux profiter du block pour la zone active et en même temps aligner tes éléments, il va falloir que tes blocs lien deviennent flottants.

float:left; dans le style de tes a

Or, le conteneur ne prend pas en compte les éléments flottants pour déterminer sa hauteur.

Il faut rajouter un élément qui va se placer sous les éléments flottant et dans le flux normal du conteneur.

Code :

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

1
2
3
4
5
6
7
8
 
.spacer {
  clear: both;
  height: 1px;
  line-height: 1px;
  overflow:hidden;
  visibility:hidden;
}

puis tu ajoutes

Code :

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

<div class="spacer">&nbsp;</div>

à la fin de ton conteneur.

La propriété importante est le "clear:both;" , les autres sont là pour rendre le truc le plus discret possible (1px de hauteur)

[Stessy]

je suis impressionné là.



Y a pas d'avance faudra que je me plonge en profondeur dans de la doc css.

Je pensais pas mal me débrouiller, mais je me rends compte que je ne suis nulle part.

Un grand à toi.