[Résolu] Centrage CSS et liste à image de fond

Centrage CSS et liste à image de fond [Résolu] - HTML/CSS - Programmation

Marsh Posté le 13-08-2006 à 11:30:08    

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 :
  1. <ul id="menu">
  2.             <li>
  3.                 <a href="" title="Lien1" id="lien1">
  4.                     <span>Lien1</span>
  5.                 </a>
  6.             </li>


 
(pas de </ul> car ce n'est qu'un bout du menu)
 
Et la CSS correspondante :
 

Code :
  1. ul#menu {
  2. list-style-type: none;
  3. margin: 0;
  4. padding: 0;
  5. }
  6. #menu span {
  7. display: none;
  8. }
  9. ul#menu li {
  10. display: inline;
  11. }
  12. #lien1 {
  13. background-image: url(../gfx/lien1.gif);
  14. background-repeat: no-repeat;
  15. width: 85px;
  16. height: 22px;
  17. }


 
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 .
 
Merci d'avance :).


Message édité par koskoz le 13-08-2006 à 17:18:35

---------------
Twitter
Reply

Marsh Posté le 13-08-2006 à 11:30:08   

Reply

Marsh Posté le 13-08-2006 à 16:12:53    

#menu span { visibility: hidden; } (et non pas display:block; )
 
#lien1 : ajoute display: block; float: left; sinon le width et height ne marcheront pas.
 
ca devrait nettement mieux marcher :o


Message édité par cosmoschtroumpf le 13-08-2006 à 16:13:06

---------------
Android/Manettes/Metroidvania/Zelda/Indés/Retrogaming/VDS jeux
Reply

Marsh Posté le 13-08-2006 à 16:29:52    

Bon, en fait avant ta réponse j'avais déjà trouvé une solution (après de nombreuses heures quand même) :
 

Code :
  1. <ul id="menu">
  2.   <li>
  3.    <a href="" title="Lien1" id="lien1">
  4.     <span>Lien1</span>
  5.    </a>
  6.   </li>


 

Code :
  1. #menu a {
  2. display: block;
  3. float: left;
  4. }
  5. #menu {
  6. list-style-type: none;
  7. margin: 0;
  8. padding: 0 0 0 19px;
  9. width: 510px;
  10. }
  11. #menu span {
  12. display: none;
  13. }
  14. #lien1 {
  15. background-image: url(../gfx/lien1.gif);
  16. background-repeat: no-repeat;
  17. width: 85px;
  18. height: 22px;
  19. }


---------------
Twitter
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed