Ecrat des Puces de liste dans un tableau
Hors ligneJlb59 Le 26/04/2007 à 15:32 Profil de Jlb59 Configuration de Jlb59

Super néophite !
Bonjour à tous,

J'essaies de faire un systeme de menu sous forme de liste.

Après avoir empêché l'affichage des puces, la liste reste toujours à la même place dans le tableau.

Je mets ce code html avec css, au cas où !...

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" href="../css/main.css" type="text/css" title="jlb59.fr" />
<!--<link rel="stylesheet" href="./css/menu/menug.css" type="text/css" title="jlb59.fr" />-->
<style>
.menug{
     font-family: verdana, arial, garamond, sans-serif;
     font-size: 11px;
     color: #000000;
}
.menug table{
     position: relative;
     margin-top: 20px;
     margin-left: -0.3em;
     text-align: left;
     width: 200px;
     border-top: 1px solid blue;
     border-bottom: 1px solid blue;
}
.menug table td{
     height: auto;
     border-right: 1px solid blue;
     border-left: 1px solid blue;
}
.menug ul li{
     list-style-type: none;"
                margin-left:102px;
     margin-right: 0px;
}
.menug li{
     list-style-type: square;
     margin-left: 2px;
     margin-right: 20px;
}
.bord{
     background-color: #E0FFFF;
     border-left: 1px solid blue;
     border-right: 1px solid blue;
}
</style>

<title></title>
<body>

<!-- Début menuG -->

<div class="menug">

<table cellspacing=0 cellpadding=0>
<!-- Trucs et Astuces -->
<tr><td bgcolor="cyan" class="bord-h" ><b>Trucs & Astuces</b></td></tr>
<tr><td class="bord">
<ul>
  <li>
<a href="http://fr.selfhtml.org/" target="_blank" title="Faire soi-même les fichiers HTML">SELFHTML</a><br></li>
  <li>
<a href="http://www.alsacreations.com/" target="_blank" title="Conception web aux normes">Alsacreation</li>
  <li>
<a href="http://www.generation-nt.com/export/rss_astuces.xml" target="blank" Title="Trouvez des astuces pour Windows">Flux Optimise Windows</a><br></li>
  <li>
<a href="http://www.vulgarisation-informatique.com/" target="_blank" title="">Vulgarisation Informatique</a><br></li>
  <li>
<a href="http://www.zdnet.fr/builder/web_design/conception_site/0,39021086,39164074,00.htm" target="_blank" title="CSS: traiter des tableaux en utilisant des feuilles de style">Tableaux en CSS</a></li>
</ul>
</td>
</tr>

<tr>
<td class="bord">&nbsp;</td></tr>

<!-- Ressources Web -->
<tr><td bgcolor="cyan" class="bord-h" ><b>Ressources Web</b></td></tr>
<tr><td class="bord">
<ul>
  <li>
Kits graphiques</li>
</ul>

</td></tr>

<tr><td class="bord">&nbsp;</td></tr>

<!-- Outils Webmarters -->
<tr><td bgcolor="cyan" class="bord-h" ><b>Outils Webmasters</b></td></tr>
<tr><td class="bord">
<ul>
  <li>
pppppppppppppp</li>
  <li>
pppppppppppppp</li>
  <li>
pppppppppppppp</li>
</ul>

</td></tr>

<tr><td class="bord">&nbsp;</td></tr>

<!-- Hébergement -->
<tr><td bgcolor="cyan" class="bord-h" ><b>Hébergement</b></td></tr>
<tr><td class="bord">
<ul>
  <li>
Nom de domaine</li>
</ul>

</td></tr>


<tr><td class="bord">&nbsp;</td></tr>

<!-- Affiliation -->
<tr><td bgcolor="cyan" class="bord-h" ><b>Affiliation</b></td></tr>
<tr><td class="bord">
<ul>
  <li>
Faire un lien</li>
</ul>

</td></tr>

<tr><td bgcolor="lightcyan" class="bord-b">&nbsp;</td></tr>

</table>

<!-- Fin menuG -->

</div>

</body>
</html>


Si vous pouviez m'aider, ce serait sympa ?

Merci d'avance.

Cordialement, JLB59
--
Cordialement, JLB59
Hors ligneDarkingod Le 26/08/2007 à 18:52 Profil de Darkingod Configuration de Darkingod

Eh bas dis donc tu t'amuses avec les tableaux ^^ lol, essaye plutôt sa :

.menu
{ // le cadre du menu en violet

}
.menucat
{ //tes categorie du menun avec le fond bleu fluo

}
.menulien
{ //tes liens
display:block;
}


Puis niveau HTML sa donne :


<div class="menu">
<div class="menucat">Categorie 1</div>
<a href="#" class="menulien">
Lien 1</a>
<a href="#" class="menulien">
Lien 2</a>
<a href="#" class="menulien">
Lien 3</a>
<a href="#" class="menulien">
Lien 4</a>
<div class="menucat">
Categorie 2</div>
<a href="#" class="menulien">
Lien 1</a>
<a href="#" class="menulien">
Lien 2</a>
<a href="#" class="menulien">
Lien 3</a>
<a href="#" class="menulien">
Lien 4</a>
<div class="menucat">
Categorie 3</div>
<a href="#" class="menulien">
Lien 1</a>
<a href="#" class="menulien">
Lien 2</a>
<a href="#" class="menulien">
Lien 3</a>
<a href="#" class="menulien">
Lien 4</a>
</div>




Bon après tu règles tes marges et tes couleurs dans ton css comme tu le veux ;)
Hors ligneJlb59 Le 27/08/2007 à 05:47 Profil de Jlb59 Configuration de Jlb59

Super néophite !
Merci Darkingod,

Ce prb a été résolu, mais il est vrai qu'un menu dans un tableau, c'est tellement plus facile !
--
Cordialement, JLB59
Hors ligneAnthony Le 27/08/2007 à 08:38 Profil de Anthony Configuration de Anthony

Admin
Salut,

Perso j'aurais fait le menu de façon sémantique avec des listes, de ce style :

<dl>
<dt>
Categorie 1</dt>
<dd>
<a href="#" class="menulien">Lien 1</a></dd>
<dd><a href="#" class="menulien">Lien 2</a></dd>
<dd><a href="#" class="menulien">Lien 3</a></dd>
<dd><a href="#" class="menulien">Lien 4</a></dd>
<dt>Categorie 2</dt>
<dd><a href="#" class="menulien">Lien 1</a></dd>
<dd><a href="#" class="menulien">Lien 2</a></dd>
<dd><a href="#" class="menulien">Lien 3</a></dd>
<dd><a href="#" class="menulien">Lien 4</a></dd>
<dt>Categorie 3</dt>
<dd><a href="#" class="menulien">Lien 1</a></dd>
<dd><a href="#" class="menulien">Lien 2</a></dd>
<dd><a href="#" class="menulien">Lien 3</a></dd>
<dd><a href="#" class="menulien">Lien 4</a></dd>
</dl>


Après tu mets en forme dans la CSS les catégories via

dt{

}

et puis les listes via

dd{

}
--

Hors ligneJlb59 Le 27/08/2007 à 21:19 Profil de Jlb59 Configuration de Jlb59

Super néophite !
Salut,

Merci mais j'ai résous le prb.
--
Cordialement, JLB59
Vous avez résolu votre problème avec VIC ? Faites-le savoir sur les réseaux sociaux !
Vulgarisation-informatique.com
Cours en informatique & tutoriels