Bonjour,
j'ai repris plus ou moins ton code et adapté à mon goût dans ce fiddle :
http://jsfiddle.net/cZXzX/
Il y a beaucoup de techniques pour placer 2 éléments côte à côte en CSS, la plus utilisée restant les flottants, une autre étant d'utiliser display: inline-block mais en 2013 (*) pour ce genre de mise en page je préfère la mise en page avec display: table-cell et table (mise en page = CSS, je ne parle évidemment pas d'une structure - HTML - en tableaux avec les éléments table, tr, td... Beurk, sauf quand on affiche des données tabulaires
)
Compatibilité : IE8+
Avantages : les éléments vont forcément rester sur une même ligne et auront la même hauteur, ce qui est bien pratique quand ils ont des images de fond ! Quel que soit l'élément le plus haut, l'autre aura la même hauteur.
La navigation est alignée verticalement en bas : le bas du logo sera aligné avec le bas du menu parce que je pense que c'est le cas le plus courant mais bien entendu tu peux aligner par le haut ou centrer (valeur : middle).
Pour aborder le positionnement en CSS, les 3 articles de référence de L. Denis sont sur Openweb :
http://openweb.eu.org/articles/initiation_flux/
Pour le modèle tabulaire, l'article de Raphaël :
http://www.alsacreations.com/tuto/lire/1522-le-modele-tabulaire-en-css.html
Quelques remarques sur le code :
- ne pas styler les éléments HTML5 header, footer, aside directement : il peut y en avoir plusieurs dans une page (par exemple un aparté dans une <section> ou un <article> devrait utiliser l'élément aside, aussi). Ne pas utiliser non plus un sélecteur comme body>header pour ne sélectionner que "le" header (de la page), on peut très bien avoir un élément div entre les 2 pour des raisons de mise en page... Bref, le plus simple est de rajouter une classe ou un id (en général l'entête de la page a un style unique qui n'est repris nulle part ailleurs dans les pages ... un id convient donc) et d'utiliser cette classe/id comme sélecteur
- un menu de navigation doit être une liste de liens (ul li a). En HTML5, cette liste doit être contenue dans un élément nav, c'est ce qui correspond à la sémantique d'un menu de navigation.
(*) on oublie IE6 et 7 ou en tout cas on obtiendra pas le même résultat sur ces 2 vieilleries)
