Créer un compte
Connexion

Problème tableau width 100%

Pour créer et répondre aux sujets, vous devez être connecté.
Ce sujet est résolu.
Pages: 1
Auteur Message
Spitfire 95
21/02/2011 à 19:22:13
Spitfire 95
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.

Spitfire 95
23/02/2011 à 20:10:41
Spitfire 95
Membre
Up svp

ybouane
25/02/2011 à 05:09:16
ybouane
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 :)

Image
Spitfire 95
20/04/2011 à 10:59:09
Spitfire 95
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.  :0
Les codes fonctionnent. Merci encore.

Pages: 1