Probleme d' espace dans cellule
ced3E
Messages postés
101
Date d'inscription
Statut
Membre
Dernière intervention
-
coeus Messages postés 3021 Date d'inscription Statut Membre Dernière intervention -
coeus Messages postés 3021 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je viens de crée un menu image en html mais problème j' ai un espace dans mes cellules que je n' arrive pas a supprimer.
voila en image : http://ced3e.free.fr/
Merci d' avance de votre aide je joins aussi mon code :
Html
Css :
Je viens de crée un menu image en html mais problème j' ai un espace dans mes cellules que je n' arrive pas a supprimer.
voila en image : http://ced3e.free.fr/
Merci d' avance de votre aide je joins aussi mon code :
Html
<center> <table border="1" cellpadding="0" cellspacing="0" border="0" > <tr> <td width="138" height="40" align="center"> <ul id="menu1"> <li><a href="http://ced3e.free.fr/index.php?file=News" title=""></a></li> </ul> </td> <td width="220" height="40" align="center"> <ul id="menu2"> <li><a href="#" title="Classes"></a></li> </ul> </td> <td width="90" height="40" align="center"> <ul id="menu3"> <li><a href="#" title="aller à la section 1"></a></li> </ul> </td> <td width="90" height="40" align="center"> <ul id="menu4"> <li><a href="http://ced3e.free.fr/index.php?file=Gallery" title="aller à la sectison 1"></a></li> </ul> </td> <td width="80" height="40" align="center"> <ul id="menu5"> <li><a href="#" title="aller à la section 1"></a></li> </ul> </td> <td width="140" height="40" align="center"> <ul id="menu6"> <li><a href="http://ced3e.free.fr/index.php?file=Forum" title="Forum"></a></li> </ul> </td> <td width="142" height="40" align="center" background="themes/War3/images/menu7.png"> <font class="content"><form method="post" action="index.php?file=User&nuked_nude=index&op=modif_langue"> <div style="text-align: center;"><select name="user_langue" onchange="submit();"> <option value="">--------^-------</option> <option value="english" >english</option> <option value="french" >french</option> </select></div></form> </font></td> </tr> </table> </center>
Css :
#menu1 li a{ margin:0; padding: 0px 0px 0px ; list-style:none; background:#fff url(http://localhost/UPLOAD/themes/War3/images/menu1.png) no-repeat right top; position: relative; display:block; float:left; height:40px; width: 138px ; color:#aaa; font-weight:bold; text-align:center; cursor:pointer; } #menu1 li a:hover, #navigation li a:focus, #navigation li a:active { width: 138px ; height:40px; background: url(http://www.diablo3.arnogame.com/media/upload/diablo3/barbare.jpg) no-repeat right top; } #menu2 li a{ margin:0; padding: 0px 0px 0px ; list-style:none; background:#fff url(http://localhost/UPLOAD/themes/War3/images/menu2.png)no-repeat right top; position:relative; display:block; float:left; height:40px; width: 220px ; color:#aaa; font-weight:bold; text-align:center; cursor:pointer; } #menu2 li a:hover, #navigation li a:focus, #navigation li a:active { width: 220px ; height:40px; background: url(http://www.diablo3.arnogame.com/media/upload/diablo3/barbare.jpg) no-repeat right top; } #menu3 li a{ margin:0; padding: 0px 0px 0px ; list-style:none; background:#fff url(http://localhost/UPLOAD/themes/War3/images/menu3.png)no-repeat right top; position:relative; display:block; float:left; height:40px; width: 90px ; color:#aaa; font-weight:bold; text-align:center; cursor:pointer; } #menu3 li a:hover, #navigation li a:focus, #navigation li a:active { width: 90px ; height:40px; background: url(http://www.diablo3.arnogame.com/media/upload/diablo3/barbare.jpg) no-repeat right top; } #menu4 li a{ margin:0; padding: 0px 0px 0px ; list-style:none; background:#fff url(http://localhost/UPLOAD/themes/War3/images/menu4.png) no-repeat right top; position:relative; display:block; float:left; height:40px; width: 90px ; color:#aaa; font-weight:bold; text-align:center; cursor:pointer; } #menu4 li a:hover, #navigation li a:focus, #navigation li a:active { width: 90px ; height: 40px; background: url(http://www.diablo3.arnogame.com/media/upload/diablo3/barbare.jpg) no-repeat right top; } #menu5 li a{ margin:0; padding: 0px 0px 0px ; list-style:none; background:#fff url(http://localhost/UPLOAD/themes/War3/images/menu5.png) no-repeat right top; position:relative; display:block; float:left; height:40px; width: 80px ; color:#aaa; font-weight:bold; text-align:center; cursor:pointer; } #menu5 li a:hover, #navigation li a:focus, #navigation li a:active { width: 80px ; height:40px; background: url(http://www.diablo3.arnogame.com/media/upload/diablo3/barbare.jpg) no-repeat right top; } #menu6 li a{ margin:0; padding: 0px 0px 0px ; list-style:none; background:#fff url(http://localhost/UPLOAD/themes/War3/images/menu6.png) no-repeat right top; position:relative; display:block; float:left; height: 40px; width: 140px ; font-weight:bold; text-align:center; cursor:pointer; } #menu6 li a:hover, #navigation li a:focus, #navigation li a:active { width: 140px ; height:40px; background: url(http://www.diablo3.arnogame.com/media/upload/diablo3/barbare.jpg) no-repeat right top; }
A voir également:
- Probleme d' espace dans cellule
- Espace insécable - Guide
- Espace de stockage gmail plein - Guide
- Excel cellule couleur si condition texte - Guide
- Aller à la ligne dans une cellule excel - Guide
- Espace stockage google - Guide
3 réponses
Bonjour,
A mon avis, tu n'as pas besoin d'un tableau pour la mise en page de ton menu, utilise la balise UL (balise de type bloc) à bon escient, tu arriveras à un meilleur résultat tout en étant conforme à un Doctype xHTML Transitional, d'ailleurs je te conseille de pourvoir tes pages d'un Doctype bien défini et non pas juste de la balise HTML. Donc au final, ton fichier menu devrait ressembler à ceci :
Je te laisse arranger le fichier CSS pour configurer correctement la balise UL du menu ainsi que le formulaire du choix de la langue...
A mon avis, tu n'as pas besoin d'un tableau pour la mise en page de ton menu, utilise la balise UL (balise de type bloc) à bon escient, tu arriveras à un meilleur résultat tout en étant conforme à un Doctype xHTML Transitional, d'ailleurs je te conseille de pourvoir tes pages d'un Doctype bien défini et non pas juste de la balise HTML. Donc au final, ton fichier menu devrait ressembler à ceci :
<ul id="menu"> <li><a href="http://ced3e.free.fr/index.php?file=News" title=""></a></li> <li><a href="#" title="Classes"></a></li> <li><a href="#" title="aller à la section 1"></a></li> <li><a href="http://ced3e.free.fr/index.php?file=Gallery" title="aller à la sectison 1"></a></li> <li><a href="#" title="aller à la section 1"></a></li> <li><a href="http://ced3e.free.fr/index.php?file=Forum" title="Forum"></a></li> </ul> <form id="Language" method="post" action="index.php?file=User&nuked_nude=index&op=modif_langue"> <font class="content"> <select name="user_langue" onchange="submit();"> <option value="">Choose language...</option> <option value="english">English</option> <option value="french">Français</option> </select> </font> </form>
Je te laisse arranger le fichier CSS pour configurer correctement la balise UL du menu ainsi que le formulaire du choix de la langue...
Merci pour ton idée j' ai oublier de dir que chaque image est différentes et que sur la dernière cellule je dois coller mon select.
Quand je n' utilise pas de tableau j' ai un décalage de mon image du bas.
Je continu sur cette piste merci encore :)
Si d' autre personne ont des idées ?
Quand je n' utilise pas de tableau j' ai un décalage de mon image du bas.
Je continu sur cette piste merci encore :)
Si d' autre personne ont des idées ?
Considère la balise LI comme une cellule et tu peux parfaitement paramétrer celle-ci à partir de ton fichier CSS les propriétés de background, de margin, de padding, de width, etc... :
ul#menu li#menu1 {/* propriétés de la balise LI id=menu1 */} ul#menu li#menu2 {/* propriétés de la balise LI id=menu2 */} /* etc...*/ <ul id="menu"> <li id="menu1"><a href="http://ced3e.free.fr/index.php?file=News" title=""></a></li> <li id="menu2"><a href="#" title="Classes"></a></li> <li id="menu3"><a href="#" title="aller à la section 1"></a></li> <li id="menu4"><a href="http://ced3e.free.fr/index.php?file=Gallery" title="aller à la sectison 1"></a></li> <li id="menu5"><a href="#" title="aller à la section 1"></a></li> <li id="menu6"><a href="http://ced3e.free.fr/index.php?file=Forum" title="Forum"></a></li> </ul>
Salut,
Petit conseil comme ça, je pense que tu devrais doter chacun de tes <li> d'une classe ET d'un ID. Ainsi, tu te sers de la classe pour mettre en place tous les paramètres, et tu utilises l'ID pour définir uniquement le background-image (puisque c'est le seul attribut qui diffère entre chaque <li>).
Ou même, encore plus simple :
HTML :
CSS :
Et après tu définis les hover et tout le reste du tralala, tu vas bien trouver ! ;-)
Sinon, dis-nous si ReDLoG a résolu ton problème initial, de ce que je vois de ton site ç'a l'air pas mal ?
@+ !
Petit conseil comme ça, je pense que tu devrais doter chacun de tes <li> d'une classe ET d'un ID. Ainsi, tu te sers de la classe pour mettre en place tous les paramètres, et tu utilises l'ID pour définir uniquement le background-image (puisque c'est le seul attribut qui diffère entre chaque <li>).
Ou même, encore plus simple :
HTML :
<ul id="menu"> <li id="menu1">...</li> <li id="menu2">...</li> <li id="menu3">...</li> <li id="menu4">...</li> <li id="menu5">...</li> </ul>
CSS :
#menu li { background:#000000 none no-repeat; color: #AAAAAA; cursor: pointer; display: block; float: left; font-weight: bold; height: 40px; list-style: none outside none; margin: 0; padding: 0; position: relative; text-align: center; width: 220px; } #menu li#menu1 { background-image:url(lien/vers/image1.png); } #menu li#menu2 { background-image:url(lien/vers/image2.png); } #menu li#menu3 { background-image:url(lien/vers/image3.png); } #menu li#menu4 { background-image:url(lien/vers/image4.png); } #menu li#menu5 { background-image:url(lien/vers/image5.png); }
Et après tu définis les hover et tout le reste du tralala, tu vas bien trouver ! ;-)
Sinon, dis-nous si ReDLoG a résolu ton problème initial, de ce que je vois de ton site ç'a l'air pas mal ?
@+ !