Menus en CSS

Question

Maxiou

13 Apr 2011 à 17:36

Bonjour à tous,

Alors tout d'abord félicitations pour votre site, très instructif et très agréable à visiter.
Je m'occupe du site de mon association que j'ai fait à l'époque de manière très basique et surtout pas du tout aux normes. (pas taper, c'est en visitant ce site que je me suis rendu compte de tout ça!)
J'ai à l'époque conçu le design sous illustrator, exporté en html&images (tableaux) (j'ai dis pas taper!)

Alors pour me rattraper, je reprend tout à zéro et apprend le (x)html, quelques notions de html 5.0, le css 2.1 et le css 3 grâce à vos tutoriels.
Et j'ai viré dreamweaver de mon ordi et je bosse avec Notepad++.

Bon j'arrête de raconter ma vie et j'en viens à mon problème (j'ai déjà du en perdre la moitié d'entre vous) :
Je suis pour le moment sur ce tutoriel (Créer des menus simples en CSS) que j'applique à la lettre dans un fichier header.inc.php.

Voici le code de ce dernier :

<!DOCTYPE html>

<html lang="fr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

  <title>Association Overjoy - Roots & Culture Sound Systems Events - Lille, France</title>

  <link rel="stylesheet" media="screen" href="css/template.css">
</head>

<body>
<ul id="navigation"> 
    <li><a href="#" title="L'association">L'association</a></li> 
    <li><a href="#" title="Le Sound System">Le Sound System</a></li> 
    <li><a href="#" title="Photos, vidéos, mp3">Photos, vidéos, mp3</a></li> 
    <li><a href="#" title="Agenda">Agenda</a></li> 
    <li><a href="#" title="Friends">Friends</a></li> 
    <li><a href="#" title="Contact">Contact<a></li> 
</ul>

(à noter que mes balises <body> et <html> se ferment dans mon fichier footer)

Mon fichier CSS ressemble à ça :

body
	{
	background: #c69c6d;
	}
	

#navigation { 
    list-style: none ; 
    margin: 0 ; 
    padding: 0 ;
	text-align: center ; 
	height: 1.8em ; 
    }	
	

#navigation li { 
    display: inline ; 
	margin-right: 1px ; 
	float: left ; 
    width: 200px ; 
    border: 1px solid #600 ; 
    color: #fff ; 
    background: #c00 ; 
    }
	
#navigation li a { 
    display: block ; 
    background: #c00 ; 
    color: #fff ; 
    font: 1em "Trebuchet MS",Arial,sans-serif ; 
    line-height: 1em ; 
    padding: 4px 0 ; 
    text-align: center ; 
    }
	
#navigation li a:hover, #navigation li a:focus, #navigation li a:active { 
    background: #900 ; 
    text-decoration: underline ; 
    }

Tout va bien sauf que j'ai un petit bug en dessous de mon item "contact" sur G. Chrome et sur M. Firefox.
Et je ne trouve pas d'ou ça peut venir... Si quelqu'un à une idée ?

Un grand merci en tout cas !

maosalia

13 Apr 2011 à 17:54

Bonjour,

<li><a href="#" title="Contact">Contact<a></li>

tu as oublié de fermer la balise de lien.

Du coup tu as 2 liens qui sont recréés et donne ton artefact graphique.
Modifié par maosalia (13 Apr 2011 - 17:55)

Maxiou

13 Apr 2011 à 18:53

Merci beaucoup, j'avais bêtement pas vu.
Petite question subsidiaire : étant de la vieille école, j'ai du mal à comprendre comment je peux importer un menu design créé sous Illustrator (par exemple) en xHTML à l'aide des balises <div> plutôt que les tableaux.

Par exemple, mon site utilise un menu construit dans un tableau, et j'ai du mal à comprendre comment l'adapter en <div>. Comment puis-je faire en sorte que les images soient collées, par exemple ?

Merci d'avance ! Smiley smile

Sujet clos

CSS et mise en forme, CSS3

Menus en CSS