Re
Je reprends les points que j'ai abordés au dessus et ensuite, j'essaie de te proposer quelque chose qui fonctionnerait
Pour le display:inline, il faut uniquement le mettre dans le sélecteur li et pas ul. Cette propriété te permet de modifier la manière dont va s'afficher la boite dans le flux de la page. De base, ul et li ont des comportements de type bloc (donc retour à la ligne après chaque fermeture de la balise)
Pour qu'une liste d'items s'affiche en ligne, tu spécifies display:inline dans le le li mais pas dans le ul.
C'est pour ça que tout à l'heure, ton menu s'affichait à droite du header. Il s'est affiché en ligne à cause du display:inline et maintenant, il s'affiche en dessous car tu as supprimé le display:inline.
En passant, j'ai vu que tu avais mis un visibilty:visible. Le menu n'avait pas disparu, il était juste sur le fond blanc et comme la police est blanche, on le voyait plus
Ensuite, la question du
*{
margin: 0;
padding: 0;
}
Ca avait été expliqué dans un billet sur je ne sais plus quel excellent blog
(Si je retrouve, je donnerai le lien)
Derrière cette astuce se cache 2 idées :
La première, consiste à initialiser les padding et margin de toutes les balises à 0. IE, FF, Opera (...) traitent les blocs différemment. Certains navigateurs appliquent par ex un certain padding aux hx etc ... Donc, pour ne pas te prendre la tête, on met ces 2 propriétés à 0 dans toute la page.
La deuxième idée, c'est de le dire une fois pour toute grâce au sélecteur universel * que tous les blocs ont ces propriétés là et tu n'as plus besoin de les répéter pour chaque sélecteur comme tu l'as fait avec #nav et li par exemple.
Autre chose, si tu définis toutes les tailles de police à 12px, tu peux le définir une fois pour toute dans le body et tu n'auras plus à le répétér pour tes p, a et li
------------------
Maintenant, si je devais construire le header, je créerai un div #header, qui a pour bg l'image et à l'intérieur, l'ul pour le menu et le div rechercher.
Ce qui donne pour le XHTML
<div id="header">
<ul id="nav">
<li id="t-nomasis"><a href="#">nomasis</a></li>
<li id="t-menu"><a href="#">menu</a></li>
<li id="t-contenu"><a href="#">contenu</a></li>
<li id="t-accueil"><a href="#">accueil</a></li>
</ul>
<div id="recherche">
<form action="/nomablog/index.php/" method="get">
<p class="field">rechercher <input name="q" id="q" type="text" size="15" value="" accesskey="4" /><input type="submit" class="submit" value="ok" /></p>
</form>
</div>
</div>
et pour la CSS :
#header{
width:750px;
background:url(http://nomasis.com/nomablog/themes/nomatheme/img/header.jpg) top no-repeat;
padding-top:112px; /*Ici la valeur pour que le menu se place là ou il faut par rapport au haut du header */
}
#header ul{
font-size: 12px;
color: #FFFFFF;
height: 22px;
text-align: left;
left: 410px;
width: 340px;
}
#header ul>li{
list-style: none;
display:inline;
}
Je dis pas que ça va tomber pile poil du premier coup hein
Il va falloir que tu fasses des réajustements sur les paddings pour que tout se cale au même endroit
Il m'apparait plus les logiques ensuite de mettre le padding: 6px 20px 6px 20px; dans le li et pas dans le a.
J'espère que je n'ai pas trop embrouillé et j'espère encore plus ne pas avoir fait d'erreur dans mes explications
Connexion
Inscription
Aide
Haut
Citer
