28172 sujets

CSS et mise en forme, CSS3

Bonjour,
j'ai suivi le tuto proposé par Florent V. sur ce même site pour réaliser un mise en forme en div + css 3 colonnes.

Tout s'est bien passé sur l'ensemble des navigateurs mac et pc, sauf sous IE6 où tout part en sucette. J'ai lu dans le forum le bug du three pixel jog, mais les solutions proposées ne sont pas compatibles (à mon avis) avec l'aspect de ma page. En effet il s'agit comme vous pouvez le constater ci-dessus d'une image découpée en plusieurs morceaux, donc les margin -3 px et compagnie ne me semblent pas appropriés...
upload/29771-copieecran.jpg
La partie qui nous intéresse pour le moment est la div a2, là où il y a la maison.

Ci-dessous le css de la page, dont voici l'adresse en ligne : www.creperie-moulin-juzet.fr

Les div concernées se nommes a1 ; a2 et a3-accueil (b1, b2 et b3 ont subit les tests et ne sont surement pas correctement mises en places, ne pas s'en occuper.)

Quelqu'un aurait-il une solution ? Merci d'avance, aux bout de plusieurs heures de recherche, je commence à me demander si ce problème est solutionnable...

@charset "utf-8";
#wrapper {
margin: 0px;
padding: 0px;
width: 100%;
height: 600px;
}

#foot {
margin: 0px;
padding: 0px;
height: 27px;
width: 800px;
}
#logo {
margin: 0px;
padding: 0px;
height: 149px;
width: 345px;
float: left;
}
#menutitre {
padding: 0px;
height: 149px;
width: 455px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #FF9900;
float: left;
margin-left: 0px;
}
#titre {
padding: 0px;
height: 103px;
width: 455px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #FF9900;
float: left;
}
#menu {
padding: 0px;
height: 46px;
width: 455px;
margin: 0px;
float: left;
background-color: #99CCFF;
}

#a1 {
margin: 0px;
padding: 0px;
height: 268px;
width: 345px;
float: left;

}
#a2 {
padding: 0px;
height: 268px;
width: 242px;
margin-top: 0px;
margin-right: 213px;
margin-bottom: 0px;
margin-left: 345px;
overflow: hidden;

}

#a3 {
height: 268px;
width: 213px;
float: right;
}
#a3_accueil {
background-image: url(img/07-creperie-moulin-juzet_07.jpg);
height: 238px;
width: 213px;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
line-height: 18px;
float: right;
}
#ligne1 {
margin: 0px;
padding: 0px;
height: 268px;
width: 800px;
}
#b1 {
margin: 0px;
padding: 0px;
height: 156px;
width: 345px;
float: left;
}
#b2 {
margin: 0px;
padding: 0px;
height: 156px;
width: 242px;
float: left;
}
#b3 {
margin: 0px;
padding: 0px;
height: 156px;
width: 213px;
float: left;
}
#ligne2 {
margin: 0px;
padding: 0px;
height: 156px;
width: 800px;
}
#head {
margin: 0px;
padding: 0px;
height: 149px;
width: 800px;
}
#page {
padding: 0px;
height: 600px;
width: 800px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#contenu {
margin: 0px;
padding: 0px;
height: 424px;
width: 800px;
Modifié par yozarus (21 May 2010 - 09:28)