Besoin d'un coup de pouce en css (menu horizontal)

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Besoin d'un coup de pouce en css (menu horizontal)

Tangrim

Des bisous et des nounours !

Bonjour,

j'ai appris le css cette semaine, et j'essaie de faire un petit site pour m'entrainer.
C'est surement tout bête mais je suis dessus depuis une partie de l'après midi et ça m'agace.

Voila où j'en suis:

Code :

<div id="ban">
</div>
<div id="menuh">
<ul class="nav">
<li><a href="#" title="Accueil">Accueil</a></li>
<li><a href="#" title="Tagada">Tagada</a></li>
<li><a href="#" title="Tsouin-tsouin">Tsouin-tsouin</a></li>
</ul>
</div>

Code :

body
{
width:1024px;
margin:auto;
margin-top:10px;
margin-bottom:10px;
background-color: #de7c17;
}
#ban
{
width: 1024px;
height: 100px;
background-image: url("img/ban.jpg" );
background-repeat: no-repeat;
border: 2px solid #000000;
margin-bottom: 5px;
}
#menuh
{
float:right;
margin-right: 0px ; /*on dirait que ça sert à rien */
}
.nav
{
list-style: none ;
margin: 0px ;
margin-left: 2px; /* on dirait que ça sert à rien non plus*/
padding: 0px ;
overflow: hidden ;
}
.nav li
{
float: right ;
width: 200px ;
border: 2px solid #600000 ;
color: #fff000 ;
background: #c00000 ;
}
.nav li a
{
display: block ;
background: #c00 ;
color: #fff000 ;
font: 1em serif ;
line-height: 1em ;
padding: 4px;
text-align: center ;
text-decoration: none ;
}
.nav li a:hover, .nav li a:focus, .nav li a:active
{
background: #900000 ;
text-decoration: none ;
}

voila mon petit problème:
la bannière fait 1024*100
Et le menu et un tout petit peu décalé à gauche par rapport à l'extrémité de la bordure de la bannière.
comment faire pour que ça soit bien aligné?
De même je voudrais 1px entre chaque partie du menu, je n'y arrive pas, les bordures sont collées.
Et pour finir, je voudrais mettre un bandeau rouge sur tout la longueur du menu, et qui continue jusqu'à la gauche, au niveau de la bannière.
J'ai essayé plusieurs choses mais ça ne marche pas, auriez vous une idée ?

De même si vous trouvez des choses inutiles ou qui sont en conflits entre elles, je suis preneur, où même une mauvaise habitude, je suis preneur.

Une petite question aussi: pourquoi le menu apparait à l'envers? Bon ça ça se répare facilement, il suffit de changer l'ordre de la liste, mais c'est curieux comme comportement.

Merci beaucoup.

edit: une petite image:

Message édité par Tangrim le 06-06-2009 à 22:08:09

---------------
Des Bisous et des nounours ! | Internet 2025 | Dungeon-Generator

Publicité

Profil supprimé

Déjà, pour le rouge, et pour le décalage, essaye çà :

Code :

menuh
{
    float: right;
    margin: 0; /* Essaye margin 0, à tout hasard */
    width: 1024px; /* on prend toute la place dispo
    J'ai pas mis 100%, je sais pas si "menuh" est dans un conteneur. */
}

Je pense que ton menu apparait à l'envers à cause du float: right du .nav li, vire le.

Message cité 1 fois

Tangrim

Des bisous et des nounours !

Merci pour ta réponse, mais si je l'enlève je n'ai plus je n'ai plus de menu horizontal.
Tes changements n'ont rien changé dans ma page malheureusement.

---------------
Des Bisous et des nounours ! | Internet 2025 | Dungeon-Generator

David Boring

Tu dois mette des éléments de liste en display:inline
et pour ton écart, c'est normal, tu dois resetter les valeurs des éléments
http://www.alsacreations.com/astuc [...] t-css.html

Profil supprimé

FORUM HardWare.fr

Programmation

HTML/CSS

Besoin d'un coup de pouce en css (menu horizontal)

Sujets relatifs
Besoin d'aide [Liste chainée]	[PHP] Besoin d'aide pour du code PHP
Besoin d'aide	Au secours j'ai besoin de vous!!!
[PHP-EXT] Alignement de combo horizontal	Besoin d'aide pour comprendre un programme et pour faire un programme
Menu deroulant complexe	Besoin d'aide pour un code PHP
besoin d'aide pour un programme	Récupérer des données d'un menu déroulant en Perl
Plus de sujets relatifs à : Besoin d'un coup de pouce en css (menu horizontal)

Page générée en 0.055 secondes