menu ave des div

2 avril 2006 à 17:16:20

Bonjour, je voudrais faire un menu avec des div.

Voila ce que j'obtiens : lien

C'est pas génial

<div class="accueil2">
<a href="/jorkyball/accueil.php">Accueil</a>
</div>

<div class="presentation2">
<a href="/jorkyball/presentation.php">Présentation</a>
</div>

<div class="regles2">
<a href="/jorkyball/regles.php">Règles du jeu</a>
</div>

<div class="equipe2">
a href="/jorkyball/regles.php">Notre équipe</a>
</div>

<div class="entrainements2">
<a href="/jorkyball/entrainements.php">Nos entrainements</a>
</div>

.accueil2
{
width: 19%;
float: left;
font: 0.9em "Trebuchet MS", helvetica, sans-serif;
background: rgb(221,12,12);
text-align: center;
}

.presentation2
{
width: 19%;
font: 0.9em "Trebuchet MS", helvetica, sans-serif;
background: rgb(221,12,12);
text-align: center;
}

.regles2
{
width: 19%;
font: 0.9em "Trebuchet MS", helvetica, sans-serif;
background: rgb(221,12,12);
text-align: center;
}

.equipe2
{
width: 19%;
font: 0.9em "Trebuchet MS", helvetica, sans-serif;
background: rgb(221,12,12);
text-align: center;
}

.entrainements2
{
width: 19%;
float: right;
font: 0.9em "Trebuchet MS", helvetica, sans-serif;
background: rgb(221,12,12);
text-align: center;
}

.accueil2, .presentation2, .regles2, .equipe2, .entrainements2
{
display: inline;
}

Merci

Deepthroat13

2 avril 2006 à 19:24:28

Il y a un site (alsacréation) qui à un tutos nommé: Trop de div tue le div
explication:
passer de tableau à div permet de rendre plsu claire le code cependant si tu met autant de div que de cellule de tableau question clareter ca reviendera au meme utilise pluto un liste :

<ul>
<li><a href="/jorkyball/accueil.php">Accueil</a></li>
<li><a href="/jorkyball/presentation.php">Présentation</a><li>
<li>...</li>
</ul>

Et tu mets en forme avec le CSS.
Je pense qu'un float left sur les <li> fera l'affaire

regarde je te file mon code comme example.
Tu veras que j'utilise les div que pour les grandes lignes :

<!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" >

<head>
<title>--\\-- Bionxicorp --//--</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design Bleu" href="bleu.css" />
</head>

<body>

<div id="Header">
<h1>--\\-- Bionixcorp --//--</h1>
</div>

<div id="Menu">

<h2>TitreMenu</h2>

<ul>
<li><a href="LienCategorie">TitreCategorie</a></li>
<li><a href="LienCategorie">TitreCategorie</a></li>
<li><a href="LienCategorie">TitreCategorie</a></li>
<li><a href="LienCategorie">TitreCategorie</a></li>
</ul>

</div>

<div id="Corps">

<h2>Titre</h2>

<div id="CorpsContenu">

<h3>Titre</h3>

<div class="CorpsContenuSection">
<p>Contenu</p>
</div>

</div>

</div>

<div id="Footer">

<h2>Nombre de connectes : ({NombreConecter}) - - Temps de chargement de la page : ({TempsChargement} sec) - - Nombres de requetes : ({NombreRequete})</h2>

</div>

</body>

</html>

yogui41

2 avril 2006 à 19:48:26

En fait au début j'avais utilisé un tableau comme tu me le conseilles. Mais ça ne m'affichait pas la même chose sous ie et sous mozilla. Avec les div j'avais plus de pbls.

Lien de mon site

Voila mon nouveau code avec les tableaux:

<div class="menu2">
<ul>
<li><a href="/jorkyball/accueil.php">Accueil</a></li>
<li><a href="/jorkyball/presentation.php">Présentation</a></li>
<li><a href="/jorkyball/regles.php">Règles du jeu</a></li>
<li><a href="/jorkyball/equipe.php">Notre équipe</a></li>
<li><a href="/jorkyball/entrainements.php">Nos entrainements</a></li>
</ul>
<br />
</div>

.menu2 ul
{
font: 0.9em "Trebuchet MS", helvetica, sans-serif;
margin-left: 10px;
}

.menu2 ul li
{
display: inline;
background: rgb(221,12,12);
border: 1px solid black;
width:19%;
float: left;
text-align: center;
}

.menu2 a
{
color: #eee;
text-decoration: none;
}

J'aimerais bien ton avis.

Sur mon site en dessous de mon menu, les 4 mots autour de l'image. Avant j'utilisais un tableau et on m'avait conseillé d'utiliser des div, ce que j'ai fais. J'aimerais bien ton avis aussi.

Merci

strucky

2 avril 2006 à 20:19:04

Salut,

Citation : yogui41

En fait au début j'avais utilisé un tableau comme tu me le conseilles...

Il ne faut pas confondre listes à puces et tableau, cela n'a strictement rien à voir.

Citation : yogui41

<div class="menu2">
<ul>
<li><a href="/jorkyball/accueil.php">Accueil</a></li>
<li><a href="/jorkyball/presentation.php">Présentation</a></li>
<li><a href="/jorkyball/regles.php">Règles du jeu</a></li>
<li><a href="/jorkyball/equipe.php">Notre équipe</a></li>
<li><a href="/jorkyball/entrainements.php">Nos entrainements</a></li>
</ul>
<br />
</div>

Je dirais même plus :

<ul class="menu2">
<li><a href="/jorkyball/accueil.php">Accueil</a></li>
<li><a href="/jorkyball/presentation.php">Présentation</a></li>
<li><a href="/jorkyball/regles.php">Règles du jeu</a></li>
<li><a href="/jorkyball/equipe.php">Notre équipe</a></li>
<li><a href="/jorkyball/entrainements.php">Nos entrainements</a></li>
</ul>

Ensuite, tu passe tes li en inline, et tu leur donnes une largeur, pas très logique.

Ta page est de largeur fixe, travaille en px et non en pourcentage, car tu as des bordures.

yogui41

2 avril 2006 à 22:25:36

quand je mets:

<ul class="menu2"> à la place de <div class="menu2">, mon css ne marche plus.

nan ma page n'est pas en largeur fixe, elle est extensible.
Il y a juste le menu a gauche et la partie a droite qui sont fixes.

strucky

2 avril 2006 à 23:24:00

Ah oui, désolé, j'avais pas bien fais attention que ta page était extensible.

Mais alors là, tu va galérer, si tu veux absolument que ton menu occupe toute la largeur de ton corps de page.

yogui41

2 avril 2006 à 23:28:49

nan je veux pas forcément que ça occupe toute la largeur de mon corps. Il peut y avoir un petit espace à gauche et a droite. Mais j'aimerais au moins qu'il soit centré, ce qui n'est pas le cas sur ie. Et maintenant j'ai des puces sous mozilla :-(

menu ave des div

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.

menu ave des div

menu ave des div

Supprimer

Modérer

Signaler le message aux modérateurs