28173 sujets

CSS et mise en forme, CSS3

[Résolu]Création d'un menu en haut.

Bonsoir,

Je souhaiterais savoir comment faire un menu comme celui du haut & avec le fond rouge comme celui de ce site, http://www.dedibox.fr/

Auriez-vous un tutoriel pour ça ? Car je n'ai rien trouvé à ce propos.

Merci de votre aide.
A++ Smiley cligne
Modifié par Scurz (01 Oct 2006 - 11:18)
Re,

J'ai réussi à créer un menu, un problème se pose dans mon code css & xhtml, le menu du haut ne se met au milieur Smiley ohwell J'ai beau chercher, mais je ne trouve pas d'où vient ce problème.

Ce que j'ai fait : http://sfantar.homelinux.org/projet/
Feuille css : http://sfantar.homelinux.org/projet/design.css

Si quelqun a une petit idée, je suis preneur Smiley smile
Si vous avez quelques suggestions d'améliorations de mon code, n'hésitez pas.
Modifié par Scurz (30 Sep 2006 - 16:58)
As-tu essayé ceci ?

margin-left:auto;
margin-right:auto;

Biensûr ça ne marchera pas sous IE , donc pour corriger le bug avec IE , cherche un peu dans alsacréation avec google , je crois que tu trouveras quelque chose comme "Mise en page sans tableaux" ou autre ...
Slt,

J'ai donc mis des margin, ça ne change rien :

.menuhaut a {
margin-left:auto;
margin-right:auto;
margin: 0 3px;
width: 120px;
height: 17px;
display: block;
text-align: center;
border: 1px solid black;
text-decoration: none;
color: #000000;
background: #fff;
}



Pour IE, je ne sais pas, je ne suis pas sous Windows...Mais ca ne fonctionne pas sous IE ?
Re,

Inclus ton menu dans un bloc et centre le bloc.
<div id="menu">
Ton menu
<div>

#menu{
margin: auto;}
Re,

Regarde :

<!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>
body{
        background-color: #cbe9d8;
        margin: auto;
        font-family: "Times New Roman", Times, serif;
 	margin-top: 10px; 
	margin-bottom: 10px;
	width: 800px;
}

#logo{
        witdh: 800px;
        height: 120px;
        background-repeat: no-repeat;
        border: 2px double black;
}
#menu{
        width: 600px;
        margin: auto;
        border: 1px solid #968d00;
        overflow: hidden;
}
a{
	text-decoration: none;
}

ul {
	list-style-type: none;


}

.menuhaut li {
	float: left;

} 

.menuhaut a {
	margin: 0 3px; 
	width: 120px;
	height: 17px;
	display: block;
	text-align: center;
	border: 1px solid black;
	text-decoration: none;
	color: #000000;
	background: #fff;
}

.menuhaut a:hover {
	background: #c6dcc7;
	border: 1px solid black;
}

#contenu{
	float: center;
	margin-top: 50px;
	border: 2px black solid;
	padding: 10px;
}

.bas{
	margin-top: 7px;
        border: 2px black solid;
        padding: 5px;
	font-size: 15px;
	text-align: right; 
	font-style: italic;
}

h1, h2{
	color: #2c5ba1;
	text-align: center;
}

</style>
</head>
<body>
<div id="logo">

		<!-- Logo -->
		</div>
		 <div id="menu">
		<ul class="menuhaut">
		<!-- Menu du haut -->
		<li><a href="">Nos projets</a></li>
		<li><a href="">Nos articles</a></li>
		<li><a href="">A propos</a></li>

		<li><a href="">Sites/blogs</a></li>
		</ul>
		</div>
		
		<div id="contenu">
		<!-- Contenu -->

		<h1>Page d'accueil.</h1>
		<h2>Test h2</h2>
		Test plop plop<br />

		</div>
		
		<div class="bas">
		<a href="">Nos projets </a> -- 
		<a href="">A propos</a> -- 
		Developpe par *********
		</div>

</body>

</html>


Vérifie ton css, il y a quelques boulettes ...
float : center ???
witdh: 800px; ???
Sujet clos
Aller à