28172 sujets

CSS et mise en forme, CSS3

Bonjour a tous,

Je suis en train de réaliser un site et j'essaye de le faire tout propre en html5/css3 en respectant vraiment a 100% la sémantique et en faisant quelque chose d'identique peu importe le navigateur.

Il me reste un hic que je n'arrive pas a résoudre du tout, j'ai tenté tellement de chose que je crois que le code en devient un peu caca et j'aurai besoin de votre aide pour m'aider a corriger le problème

Ci joint le rendu sur IE (identique a ce que je voudrai) et celui sur firefox (qui fait péter tout mon alignement).
IE: http://imageshack.us/photo/my-images/209/44819438.png/
Firefox: http://imageshack.us/photo/my-images/684/43270373.png/


Voici le code du footer:

	<div id="footer">
			<div id="footermenu">
				<img src="images/logo_team_transparent.png" alt="Rallye des Gazelles Team" style="float: left;" />
				<h1 style="margin-top: 25px;">Des Airs de Femmes</h1>
				<ul>
					<li><a href="#">- Accueil</a></li>
					<li><a href="#">- Qui sommes nous</a></li>
					<li><a href="#">- Le rallye Aïcha des gazelles</a></li>
					<li><a href="#">- Sponsoring</a></li>
					<li><a href="#">- Mediatisation</a></li>
				</ul>
				<ul>
					<li><a href="#">- Actualités</a></li>
					<li><a href="#">- Calendrir</a></li>
					<li><a href="#">- Livre d'or</a></li>
					<li><a href="#">- Photos</a></li>
					<li><a href="#">- Vidéos</a></li>
				</ul>
				<ul>
					<li><a href="#">- Facebook</a></li>
					<li><a href="#">- Contact</a></li>
					<li><a href="#">- Mentions légales</a></li>
				</ul>		
			</div>
			
			<div id="compteur">
				<p>
					Visiteur depuis le 01/09/2012
					<br /><br />
					123456
				</p>
			</div>
			
			<div id="certificat">
				<p>
				<img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_32.png" alt="HTML 5 Valide !" />
				<img src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="CSS 3 Valide !" />
				</p>
			</div>
		</div>


Merci d'avance pour votre aide ^^
Après avoir encore creusé il semblerai que le float: left; de l'image juste avant les listes soit la raison de mon problème (j'ai fait un <br style="clear: both" /> après l'img et les listes se retrouvent en bas du footer mais bien alignées comme il faut

Ci joint la partie de la feuille de style qui pourrait vous aiguiller:

#footer{
background-color: #bc9b5b;
width: 1236px;
min-height: 225px;
padding: 10px;
}

#footer img{
margin: 10px;
}

#footermenu ul{
float: left;
list-style-type: none;
margin-right: 20px;
}


#footermenu ul li a{
font-size: 12px;
color: #46124e;
text-decoration: none;
}

#footermenu ul li a:hover{
color: #984063;
}

#footermenu{
float: left;
}

#compteur{
float: left;
position: relative;
left: 200px;
width: 350px;
font-family: Verdana, Arial, Sans-serif;
font-size: 12px;
color: #e5dccb;
text-align: center;
}

#certificat{
margin-top: 80px;
padding-right: 100px;
float: right;
}

#certificat img{
padding: 0;
margin: 0;
}