18041 sujets

Questions générales et questions de débutants

Simple menu CSS

J'ai suivi le tutoriel sur le site à propos de la création d'un menu simple; mais en intégrant mon menu construit dans la page html, deux problème se posent:
1° Les espaces entre les rubrique du menu ne sont pas les mêmes, je voudrait que les rubriques soient bien et également espacées ... Comment arriver à la faire.

Je voudrait que mon menu sois à droite, quand je le fais en changeant juste sur ''float'', l'ordre des rubriques change, comment mettre le menu à droit tout en gardant l'ordre des rubrique?

merci,
je suis débutant en la matière .....

Vous pouvez bien voir le site que je construit avec juste le menu à cette adresse : www.villedelikasi.cd pour comprendre mon problème
Hello Rosier et bienvenue,

pour commencer l'utilisation de tableaux imbriqués de mise en page est inutile et pose des problèmes d'accessibilité : lire Construire un site sans tableaux et pour voir un exemple Réalisation d'un design complet (XHTML / CSS) en 5 étapes.

Pour ce que tu veux faire (et si j'ai bien compris Smiley cligne ) voici un exemple :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css">
html, body {
	font-size: 100%;
}

body {
	margin: 0;
	padding: 0;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
	font-size: .8em;
}

#global {
	width: 980px;
	margin: 0 auto;
}

#nav {
	padding: 0;
	margin: 0;
	padding: 10px 5px;
	background: #000;
	text-align: right;
	list-style: none;
}

#nav li {
	display: inline;
}

#nav li a {
	text-decoration: none;
	text-transform: uppercase;
	color: #fff;
	padding: 15px 10px;
}

#nav li a:hover,
#nav li a:focus,
#nav li a:active {
	text-decoration: underline;
}
</style>
</head>
<body>
<div id="global"> 
    <ul id="nav">  
        <li><a href="#" title="aller à la section 1">Découvrir Likasi</a></li>  
        <li><a href="#" title="aller à la section 2">La mairie</a></li>  
        <li><a href="#" title="aller à la section 3">Villes jumelées</a></li>  
        <li><a href="#" title="aller à la section 4">Communiqués officiels</a></li>  
        <li><a href="#" title="aller à la section 5">Actualités</a></li> 
    </ul> 
</div> 
</body>
</html>

Modifié par Heyoan (07 Feb 2010 - 14:38)
Sujet clos
Aller à