Optimisation Css
goava
Messages postés
41
Date d'inscription
Statut
Membre
Dernière intervention
-
spirou0069 Messages postés 141 Date d'inscription Statut Membre Dernière intervention -
spirou0069 Messages postés 141 Date d'inscription Statut Membre Dernière intervention -
Bonjour tous :)
Voilà j'ai déjà bossé une partie de la nuit sur ce code et comme je suis débutant et bien j'ai franchement de la peine à centrer mon menu scrolldown est ce qu'une gentille personne serait assez aimable pour me venir en aide et m'apporter quelques conseils en la matière ou alors éventuellement une petite correction du css si c'était possible....
Je remercie d'avance ceux qui apporterons de l'eau à mon moulin.
Bonne journée
Voici le code en question, excuser moi pour le charabiat...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
#menu {
width : 68%;
height : 30px;
padding : 0 0.5em;
background-color : #663333;
border : medium outset #00FFFF;
list-style-type : none;
}
#menu ul {
margin:0;
padding:0;
list-style-type:none;
text-align:center;
}
#menu li {
float:left;
margin:auto;
background-image:url(bib/texture_cuir.jpg);
border: medium groove #990000;
padding-right: 1px;
}
#menu li a {
display:block;
width:100px;
color:white;
text-decoration:none;
padding:5px;
}
#menu li a:hover {
color:#FFD700;
background-image:url(bib/texture_orange.jpg)
}
#menu ul li ul {
display:none;
}
#menu ul li:hover ul {
display:block;
}
#menu li:hover ul li {
float:none;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">BOUTON 1</a>
<ul>
<li><a href="#">Sous-menu 1</a></li>
<li><a href="#">Sous-menu 2</a></li>
<li><a href="#">Sous-menu 3</a></li>
</ul>
</li>
<li><a href="#">BOUTON 2</a>
<ul>
<li><a href="#">Sous-menu 1</a></li>
<li><a href="#">Sous-menu 2</a></li>
<li><a href="#">Sous-menu 3</a></li>
</ul>
</li>
<li><a href="#">BOUTON 3</a>
<ul>
<li><a href="#">Sous-menu 1</a></li>
<li><a href="#">Sous-menu 2</a></li>
<li><a href="#">Sous-menu 3</a></li>
</ul>
</li>
<li><a href="#">BOUTON 4</a>
<ul>
<li><a href="#">Sous-menu 1</a></li>
<li><a href="#">Sous-menu 2</a></li>
<li><a href="#">Sous-menu 3</a></li>
</ul>
</li>
<li><a href="#">BOUTON 5</a>
<ul>
<li><a href="#">Sous-menu 1</a></li>
<li><a href="#">Sous-menu 2</a></li>
<li><a href="#">Sous-menu 3</a></li>
</ul>
</li>
<li><a href="#">BOUTON 6</a>
<ul>
<li><a href="#">Sous-menu 1</a></li>
<li><a href="#">Sous-menu 2</a></li>
<li><a href="#">Sous-menu 3</a></li>
</ul>
</li>
<li><a href="#">BOUTON 7</a>
<ul>
<li><a href="#">Sous-menu 1</a></li>
<li><a href="#">Sous-menu 2</a></li>
<li><a href="#">Sous-menu 3</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
GOAVA
et merci encore
Voilà j'ai déjà bossé une partie de la nuit sur ce code et comme je suis débutant et bien j'ai franchement de la peine à centrer mon menu scrolldown est ce qu'une gentille personne serait assez aimable pour me venir en aide et m'apporter quelques conseils en la matière ou alors éventuellement une petite correction du css si c'était possible....
Je remercie d'avance ceux qui apporterons de l'eau à mon moulin.
Bonne journée
Voici le code en question, excuser moi pour le charabiat...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
#menu {
width : 68%;
height : 30px;
padding : 0 0.5em;
background-color : #663333;
border : medium outset #00FFFF;
list-style-type : none;
}
#menu ul {
margin:0;
padding:0;
list-style-type:none;
text-align:center;
}
#menu li {
float:left;
margin:auto;
background-image:url(bib/texture_cuir.jpg);
border: medium groove #990000;
padding-right: 1px;
}
#menu li a {
display:block;
width:100px;
color:white;
text-decoration:none;
padding:5px;
}
#menu li a:hover {
color:#FFD700;
background-image:url(bib/texture_orange.jpg)
}
#menu ul li ul {
display:none;
}
#menu ul li:hover ul {
display:block;
}
#menu li:hover ul li {
float:none;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">BOUTON 1</a>
<ul>
<li><a href="#">Sous-menu 1</a></li>
<li><a href="#">Sous-menu 2</a></li>
<li><a href="#">Sous-menu 3</a></li>
</ul>
</li>
<li><a href="#">BOUTON 2</a>
<ul>
<li><a href="#">Sous-menu 1</a></li>
<li><a href="#">Sous-menu 2</a></li>
<li><a href="#">Sous-menu 3</a></li>
</ul>
</li>
<li><a href="#">BOUTON 3</a>
<ul>
<li><a href="#">Sous-menu 1</a></li>
<li><a href="#">Sous-menu 2</a></li>
<li><a href="#">Sous-menu 3</a></li>
</ul>
</li>
<li><a href="#">BOUTON 4</a>
<ul>
<li><a href="#">Sous-menu 1</a></li>
<li><a href="#">Sous-menu 2</a></li>
<li><a href="#">Sous-menu 3</a></li>
</ul>
</li>
<li><a href="#">BOUTON 5</a>
<ul>
<li><a href="#">Sous-menu 1</a></li>
<li><a href="#">Sous-menu 2</a></li>
<li><a href="#">Sous-menu 3</a></li>
</ul>
</li>
<li><a href="#">BOUTON 6</a>
<ul>
<li><a href="#">Sous-menu 1</a></li>
<li><a href="#">Sous-menu 2</a></li>
<li><a href="#">Sous-menu 3</a></li>
</ul>
</li>
<li><a href="#">BOUTON 7</a>
<ul>
<li><a href="#">Sous-menu 1</a></li>
<li><a href="#">Sous-menu 2</a></li>
<li><a href="#">Sous-menu 3</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
GOAVA
et merci encore
A voir également:
- Optimisation Css
- Optimisation pc - Accueil - Utilitaires
- Optimisation découpe panneau gratuit - Télécharger - Outils professionnels
- Enlever le soulignement d'un lien css ✓ - Forum Webmastering
- CSS/Comment enlever couleur liens ? ✓ - Forum CSS
- Css download - Télécharger - HTML
3 réponses
div#menu { width:100%; } ?
sinon essaies de fixer la taille de ton ul et/ou de tes li et pour tes a tu met margin:0 auto; ...si ça ne marche pas essaies de mettre a {text-align:center;}
Tiens nous au courant...
:D
sinon essaies de fixer la taille de ton ul et/ou de tes li et pour tes a tu met margin:0 auto; ...si ça ne marche pas essaies de mettre a {text-align:center;}
Tiens nous au courant...
:D
Salut,
1. Je te conseil de travailler en px pas en %
2. Voici un bon tuto pour des menus en horizontale et verticale http://www.tuto-fr.com/tutoriaux/tutorial-menu-deroulant-css.php
3. Si encore problème tu peux renvoyer un message
Marc
1. Je te conseil de travailler en px pas en %
2. Voici un bon tuto pour des menus en horizontale et verticale http://www.tuto-fr.com/tutoriaux/tutorial-menu-deroulant-css.php
3. Si encore problème tu peux renvoyer un message
Marc
Juste pour donner la nuance...
N'utiliser les % que et uniquement avec la valeur max (100%) !
Le reste avec des valeurs fixes (px, pt, etc...).
En gros, il faut voir ça comme 3 outils : les valeurs fixes pour la précision (pixel à pixel, etc), les % uniquement pour se garantir la pleine superficie, et enfin la valeur auto pour une adaptation logique au contenu.
Bon boulot ! :D
N'utiliser les % que et uniquement avec la valeur max (100%) !
Le reste avec des valeurs fixes (px, pt, etc...).
En gros, il faut voir ça comme 3 outils : les valeurs fixes pour la précision (pixel à pixel, etc), les % uniquement pour se garantir la pleine superficie, et enfin la valeur auto pour une adaptation logique au contenu.
Bon boulot ! :D
