Discussion :

[BlackWood]

Bonjour,

Je débute en CSS mais ça commence à venir...

Je souhaite créer une feuille de style avec comme principe que quelle que soit la taille de police sélectionné dans le navigateur, ma page soit correcte et aussi lisible qu'en format standard (sauf évidemment en taille "la plus petite").

Je rencontre un problème pour le menu horizontal : je ne souhaite donc pas lui définir de hauteur précise, puisqu'elle doit s'adapter à la police. Cependant, cette hauteur est de 25px quelle que soit la taille choisie ! De plus, le cadre de ce menu (balise <UL>) a une hauteur de 0px (dûe au float left des <LI> je pense). Bref, je vous pièce-joint le code HTML et CSS de ce problème, vous comprendrez mieux.

Mon code est-il correct ?
Ou dois-je me tourner vers une autre méthode ?
Est-ce un problème propre à IE6 ?

Merci.

[trotters213]

A mon avis, avant de te pencher sur ce problème tu devrais te pencher sur le problème du cross-browsing : ton menu est totalement erroné sur Firefox 2 et sous Opera 9 et ce problème est bien plus génant que les polices

[Candygirl]

Je pense que le problème dont tu parles, trotters213, est justement celui qu'il évoque concernant la hauteur du ul (et du conteneur aur FF et opera) nulle vu qu'il ne contient que des float.

Cependant, cette hauteur est de 25px quelle que soit la taille choisie ! De plus, le cadre de ce menu (balise <UL>) a une hauteur de 0px (dûe au float left des <LI> je pense)

Tu définis toi-même un lin-height de 25px donc oui, la hauteur reste fixe à 25px...

Autrement pour faire venir un conteneur qui ne contient que des flottants jusqu'au bas de ces derniers, tu as plusieurs options; crèer un nouveau contexte de formatage, placer un clear via la pseudo-classe :after ou sur un élément ajouté spécifiquement à cet effet. Sur IE le seul fait de donner la layout suffit.

Par exemple ajouter un simple:

Code :

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

1
2
3
ul#topMenu {
  overflow:hidden;
}

devrait faire l'affaire sauf pour IE6 qui aurait besoin d'avoir le layout, donc en rajoutant un width sur le ul, ce qui est possble puisque la largeur est connue. Afin d'éviter de devoir tout recalculer tes dimensions si tu changes la valeur de ton conteneur, le mieux est de t'arranger pour avoir un 100% dessus, ce qui est fesable si tu transformes le margin de ton ul en padding sur ton #conteneur:

Code :

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

1
2
3
4
5
6
7
8
9
10
#conteneur
{
	padding:0 30px;
}
 
ul#topMenu {
        width:100%;
	margin-bottom:10px;
        overflow:hidden;
}

Là, tu devrais avoir quelque chose de similaire sur les différents navigateurs.

[BlackWood]

Bonjour !

Tout d'abord, un grand merci !
Et... un petit "je sors" pour la hauteur de ligne à 25px...

Alors l'inconvénient de la solution padding, c'est que cette marge s'appliquera à tous les autres composants de ce conteneur... Or je souhaite y intégrer une image style "titre du site" complète (770*100) sans marges, etc. Ceci dit, je teste actuellement les autres solutions, et je m'en re-référerai à vos lumières pour les futurs éventuels problèmes.

Encore merci.

[trotters213]

Alors l'inconvénient de la solution padding, c'est que cette marge s'appliquera à tous les autres composants de ce conteneur...

tu peux toujours redéfinir le padding lorsque tu mettras ton image style "titre du site"

[BlackWood]

trotters213 > Oui, effectivement... C'est beaucoup plus simple étant donné que c'est l'unique élément sans marges...

Par contre, j'ai une question qui me tarode depuis pas mal de temps, sans qu'elle de trouve vraiment de réponse. De plus, je ne sais pas dans quel thème chercher cette dernière.
Donc CSS permet certes la mise en page facilement de nos documents (X)HTML. Mais alors, avant, on fonctionnait beaucoup par cadre 'frameset' pour délimiter le titre, le menu et le contenu.
- Faut-il à présent obligatoirement recopier titre et menu dans toutes nos pages ?
- Ou existe-t-il un moyen pour ne changer que le contenu ?
- Si oui, peut-on éviter le javascript ou autre php ?
- Et si non, comment mettre à jour facilement toutes nos pages lors d'un ajout dans le menu ?

J'espère que vous me comprenez, et pardonnez-moi de m'éloigner du sujet premier de ce topic.
Merci !

edit: Une autre question, dans le même temps ! :
Est-il possible d'avoir 2 colonnes (menu - contenu) sans définir de taille ?
Sous IE6, j'avais ces 2 div en float left et comme c'est IE, il en faisait sa propre interprétation, mais me donnait exactement ce que je voulais : le menu grandissait avec la police, le contenu restait lisible.
Mais maintenant que ma page est compatible Firefox aussi, (validée W3C également XHTML, CSS), plus moyen de trouver un subterfuge pour obtenir ce résultat...

[trotters213]

- Faut-il à présent obligatoirement recopier titre et menu dans toutes nos pages ?

Non et heureusement.

- Ou existe-t-il un moyen pour ne changer que le contenu ?

Oui tu utilises la fonction include_once (ou require_once) de PHP afin d'inclure ton menu, ton titre et ton pied de page, ce qui te permet de modifier un seul fichier si tu veux modifier un élément de ton menu par exemple au lieu de modifier toutes les pages.

- Si oui, peut-on éviter le javascript ou autre php ?

Oui en utilisant de l'ASP

- Et si non, comment mettre à jour facilement toutes nos pages lors d'un ajout dans le menu ?

Cf la réponse du include plus haut.

Est-il possible d'avoir 2 colonnes (menu - contenu) sans définir de taille ?

Oui, tu peux par exemple utiliser position:absolute;

[BlackWood]

J'aurai voulu ne pas utiliser de PHP mais tant pis... Au moins maintenant, je sais qu'en (X)HTML seul, c'est impossible.

Merci pour tout Trotters !