[Résolu] Liens horizontaux

Bonjour, un petit souci d'alignement : j'ai composé normalement une sui te de liens en l'horizontal :
Item 1 | Item 2 | etc.

Et pour avoir un trait au-dessus et en-dessous au survol des liens j'ai transformé tout ça en block (display: block;), tout baigne pour l'effet, mais maintenant tout est à la verticale, comment faire pour que mes liens reviennent à l'horizontal ?

Le code CSS :

.bas {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 11px;
	font-weight: normal;
	color: #000000;
}
.bas a {
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #FFFFFF;
	border-bottom-color: #FFFFFF;
	text-align: center;
	display: block;
	width: 80px;
}
.bas a:hover {
	color: #990000;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #990000;
	border-bottom-color: #990000;
	font-weight: normal;
	text-align: center;
	width: 80px;
}

Le code : HTML :

<p class="bas"><a href="#">Item 1</a> | <a href="#">Item 1</a> | <a href="#">Item 1</a> | <a href="#">Item 1</a> | <a href="#">Item 1</a> | <a href="#">Item 1</a></p> 

Merci.
Modifié par renato (02 Mar 2007 - 20:47)

Bonjour,
Tu as également la possibilité d'utiliser cette instruction qui te donnera le même résultat :

text-decoration:underline overline;

Ah, et une autre petite chose :
Tout menu n'est qu'une suite de lien, une énumération, une liste quoi ...

Pourquoi donc ne pas utiliser la baliser appropriée pour mettre en forme ton menu ?
As-tu jeté un œil à la galerie de menus ?

Cygnus a écrit :
Pourquoi donc ne pas utiliser la baliser appropriée pour mettre en forme ton menu ?

Mauvaise pioche

De nombreux contenus peuvent être syntaxiquement une liste, sans relever pour autant d'une structure de liste.

Cas type, la phase je compte: 1, 2, 3....

L'ajout d'une structure <ul> à ces menus horizontaux destinés à être gérés en liens de type inline est inutile, et alourdit considérablement la gestion des styles.
Modifié par Laurent Denis (28 Feb 2007 - 10:56)

Laurent Denis a écrit :
Mauvaise pioche

De nombreux contenus peuvent être syntaxiquement une liste, sans relever pour autant d'une structure de liste.

Cas type, la phase je compte: 1, 2, 3....

L'ajout d'une structure <ul> à ces menus horizontaux destinés à être gérés en liens de type inline est inutile, et alourdit considérablement la gestion des styles.

Euhm...
Cela signifierait-il donc que l'on ne choisit pas forcément une balise en fonction de son contenu ?

Dans l'exemple : je compte: 1, 2, 3..., je n'aurais pas utilisé de liste pour la mise en forme du contenu, car il s'agit d'une phrase contenant une énumération..., et non d'une liste à proprement parler.

Le balisage de type liste est-il donc répprouvé pour tous les menus horizontaux ?
Qu'en est-il de la mise en forme au moyen des flottants ?

Euh, pour mon exemple moi j'aimerais rester dans ma logique : à savoir transformer des liens en block pour pouvoir prendre la main sur la largeur des liens et non seulement sur la largeur des mots.
Et j'ai juste besoin de savoir à partir de mon code (si bien sûr ma méthode est correcte) comment je peux revenir à l'horizontal ?
Je débute en CSS...
A +

D'accord

Si tu veux avoir tes liens les uns à côté des autres, il va falloir que tu fasses flotter les blocks.
Et ceci, par l'intermédiaire de l'instruction float.

Je te conseille d'aller jeter un œil à la galerie de menus (lien dans mon premier message) pour que tu comprennes le fonctionnement de la chose ...

Cygnus a écrit :

Euhm...
Cela signifierait-il donc que l'on ne choisit pas forcément une balise en fonction de son contenu ?

Cela signfie que le balisage HTML disponible est fruste.

Cygnus a écrit :
Dans l'exemple : je compte: 1, 2, 3..., je n'aurais pas utilisé de liste pour la mise en forme du contenu, car il s'agit d'une phrase contenant une énumération..., et non d'une liste à proprement parler.

Il n'est pas indispensable de justifier les réactions de bon sens, tu sais ?

a écrit :

Le balisage de type liste est-il donc répprouvé pour tous les menus horizontaux ?

Ce qui est bien avec les standards, parfois, c'est la subtilité de l'approche

