Souci de positionnement des mes colonnes en float [résolu]

Bonjour,

Je viens vous demandé de m'éclairer, je bute sur une erreur d'écriture de mon css au niveau de mon footer, vous conviendrez en regardant ma page de démo ( http://www.dieteticien-nutritionniste-sante.com/essai/ ) , qu'il y a un décalage de la colonne de gauche.

Voici mon code css correspondant:

/* FOOTER */

footer { width: 100%; position: absolute; z-index: 95; left: 0; clear:both; background: url(../images/footer-border.png) repeat-x top center rgba(198, 226, 81, .7); }
footer { /width: 100%; /position: absolute; /z-index: 95; /left: 0; /clear:both; /background: url(../images/footer-border.gif) repeat-x top center rgba(198, 226, 81, .7); }
footer span { color:#fff; font-weight:bold;}
.col3 { position: relative; float:left; left:-90px; bottom:-30px; width: 23px; z-index: 96;}
.col3 img {border:none;}
footer a { color:#5b5b5b; text-decoration: none; outline:none;}
footer a:hover{ color:#5b5b5b; text-decoration: underline}
#blocfooter {display:block; width:780px; background:none; margin:10px auto; padding:10px; color:#fff;}
#blocfooter div { padding:5px 0px 10px 0px; }
#blocfooter div a { padding:5px 10px 10px 10px; }
div#ex1 { float: left; left:0px; width: 250px; height: 280px; margin-right: 10px; background: rgb(148, 182, 9); background: rgba(148, 182, 9, 0.5);}
div#ex2 { overflow: hidden; height: 280px; background: rgb(148, 182, 9); background: rgba(148, 182, 9, 0.5);}
div#ex3 { float: right; width: 250px; height: 280px; margin-left: 10px; background: rgb(148, 182, 9); background: rgba(148, 182, 9, 0.5);}
#legal { margin:0 auto; padding: 10px 15px 20px 15px; background:#c6e251; border-top:thick dotted #5b5b5b;}
.website {float: right;}

j'ai suivi le tuto de Raphael Goetter (alsacréation) pour la création des colonnes mais là je ne comprend pas pourquoi ce décalage

Une idée ?
Modifié par dafid5 (07 Oct 2011 - 08:16)

hello
c'est ta <div class="col3"> que tu as mis en relative.
Visuellement elle est au bon endroit, mais dans le flux elle a gardé sa place, il faut que tu trouve une autre solution pour son positionnement.

j'espère t'avoir aidé .
++

merci je vais voir comment faire !!

penses tu que mettre mon image en background pourrais être une bonne solution ?

connais tu une autre solution peux être plus pro et adaptable sur tous les navigateurs ?

ex:
#blocfooter .col3 {background-image: url("../images/menu-rapid.png") no-repeat fixed; background-position: -90px -30px; z-index: 96;}

probleme de float résolu MAIS mon image n'apparait plus

<footer>
<div id="blocfooter" class="col3">
<div id="ex1"><h3>Menus de saisons</h3>
<article>Découvrez nos idées de menus complets et économiques, variant en fonction des saisons et des occasions, et dans tous les cas atouts pour la santé et le porte monnaie! Parce que manger sain et équilibré est aussi possible avec des recettes pas chères pour des menus pas chers.</article>
<a href="#"> [Printemps] </a><br/><a href="#"> [&#201;té] </a><br/><a href="#"> [Automne] </a><br/><a href="#"> [Hiver] </a></div>
<div id="ex3"><h3>La boutique</h3>
<article>Matériel de cuisine de qualité professionnelle pour tous et notre sélection de livre cuisine indispensable</article>
<a href="#"> [livres de recettes] </a><br/><a href="#"> [ustensiles de cuisine indispensables] </a>
<h3>Les conseils</h3>
<a href="#"> [Comment équilibré ses repas] </a><br/><a href="#"> [Bien manger en fonction des saisons] </a></div>
<div id="ex2"><h3>Recettes minceur de chefs</h3>
<article>Cuisinez des recettes simples, raffinées et allegées.</article>
<a href="recettes-sauce-minceur.php"> </a><br/><a href="recettes-entree-minceur.php"> [entrées] </a><br/><a href="recettes-quiche-tarte-minceur.php"> [quiches & tartes] </a><br/><a href="recettes-poisson-minceur.php"> </a><br/><a href="recettes-volaille-minceur.php"> </a><br/><a href="recettes-viande-minceur.php"> </a><br/><a href="recettes-accompagnement-minceur.php"> </a><br/><a href="recettes-salade-composee-minceur.php"> [salades composées] </a><br/><a href="recettes-dessert-minceur.php"> </a><br/><a href="recettes-aperitif-minceur.php"> [apéritifs & cocktails] </a></div>
</div>
<div id="legal"><a href="legal.html" rel="#overlay">Infos légales</a> | <a href="conditions-generales.html" rel="#overlay">Conditions générales</a> | <a href="#">Contact</a> <span class="website">Nos recettes minceur &nbsp; &copy; 2011</span></div>
</footer>

le css spécifique à l'image col 3


#blocfooter .col3 {background-image: url("../images/menu-rapid.png") no-repeat fixed; background-position: -90px -60px; z-index: 96;}


une idée ?? ou solution

Problème complètement résolu, j'ai intégré mon image dans mon css via un background: url

et j'ai mis ce background dans une autre div encadrant mon menu du footer !

je ne sais pas s'il y avait une solution mieux que celle là, mais ça fonctionne