[Résolu] creer des menus comme ceux là - je voudrai creer des menus mais je n'y arrive que par le biais de tableaux :-( par marty - page 1

Bonsoir,

je souhaiterai creer des menus identique à ceux la mais j'ai beau trirurer mon css (et mon esprit) dans tous les sens je n'y arrive, la seul façon d'y parvenir à été de faire des tableaux...
mais les tableaux pechent par rapport à la css !

Avez vous une idée, de comment faire ???

merci de vos réponses !

http://alexand82.free.fr/monsite.PNGvoilà mon site actuel

et

voilà ce que j'aimerai faire

Citation : mon css

/* CSS Document */

body
{
width: 760px;
margin: auto;
margin-top: 10px;
margin-bottom: 20px;
background-color: #FAF0E6;

}

a
{
text-decoration: none; /* Les liens ne seront plus soulignés */
color: red; /* Les liens seront en rouge au lieu de bleu */
font-family:Verdana, Arial, Helvetica, sans-serif; /* la police des liens*/
font-size:11px
}

a img /* Toutes les images contenues dans un lien */
{
border: none; /* Pas de bordure */
}

/* L'en-tête */

#en_tete
{
width: 760px;
height: 100px;
background-image: url("images/banniere.png");
margin-bottom: 10px;
margin-left: 8px;
}

/* Le menu */

#menu
{
float: left;
width: 120px;
margin-left: 8px;
margin-right: 4px;
}

#menu2
{
float: right;
width: 120px;
margin-right: 8px;
margin-left: 4px
}

.element_menu /*case des liens*/
{
background-color: #FFFFCC;
background-image: url("Presentation/FondTitre.png");
border: 1px solid #ffaa00;
margin-bottom: 10px;
margin-top: 0px;

}
/* Quelques effets sur les menus */

.element_menu h5
{
color: #ff8800;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: center;
border-bottom: 1px dashed purple;
border-top: 1px solid purple;
margin-top: 10px;

}

.element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
{
list-style-image: url("Images/puce.gif");
padding: 0px;
margin-left: 30px;
margin-bottom: 5px
}

.element_menu a
{
color: black;
}

/* Le corps de la page */

#corps
{
margin-left: 140px;
margin-bottom: 20px;
width: 492px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
background-color: #FFFFCC;
border: 1px dashed #ffaa00;
padding-left: 5px;
padding-right: 5px;
font-size: 11px
}

#corps h1 /* Tous les titres h1 du corps */
{
color: navy;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
margin-top: 0px;
background-image: url("Presentation/FondTitre.png");
border-bottom: 1px solid black;
}

#corps h2 /* Tous les titres h2 du corps */
{
height: 20px;
padding-left: 30px;
color: #ffaa00;
text-align: left;
font-weight: bold;
}

#pied_de_page
{
width: 100%;
text-align: center;
clear: both;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
background-color: #FFFFCC;
border: 1px solid #ffaa00;
margin-top: 20px;
}

Citation : mon html

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Bienvenue sur mon site !</title>
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="bud&terence.css" />
</head>

<body>
<div id="en_tete">

</div>

<div id="menu">
<div class="element_menu">
<div class="element_titre">
<h5>Bud & Terrence</h5>

</div>
<ul>
<li><a href="page1.html">Lien</a></li>
<li><a href="page2.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>
</ul>
</div>

<div class="element_menu">
<div class="element_titre">
<h5>Bud Spencer</h5>
</div>
<ul>

<li><a href="page4.html">Lien</a></li>
<li><a href="page5.html">Lien</a></li>
<li><a href="page6.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>

</ul>
</div>
<div class="element_menu">
<div class="element_titre">
<h5>Terrence hill</h5>
</div>
<ul>

<li><a href="page4.html">Lien</a></li>
<li><a href="page5.html">Lien</a></li>
<li><a href="page6.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>

</ul>
</div>
</div>
<div id="menu2">
<div class="element_menu">
<ul>
<li><a href="page4.html">Lien</a></li>
<li><a href="page5.html">Lien</a></li>
<li><a href="page6.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>
</ul>
</div>

<div class="element_menu">
<div class="element_titre">
<h5>le forum</h5>
</div>
<ul>

<li><a href="page4.html">Lien</a></li>
<li><a href="page5.html">Lien</a></li>
<li><a href="page6.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>

</ul>
</div>
</div>

<div id="corps">
<h1>Mon super site</h1>

<p>

marty

4 décembre 2005 à 23:55:03

lastsseldon

5 décembre 2005 à 0:09:57

edit : j'ai vu le lien cette fois et rien a voir avec ce dont je parlais.
Je ne comprends pas le probleme ? Regarde la source pour comprendre comment ils font (surement une image).

jp949

5 décembre 2005 à 4:27:04

rien de plus facile a faire .
faut un gif animé pour illustrer les bullets.
une image en background des titres de menus <h4> et des bordures solid et dotted

yuston

5 décembre 2005 à 8:33:50

Citation : lastsseldon

Lol, s'il regarde la source, il va faire tout cela avec des tableaux et tout et tout....

Sinon le plus simple c'est que tu prennes la source de SdZ vu que ca ressemble un peu quand même... après dans tes listes, tu spécifies que tu aimerais ce gif animé pour faire office de bouton....

5 décembre 2005 à 17:19:11

merci beaucoup yuston !

J'avais pas fais attention que ce que je cherchais étais présent dans le menu du site du zéro !

Je m'en suis donc inspiré, et j'ai simplement rajouté une <div> au dessus de mon menu avec un variable qui lui est propre !!!!

creer des menus comme ceux là

je voudrai creer des menus mais je n'y arrive que par le biais de tableaux :-(

creer des menus comme ceux là

Supprimer

Modérer

Signaler le message aux modérateurs