CSS : probleme d'affichage

besoin d'aide svp

15 août 2006 à 12:16:08

Salut

je suis en train de faire une page que vous pouvez voir ici :
http://masterlud1664.free.fr/portail/

et comme vous pouvez voir, à coté du menu horizontal, j'ai mis un petit formulaire de recherche.

et je n'arrive pas à bien le placer

voici mon menu :

<div id="tabsmenu">
<ul>
<li><a href="">Actualités</a></li>
<li><a href="">Forums </a></li>
<li><a href="">Tutoriaux</a></li>
<li><a href="">Téléchargements</a></li>
<li><a href="">Galerie</a></li>
<li><a href="">Outils</a></li>
<li><a href="">Annuaire</a></li>
<li><a href="">T'Chat</a></li>
<li><a href="">Contact</a></li>
</ul>

<form method="post" action="recherche.php">
<label><input type="text" name="recherche" size="14" /><input type="submit" name="submit" value="OK" /></label>
</form>
</div>

et le css correspondant :

/* tabs menu */
#tabsmenu {
position: absolute;
padding: 0;
margin: 0;
top: 84px;
text-transform: uppercase;
font-size: 10px;
line-height: normal;
}

body > #tabsmenu {
margin-left: 3%;
}
#tabsmenu ul {
margin: 0;
padding: 10px 10px 0;
list-style: none;
}
#tabsmenu li {
float: left;
background: url(images/tab_left.gif) no-repeat left top;
margin: 0 6px 0 0;
padding: 0 0 0 4px;
border-bottom: 3px solid #273C5C;
}
#tabsmenu a {
float: left;
display: block;
width: .1em;
background: url(images/tab_right.gif) no-repeat right top;
padding: 5px 10px 4px 6px;
text-decoration: none;
font-weight: bold;
color: #A1B2CC;
line-height : 12px;
white-space: nowrap;
}

#tabsmenu > ul a {width:auto;}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsmenu a {float:none;}
/* End IE5-Mac hack */
#tabsmenu a:hover {
color: #FFF;
}
#tabsmenu li:hover, #tabsmenu li:hover a {
background-position: 0% -150px;
color: #FFF;

}
#tabsmenu li:hover a {
background-position: 100% -150px;
/*height:16px;*/
}

il suffirait juste de remonter un peu le champs de recherche mais si je modifie la heuteur de tabsmenu alors les menus aussi se déplacent

comment je peux faire ?

merci de votre aide

LaoSeb

15 août 2006 à 12:19:20

Tu te rends compte de la façon dont tu nous présentes ton code !!!

Illisible...surtout je ne vois pas comment on peut avoir envie de t'aider dans ces conditions.

Masterlud

15 août 2006 à 12:54:57

oups en effet
j'avais pas relu mon topic désolé
je modifie ca tout de suite

Masterlud

16 août 2006 à 11:13:35

up svp

Curly

16 août 2006 à 11:35:06

utilise
l'attribut css "position"

Gregoo

16 août 2006 à 11:45:02

Salut,
j'ai trouvé une bonne méthode de paysan douteuse, mais qui fonctionne : celà consiste à mettre complètement ton formulaire dans la liste, et de spécifiquement virer toutes les propriété de la la liste sur cet élément précis :

<ul>
<li><a href="">Actualités</a></li>
<li><a href="">Forums </a></li>
<li><a href="">Tutoriaux</a></li>
<li><a href="">Téléchargements</a></li>
<li><a href="">Galerie</a></li>
<li><a href="">Outils</a></li>
<li><a href="">Annuaire</a></li>
<li><a href="">T'Chat</a></li>
<li><a href="">Contact</a></li>
<li class="paysan-pawaz"><form method="post" action="recherche.php"><label><input type="text" name="recherche" size="14" /><input type="submit" name="submit" value="OK" /></label></form></li>
</ul>

#tabsmenu ul li.paysan-pawaz { /* On annule toutes les propriétés de la liste */ }

Campagnement,
Gregoo

Candygirl

16 août 2006 à 12:23:21

Une méthode toute simple, tu le décalles avec le position relative comme cela t'a été proposé sur un autre forum (je me disais bien que j'avais déjà vu ce problème quelque part

). Par exemple:

#tabsmenu form {position:relative; bottom:5px;}