Aligner une image et une liste

Bonsoir à tous !

J'ai actuellement un petit souci, j'ai fait une petite page et en haut de celle-ci j'ai un logo et un menu en liste horizontale. Mon seul petit problème c'est que je n'arrive pas à aligner les deux éléments. La seule chose que j'arrive à faire c'est de mettre des float mais le résultat est plutôt douteux... Idéalement je voudrais avoir le menu aligné avec le logo avec un peu d'espacement entre les deux éléments. Voici mon code :

<div class="header">
		
			<img src="images/logo.png" alt="logo">
		
			<ul id="nav">
				<li><a href="#">Accueil</a></li>
				<li><a href="#">Vid&eacute;os</a></li>
				<li><a href="#">Projets</a></li>
				<li><a href="#">&Eacute;quipe</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
			
		</div>

Et le CSS :

.header {
	width:950px;
	height:95px;
	margin:0px auto;
	padding:0px 0px 0px 0px;

}

ul#nav li { 
	display : inline;
	padding : 0 0.5em;
}
ul#nav {
	list-style-type : none;
}

Voili voilou, si vous avez une idée je suis preneur

Merci d'avance !
Modifié par TheRabbit (02 Mar 2011 - 00:23)

Qu'entends-tu par "aligner les deux éléments" ?
S'il s'agit de les mettre l'un à côté de l'autre, sans doute que le float:left sur l'image avec une margin pour créer l'espace entre les deux devrait suffire. Tu peux aussi essayer un vertical-align middle sur l'image.
Modifié par Jordi (03 Mar 2011 - 11:02)