28173 sujets

CSS et mise en forme, CSS3

[Résolu] Définir la hauteur d'une ligne dans une liste

Bonjour,

Je suis en train de refaire mon menu avec css et les blocs div. Voici mon problème :

Avant, je faisais des tableaux pour mon menu, et chaque lien se situé dans une cellule de 17px de haut.

Est-il possible de définir la hauteur d'une ligne li qui se situe dans ma liste (ul) ?
Genre ul {height:17px;}

Mais j'ai déjà essayer et sa ne marche pas ...

Sinon je serais obligé de refaire les cellules avec des tableaux.

merci d'avance !!

FluBB Smiley cligne
Modifié par tonton flubb (18 May 2006 - 09:29)
Il est possible de définir une hauteur avec la propriété Height sur une balise LI, cependant je conseille d'utilisé les propriété MARGIN-TOP et MARGIN-BOTTOM pour définir l'espacement voulu entre les balise LI pour ton menu.
En suivant ce qu'a écrit s_har_k, tu peux procéder ainsi : 
ul {
	list-style-type: none;
	margin-bottom: 20px;
	}

li {
	[#orange]height: 17px;[/#]
	width: 60px;
	background-color: #ccc;
	border: 1px solid #000;
	text-align: center;
	}

[i]Exemple de balisage[/i] :

<h1>menu 1</h1>
<ul>
	<li>lien 1</li>
	<li>lien 2</li>
	<li>lien 3</li>
	<li>lien 4</li>
</ul>

<h1>menu 2</h1>
<ul>
	<li>lien 1</li>
	<li>lien 2</li>
	<li>lien 3</li>
	<li>lien 4</li>
</ul>


Edit -- Bah en fait, j'étais en train de répondre, mais vu que je traînais, tu m'a pas de vitesse. Smiley cligne
Modifié par Smiley neko (17 May 2006 - 17:03)
Merci beaucoup cela m'a aidé fait avancé un peu mais maintenant je suis embété avec l'alignement vertical ...

De plus si on agrandie trop la taille dans le navigateur, tout est décalé.
Je pense que je vais reprendre ma bonne vielle méthode des tableaux ou au moins tout était bien en place !

Et je me demande si ca ne serait pas plus simple de créer plusieurs feuilles de styles pour des tailles différentes, et proposer aux visiteurs de choisir la taille, parce que si tout est décalé ca na va pas.

Encore merci !
Modifié par tonton flubb (17 May 2006 - 20:44)
a écrit :
maintenant je suis embété avec l'alignement vertical ...
Peux-tu préciser quelque peu ?

a écrit :
Je pense que je vais reprendre ma bonne vielle méthode des tableaux ou au moins tout était bien en place !
Surtout pas ! Smiley biggol Il ne faut pas abandonner au moindre problème : explique ce qui ne va pas et et on essayera de t'aider au mieux.

a écrit :
Et je me demande si ca ne serait pas plus simple de créer plusieurs feuilles de styles pour des tailles différentes, et proposer aux visiteurs de choisir la taille, parce que si tout est décalé ca na va pas.
C'est une solution qui permet de garder le contrôle sur son design. Mais si on prend soin d'utiliser des polices de tailles relatives (em ou pourcentages), et donc redimensionnables dans tous les navigateurs, ça fait double emploi avec les fonctions natives des navigateurs.

Si tu ne veux pas que ton design se dégrade en agrandissant le texte, tu peux utiliser des dimensions relatives (par exemple des em) pour le design. Ainsi, si on agrandit du texte, le bloc conteneur suivra.

Quand on s'y prend bien, ça donne juste l'impression de faire un zoom sur la page (comme sous Opera). Tu peux en voir l'application sur le site d'AymericJ : http://www.aj-crea.com (si tu agrandis le texte, le design suit le mouvement).
Modifié par Smiley neko (17 May 2006 - 20:52)
Oui c'est vrai tu as raison !

Bon pour l'alignement vertical, en fait avant j'utiliser les tableaux, et donc le titre du menu était centré. Pour le voir : cliquez ici

Mais depuis que j'ai fait cela avec css et les listes, le texte et aligné en haut, ou bien alors un peu au dessus du milieu si je le mais dans un tableau. (Voir l'image)
Le premier titre est dans un tableau donc un peu plus centré et les autres sont juste dans le li, et donc en haut.

Mois je voudrais le même résultat que sur le site Smiley ohwell

Par contre pour l'utilisation des valeurs relatives pour le design, si j'utilise des images pour faire le design, comment ça se passe alors, parce l'image a une taille fixe, et il ne faut pas qu'elle se répète ...

Un grand merci !

FluBB
Salut

a la place de height:17px;
tu peux utiliser line-height: 17px;

et le texte restera centrer dans tes li

A+
Modifié par gege71 (17 May 2006 - 22:41)
Sujet clos
Aller à