Membre
|
Bonjour.
Voici mon code :
<div style="width:75%;position:absolute;left:21%;z-index:1;"><br>
<div class="barre" style="width:15%;border-radius:20px 0px 0px 20px;"><a href="/index.php">ACCUEIL</a></div>
<div class="barre" style="width:15%;">LOGICIELS
<table class="links" style="width:100%;"><tr><td><a href="/logiciels/antares/index.php" title="Calculatrice multiplateforme écrite en Python">Antares</a></td></tr></table>
</div>
<div class="barre" style="width:13%;">WEB
<table class="links"><tr><td><a href="/web/resizer/index.php">Web-Resizer</a></td></tr></table>
</div>
<div class="barre" style="width:17%;">COMMUNAUTÉ
<table class="links">
<tr><td><a href="/forum/index.php">Forum</a></td></tr>
<tr><td><a href="/livre.php">Livre d'or</a></td></tr>
<tr><td><a href="/tchat.php">Tchat</a></td></tr>
</table>
</div>
<div class="barre" style="width:15%;border-radius:0px 20px 20px 0px;"><a href="/contact.php">CONTACT</a></div>
</div>
La CSS :
.barre {float:left;padding:7px 0px;cursor:pointer;text-align:center;}
.barre a, .barre {color:#ffffff;font-weight:bold;text-decoration:none;text-shadow:1px 1px 0px #333333;}
.barre:hover .links {display:block;margin-top:7px;}
.barre a:hover, .barre:hover {color:#ffffff;text-decoration:none;text-shadow:2px 2px 3px #000000;}
.links {display:none;margin-bottom:-6px;}
.links a, .links a:hover {color:#000000;font-size:16px;text-decoration:none;text-shadow:none;}
.links td {background:None;}
.barre, .links tr {background-color:rgba(62,102,255,0.8);}
.links tr:hover {background-color:aqua;}
Et le site : http://free-apps.evoconcept.net/
Problème : Les tableaux permettant l'affichage des liens du menu prennent l'espace minimum qui leur est nécessaire.
J'ai tout essayé en matière de width="100%" et de width:100% dans ma CSS. J'ai essayé sur tous les éléments, tableaux, tr, td... Mais ça ne change rien.
Je pourrais le faire fonctionner en ajoutant des divs, comme je le faisait avant, mais mon but est aussi de diminuer le nombre de containers et de simplifier le code.
Merci pour votre aide.
|
Admin
|
Bonjour,
essaye:
<div style="width:75%;position:absolute;left:21%;z-index:1;"><br>
<div class="barre" style="width:15%;border-radius:20px 0px 0px 20px;"><a href="/index.php">ACCUEIL</a></div>
<div class="barre" style="width:15%;">LOGICIELS
<div class="links"><a href="/logiciels/antares/index.php" title="Calculatrice multiplateforme écrite en Python">Antares</a></div>
</div>
<div class="barre" style="width:13%;">WEB
<div class="links"><a href="/web/resizer/index.php">Web-Resizer</a></div>
</div>
<div class="barre" style="width:17%;">COMMUNAUTÉ
<div class="links">
<a href="/forum/index.php">Forum</a>
<a href="/livre.php">Livre d'or</a>
<a href="/tchat.php">Tchat</a>
</div>
</div>
<div class="barre" style="width:15%;border-radius:0px 20px 20px 0px;"><a href="/contact.php">CONTACT</a></div>
</div>
et
.barre {float:left;padding:7px 0px;cursor:pointer;text-align:center;}
.barre a, .barre {color:#ffffff;font-weight:bold;text-decoration:none;text-shadow:1px 1px 0px #333333;}
.barre:hover .links {display:block;margin-top:7px;}
.barre a:hover, .barre:hover {color:#ffffff;text-decoration:none;text-shadow:2px 2px 3px #000000;}
.links {display:none;margin-bottom:-6px;}
.links a {display:block;color:#000000;font-size:16px;text-decoration:none;text-shadow:none;background-color:rgba(62,102,255,0.8);}
.links a:hover {background-color:aqua;}
Et je ne vois pas pourquoi tu uttilise des tableaux.
Cordialement
|
Membre
|
Merci. Désolé pour le retard, je n'ai pas vu qu'il y avait eu des réponses.
Pour les tableaux bah... C'est ici que j'ai demandé pour mon menu et c'est vous même qui m'aviez proposé quelque chose avec des tableaux il me semble. 
Les codes fonctionnent. Merci encore.
|