Personne n'a parlé de proscrire quoi que ce soit. Juste d'éviter de considérer a priori que tout menu était une liste de lien <ul>, en vertu d'une règle issue de nulle part.

Un menu peut être un <ul>, un <p>, un <table>, voire plus exotique parfois. C'est une simple question de pertinence au cas par cas.

a écrit :

Qu'en est-il de la mise en forme au moyen des flottants ?

Pour quel menu ? Quels liens ? Combiens ? Où dans la page ? Quel rendu voulu ?

Faites confiance à votre jugement, nom de dj...
Modifié par Laurent Denis (28 Feb 2007 - 11:27)

Bon, j'ai réussi à mettre mes liens à l'horizontal mais un autre problème c'est que mes séparateurs ne suivent pas.

Le code Html :

<body>
<p class="liens"><a href="#">Item 1</a> | <a href="#">Item 2</a> | <a href="#">Item 3</a> | <a href="#">Item 4</a> | <a href="#">Item 5</a> | <a href="#">Item 6</a></p> 
</body>
</html>

Le code CSS :

.liens {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #990000;
}
a {
	color: #990000;
	text-decoration: none;
	display: block;
	width: 60px;
	text-align: center;
	float: left;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #FFFFFF;
	border-bottom-color: #FFFFFF;
}
a:hover {
	color: #990000;
	width: 60px;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #990000;
	border-bottom-color: #990000;
}

renato a écrit :
Bon, j'ai réussi à mettre mes liens à l'horizontal mais un autre problème c'est que mes séparateurs ne suivent pas.

Voilà qui semble assez logique, puisque tu demandes à tes liens de flotter ...
Mais que tes séparateurs, eux, ne se trouvent pas à l'intérieur des liens.

Pour corriger le problème, il va falloir que tu entoures les liens et leurs séparateurs d'une balise (un <span> me semble tout indiqué).
Et c'est cette balise-là que tu feras flotter.

Au passage, tu peux alléger ton code en utilisant des syntaxes "compressées" pour ces attributs de bordure et de police. Concrètement, tu pars de ceci:

.liens {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #990000;
}
a {
	color: #990000;
	text-decoration: none;
	display: block;
	width: 60px;
	text-align: center;
	float: left;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #FFFFFF;
	border-bottom-color: #FFFFFF;
}

Ce code peut être simplifié comme cela:

.liens {font:normal 12px verdana, arial, sans-serif; color:#990000;}

a {
color:#990000; text-decoration:none; display:block; width:60px;
text-align: center; float:left; border:1px solid #fff; border-width:1px 0;
}

Autre chose, il est conseillé d'utiliser des unités relatives pour dimensionner tes polices. À lire: Typographie web : gérer la taille du texte avec les « em ».

Euh.... C'est possible d'aboir un p'tit coup de main, car je ne vois pas comment je peux dissocier les liesn des séparateurs.
merci.

Ben ! renato, elle est là la réponse, non ?

Cygnus a écrit :

Voilà qui semble assez logique, puisque tu demandes à tes liens de flotter ...
Mais que tes séparateurs, eux, ne se trouvent pas à l'intérieur des liens.

Pour corriger le problème, il va falloir que tu entoures les liens et leurs séparateurs d'une balise (un <span> me semble tout indiqué).
Et c'est cette balise-là que tu feras flotter.

Bon, je progresse, j'ai abandonné la logique de transformer en block et j'ai remanié le code, ça fonctionne sur Opéra - Netscape - Firfox mais pas sur Internet Explorer.
Le code CSS :

.liens {
	text-align:center;
	font-size:12px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
	color: #000000;
}
a {
	color: #990000;
	text-decoration: none;
	padding: 0 10px 0 10px;

}
a:hover {
	border-top-width: 1px; 
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #990000;
	border-bottom-color: #990000;
	padding: 0 10px 0 10px;
}

Le code HTML :

<p class="liens">
| <a href="#">Item 1</a> |
| <a href="#">Item 2</a> |
| <a href="#">Item 3</a> |
| <a href="#">Item 4</a> |
| <a href="#">Item 5</a> |
| <a href="#">Item 6</a> |
</p>

Comment faire pour que cela fonctionne sur IE ?

renato a écrit :
Comment faire pour que cela fonctionne sur IE ?

Je viens de tester ton code (en copié-collé) sur IE 6 et IE 7, chez moi, tout fonctionne parfaitement.