Titre: [CSS] Bloc qui se centre après chargement
Posté par: Nheavy le le 26-04-2011 a 21:08:28
Bonjour,
j'ai un petit soucis sur mon site:
la barre de navigation s'aligne à gauche avant de se centrer alors que moi je souhaitais qu'il se centre direct comme c'est le cas de la plupart des autres cadres ...
Je venais donc me renseigner ici et prendre quelques avis éclairés ^^
Voici tout d'abord le code [HTML] qui compose ma barre de navigation:
Code:
<div id="headermenu">
<div id="menuh">
<ul id="nav">
<li class="elemmenuh"><a href="/">Accueil</a></li>
<li class="elemmenuh"><a href="/blog.html">Nouveautés</a></li>
<li class="elemmenuh"><a href="/forum.html">Forum</a></li>
<li class="elemmenuh"><a href="/livredor.html">Livre d'or</a></li>
<li class="elemmenuh"><a href="/zonemembre.html">Espace Membre</a></li>
<li class="elemmenuh"><a href="mailto: admin@live.fr">Contact</a></li>
<li class="elemmenuh"><a href="/forum-cat-71823.html">Liens Morts?</a></li>
<li class="elemmenuh"><a href="javascript:void(favoris());">Ajouter aux favoris</a></li>
</ul>
<br/>
<table class="rech"><tr><td>
<table width="956" align="center"><tr><td align="right">
<form id="recherche" action="">
<label for="titre">Titre du manga : <input id="titre" name="titre" type="text" style="width:100px"/></label>
<label for="Version">Version : </label>
<select id="Version" name="Version">
<option value="toutes" selected="selected">Toutes</option>
<option value="VF">VF</option>
<option value="VOSTFR" >VOSTFR</option>
</select>
<label for="num">N° : <input id="num" name="num" type="text" style="width:50px" />
<input type="button" value="Rechercher" onclick="rechercheEpisode(this.form.titre.value, this.form.Version.value, this.form.num.value)"/>
</label>
</form>
</td></tr></table>
<br/>
<center><table id="resultat" style="display:none" width="614px" cellspacing="0" cellpadding="0">
<tr>
<td>
<div id="resultRech" style="text-align:center"></div></td>
</tr>
</table></center>
</td></tr></table></div>
</div>
|
|
Ensuite voici le [CSS] qui accompagne les objets:
Code:
#headermenu
{}
/* MENU HAUT HORIZONTAL */
#menuh
{
background-repeat:repeat-x;
background-position:top center;
background-image: url(http://s3.e-monsite.com/2010/11/20/01/NAV.jpg);
margin-top: -20px
}
/* Style des liens dans le menu haut horizontal*/
#menuh a
{
color:#FFFFFF;
font-size:14px;
font-weight:bold;
text-decoration:none;
line-height:30px;
padding:0 10px;
z-index:100;
}
/* Style des liens dans le menu haut horizontale, une fois survolé*/
#menuh a:hover
{
color:#ffffff;
text-decoration:underline;
}
/* MENUS DEROULANTS */
#nav ul li
{margin:0 auto; width:999px;}
#nav
{}
#nav ul
{}
#nav ul li a
{}
#nav ul a.hover
{}
#nav ul a
{}
/* FIN MENUS DEROULANTS */
/* FIN DU MENU HAUT HORIZONTAL */ |
|
Voila, je ne comprends pas pourquoi ça marche pas et je me suis pris la tête a essayer toutes sortes de combinaison avec les:
Code:
mais sans succés :(
Quelqu'un pourrait-il m'aider à résoudre mon problème s'il vous plait? |
Titre: Re:[CSS] Bloc qui se centre après chargement
Posté par: Nheavy le le 27-04-2011 a 21:08:23
| Personne n'aurait une petite idée sur l'affaire? |
Titre: Re:[CSS] Bloc qui se centre après chargement
Posté par: Apollinaire le le 28-04-2011 a 00:11:24
Bonsoir,
Qu'est ce que cela donne en enlevant les balises center, et en mettant sur le ul (tout en gardant son width défini) un margin : 0 auto + un overflow : hidden ?
Car sinon le ul n'englobe pas les li qui sont flottants.
Bonne continuation.
Ps : Il manque un r à inscrivez vous à la newsletter. |
Titre: Re:[CSS] Bloc qui se centre après chargement
Posté par: Nheavy le le 28-04-2011 a 01:33:22
Bonsoir,
Je viens d'essayer plusieurs façon d'intégrer le [overflow : hidden] mais sans succès :( , rien n’a changé au niveau du centrage. J'ai un peu changé le [CSS], j'esperais que ça fonctionne mieux bien que ça ne soit pas le cas. Ca donne ça maintenant:
Code:
#menuh
{
background-repeat:repeat-x;
background-position:top center;
background-image: url(http://s3.e-monsite.com/2010/11/20/01/NAV.jpg);
margin-top: -20px
}
/* Style des liens dans le menu haut horizontal*/
#menuh a
{
color:#FFFFFF;
font-size:14px;
font-weight:bold;
text-decoration:none;
line-height:30px;
padding:0 10px;
z-index:100;
}
/* Style des liens dans le menu haut horizontale, une fois survolé*/
#menuh a:hover
{
color:#ffffff;
text-decoration:underline;
}
/* MENUS DEROULANTS */
#menuh #nav ul li
{}
#menuh #nav
{margin:0 auto;width:999px; overflow:hidden;}
#menuh #nav ul
{}
#nav ul li a
{}
#nav ul a.hover
{}
#nav ul a
{} |
|
et donc pour le [HTML] j'ai viré les balises <center> :
Code:
<ul id="nav">
<li class="elemmenuh"><a href="/">Accueil</a></li>
<li class="elemmenuh"><a href="/blog.html">Nouveautés</a></li>
<li class="elemmenuh"><a href="/forum.html">Forum</a></li>
<li class="elemmenuh"><a href="/livredor.html">Livre d'or</a></li>
<li class="elemmenuh"><a href="/zonemembre.html">Espace Membre</a></li>
<li class="elemmenuh"><a href="mailto: admin@live.fr">Contact</a></li>
<li class="elemmenuh"><a href="/forum-cat-71823.html">Liens Morts?</a></li>
<li class="elemmenuh"><a href="javascript:void(favoris());">Ajouter aux favoris</a></li>
</ul>
<table class="rech"><tr><td>
<table width="956" align="center"><tr><td align="right">
<form id="recherche" action="">
<label for="titre">Titre du manga : <input id="titre" name="titre" type="text" style="width:100px"/></label>
<label for="Version">Version : </label>
<select id="Version" name="Version">
<option value="toutes" selected="selected">Toutes</option>
<option value="VF">VF</option>
<option value="VOSTFR" >VOSTFR</option>
</select>
<label for="num">N° : <input id="num" name="num" type="text" style="width:50px" />
<input type="button" value="Rechercher" onclick="rechercheEpisode(this.form.titre.value, this.form.Version.value, this.form.num.value)"/>
</label>
</form>
</td></tr></table>
<center><table id="resultat" style="display:none" width="614px" cellspacing="0" cellpadding="0">
<tr>
<td>
<br/>
<div id="resultRech" style="text-align:center"></div></td>
</tr>
</table></center>
</td></tr></table> |
|
Merci beaucoup pour la faute de frappe, ça fait x temps que j'ai écris cette phrase et je ne m'en étais pas du tout rendu compte :-X
Je suppose que le problème vient des li, du fait qu'il se mettent sur une ligne au lieu de s'empiler, mais ça fait plus de 3 mois que je tente des trucs à mes heures perdues pour au final n'aboutir à rien :o
Merci d'avoir essayer de résoudre mon problème ;D |
Titre: Re:[CSS] Bloc qui se centre après chargement
Posté par: Apollinaire le le 28-04-2011 a 01:53:52
Disons que cela se fait suivant le chargement de la page et qu'il est compliqué d'influer davantage dessus. J'ai l'impression que le centrage se fait un peu plus rapidement tout de même mais bon ce n'est pas flagrant (et je n'ai pas chronométré).
Ceci étant c'est toujours plus propre. :P
Désolé de ne pas avoir davantage d'idées, peut être que quelqu'un en apportera une mais très honnêtement, personnellement, ça ne me choque et ne me dérange absolument pas. C'est un comportement normal.
Bonne fin de soirée ! |
Titre: Re:[CSS] Bloc qui se centre après chargement
Posté par: meditation le le 01-05-2011 a 17:02:07
si votre site utilise un système de cache, après les modifications, pensez à vider le cache, car le menu est limité à 785px sur votre site.
<ul id="nav" style="width: 785px;">
|
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|