Salut tout le monde,
je suis actuellement en train de réaliser la mise en page d'un site, entièrement en CSS/XHTML et en prenant bien soin de séparer le fond de la forme (une grande première pour moi).
J'essaye donc d'avoir une bonne sémantique quant à mes balises, et actuellement quelques problèmes se posent à moi.
En effet, pour afficher mon menu, j'utilise les balises ul et li, avec un texte pour chaque lien.
Dans la mise en page que je suis actuellement en train de réaliser, je ne veux pas que le texte s'affiche, à la place je veux que se soit une image.
Voilà donc le code de mon menu :
Code :
- <ul id="menu">
- <li>
- <a href="" title="Lien1" id="lien1">
- <span>Lien1</span>
- </a>
- </li>
|
(pas de </ul> car ce n'est qu'un bout du menu)
Et la CSS correspondante :
Code :
- ul#menu {
- list-style-type: none;
- margin: 0;
- padding: 0;
- }
- #menu span {
- display: none;
- }
- ul#menu li {
- display: inline;
- }
- #lien1 {
- background-image: url(../gfx/lien1.gif);
- background-repeat: no-repeat;
- width: 85px;
- height: 22px;
- }
|
Or, l'image ne s'affiche pas, sauf si le texte dans le lien s'affiche à son tour.
Mais même comme cela, elle ne s'affiche pas entièrement.
Autre problème que j'ai actuellement, j'ai défini un bloc principal devant contenir tout le reste.
J'ai centré ce bloc via les marges auto, mais si je rajoute d'autres blocs à l'intérieur, il ne sont pas centrés.
C'est le cas par exemple de mon menu.
Si vous avez une idée, je suis preneur.
Pour voir ce que ça donne, c'est par ici, et la css se trouve là.
Merci d'avance .
Message édité par koskoz le 13-08-2006 à 17:18:35
---------------
Twitter