[CSS3] barre transparente

eragon77

30 May 2010 à 19:59

Bonsoir,

Je suis entrain de crée mon site en html5 et css 3 et je bloque sur quelque chose.

Je souhaite mettre une barre grise qui se repeterait ou via un background-color sur toute la longueur de la page. Voici un exemple : http://img375.imageshack.us/img375/96/screen.gif

J'ai ce code pour le moment :

  
<header role="banner">
    <h1 id="logo"><a href=""><img src="img/logo.png" alt=""></a></h1>
	
    <nav role="navigation">
      <a href="#"><img src="img/4.png" class="1" alt=""></a>     
	   <a href="#"><img src="img/e.png" class="2" alt=""></a>
       <a href="#"><img src="img/4.png" class="3" alt=""></a>
       <a href="#contact"><img src="img/cse.png" class="4" alt=""></a>

    </nav>
  </header>

Avez vous une idée de comment faire ?

Bonne soirée et merci par avance.
Modifié par eragon77 (30 May 2010 - 21:16)

Foxo

30 May 2010 à 21:41

Je ne vois pas trop où est le soucis... Pourquoi ne met tu pas simplement ton style css sur ton élément "nav" ?

Remarque au passage qui n'a rien à voir avec la question, je ne suis pas sur que l'élément "nav" dispense de l'utilisation d'une liste de lien. Ne serait-t-il pas plus juste de placer une "ul" dans ton élément "nav" ?

eragon77

30 May 2010 à 21:47

J'ai pas l'impression que ça marche étant donné que header c'est comme un div (enfin je pense). Si je mets un autre div dans le header (donc nav), le width:100% prendre 100% de la largeur du header et non la largeur total de la PAGE.

Et si je mets un largeur trop grande, j'ai un décalage du au logo qui se situe à côté Smiley smile

J'avais plutôt pensé à mettre un div ou autre à l'extérieur de header Smiley smile

Mais je voudrais un truc propre en fait.

De plus, le menu de navigation c'est des images et non simplement du texte, la barre grise je voudrais quelle soit centrer verticalement par rapport au image.

Bonne soirée

CSS et mise en forme, CSS3

[CSS3] barre transparente