Faire un menu en ligne

CSS et HTML

13 août 2006 à 18:02:35

Bonjour a tous !
Voila j'ai pris comme modéle html et css, le tp du "comment faire un site web ?"

Et donc le menu, j'veux pas qu'il soit a gauche
mais en haut
en ligne

comme sur le site du zéro en haut avec Accueil Forums etc...

alors mon code html :

et le code css

/* Le menu */

#menu
{
width: 680px;
margin-left: 80px;
float: top;
height: 80px;
}

.element_menu
{
background-color: black;
background-image: url("images/motif.png");
background-repeat: repeat-x;

border: 2px solid #31C2C2;
}

/* Quelques effets sur les menus */

.element_menu h3
{
color: White;
font-family: Papyrus, "Century Gothic", serif;
text-align: center;
}

.element_menu ul
{
list-style-image: url("images/puce.png");
padding: 0px;
padding-left: 20px;
margin: 0px;
}

.element_menu a
{
color: white;
}

.element_menu a:hover
{
text-decoration: underline;
color: #31C2C2;
}

Voila si quelqu'un peut m'aider... Merci !

strucky

13 août 2006 à 18:13:39

Pourquoi un ul dans 2 divs, ça sert à quoi ?

Un simple ul avec un height défini, et les li placé en float.

GreenPinguin

13 août 2006 à 19:07:59

Complètement d'accord.
En plus, float: top, ça n'existe pas.
Il faut appliquer float: left aux balise li.

NeoLitik

13 août 2006 à 21:50:09

J'ai rien compris ! Possible de me traduire cela s'il vous plait ?

bigtete

14 août 2006 à 0:42:48

je pense qu'il n'y a rien à faire floter :
Tu fais un div pour ton header ensuit un en dessous pour que ton menu soit plus haut que le corps.Ensuite le corps et le footer. c'est ce qui me parait le plus logique

NeoLitik

14 août 2006 à 1:49:29

Citation : bigtete

je pense qu'il n'y a rien à faire floter :
Tu fais un div pour ton header ensuit un en dessous pour que ton menu soit plus haut que le corps.Ensuite le corps et le footer. c'est ce qui me parait le plus logique .

Si vous commencez a vous contredire tout le temps aussi...
Et puis si vous pouvez utiliser des mots simples et francais, parceque j'connais pas tout le jargon du site web...

Philias

14 août 2006 à 7:30:37

Hello

Est-ce que tu veux comme sur A List Apart ?
Ou bien, en plus d'être en haut, tu veux qu'il y reste, comme sur le design SDZ Live ?
Le problème avec ce type de menu, c'est qu'il ne permet pas de mettre beaucoup d'éléments dans le menu (en clair, ton menu doit être super simplet)

Ceci est un texte qui flotte
à droite

Et dans ce cas, ce n'est pas ce que l'on appelle float, qui ne sert qu'à faire ça (le texte en vert à droite)
Et ça ne permet pas de mettre une position précise.
En clair :

#menu{
position:absolute;
top:0;
text-align:center;
margin:auto;
}
html>body #menu{
position:fixed;
}

strucky

14 août 2006 à 8:30:28

Une position absolute pour un menu, c'est complètement inadéquate, et pourquoi fixed sur les autres que IE ? :-°

Et bigtete, comment veux-tu que les li se placent en ligne si tu ne les mets pas en flottants, tu m'expliques ?

Verrallye

14 août 2006 à 10:07:35

moi j'utilise un tableau pour sa ( je sais c'est tordu).
Tu mets une ligne avec autant de cellule que tu as de bouton de menu .
et ensuite tu fait tes liens etc ...
Pas besoin de mettre de bordure .

Riko

14 août 2006 à 10:09:11

Attention aux tableaux pour la mise en page http://openweb.eu.org/articles/problemes_tableaux/

Citation : Verralye

moi j'utilise un tableau pour sa ( je sais c'est tordu).
Tu mets une ligne avec autant de cellule que tu as de bouton de menu .
et ensuite tu fait tes liens etc ...
Pas besoin de mettre de bordure .

Rien de mieux que de regarder le code source du sdz si tu veux faire le même genre

Citation : Site du zéro

/* Speedbarre */

#speedbarre
{
list-style-type: none;
margin-left:0;
padding-left: 0;
height: 28px;
background-color: rgb(244, 249, 253);
border: 1px dashed #2C485C;
}

#speedbarre li
{
height: 28px;
padding-left: 10px;
padding-right: 10px;
text-align: center;
padding-top: 1px;
font-family:'Trebuchet MS', Arial, 'Times new roman', Times, serif;
font-size:0.9em;
}

.speeddroite
{
float: right;
border-left: 1px dashed #2C485C;
}
.speedgauche
{
float: left;
border-right: 1px dashed #2C485C;
}

<ul id="speedbarre">
<li class="speedgauche"><a href="news.html" title="Retournez sur la page des news" > Accueil</a></li>
<li class="speedgauche"><a href="forum.html" title="Venez discuter et poser vos questions !"> Forums</a></li>
<li class="speedgauche"><a href="livreor.html" title="Le site vous plaît ? Dites-le !"> Livre d'or</a></li>
<li class="speedgauche"><a href="membres-304.html" title="Qui se cache derrière le Site du Zér0 ?"> L'équipe</a></li>

<li class="speeddroite">
<a href="-3497.html" title="Vous avez terminé ? Déconnectez-vous !"> Déconnexion (Riko)</a>
</li>
<li class="speeddroite">
<a href="mp-270-1.html" title="Lisez vos Messages Personnels"> 0 message</a>
</li>
</ul>

bigtete

14 août 2006 à 11:57:51

on doit pas comprendre le même truc parce que pour moi je ne vois pas l'utilitée mais on doit pas penser au même genre de menu.

Riko

14 août 2006 à 13:48:20

C'est bien le même genre que le menu du haut (Accueil, forum, livre d'or, l'équipe, nombre de message et connexion)?

NeoLitik

14 août 2006 à 15:33:30

Oui oui... une speebarre je crois que sa s'apelle...

Anonyme

14 août 2006 à 15:37:20

je suis pas sur, mais je crois que tu devrais mettree ton menu à la place de l'image d'en tête (l'header) et mettre une image au dessu si tu veux...

Riko

14 août 2006 à 18:43:26

Si c'est bien une "speedbarre" que tu veux regardes le code que j'ai donné plus haut.