28173 sujets

CSS et mise en forme, CSS3

Bonjour,

j'ai un petit soucis de mise en page sur mon site.
J'ai un conteneur en 3 parties :
(header)
contien une image avec mes boutons de menu.

(centre)
Contient lui aussi une image sur laquelle je placerais du texte par la suite.

(footer)
Contient du texte tout banal.

Mon problème est :

Entre chaque bloc, j'ai un petit écart, du coup, mon image se retrouve coupée par un trait.

Auriez - vous la solution à mon soucis ?


voici ma feuille:


body {
font-family: Arial;
font-size: 11px;
color: #06440f;
margin: 0;
padding: 0;
background: #e7efeb;

scrollbar-face-color: #b3c9b6;
scrollbar-track-color: #8ea992;
scrollbar-arrow-color: #FFFFFF;
scrollbar-3dlight-color: #06440f;
}

#conteneur {
position: absolute;
width: 800px;
left: 50%;
top:15px;
margin-left: -375px;

}
#header {
height: 129px;
background: #e7efeb;
}

#centre {
background: #e7efeb;
}

#footer {
height: 30px;
background: #e7efeb;
text-align: center;
font-family: Arial;
font-size: 9px;
color: #8ea992;
}

Modifié par Neophytes (12 Jun 2006 - 13:46)
Bonjour Neophytes et bienvenue,

En cas d'oubli, une fois un message posté, tu peux éditer le post afin de rajouter une information complémentaire.

De plus, l'une des règles de base du forum est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace). (cf boutons de mise en forme)

Je t'invite donc à éditer ton premier post afin d'y remédier.

Smiley smile
Bonjour,

Je ne vois pas le problème que tu soulève... Je vois effectivement des filets horizontaux qui séparent plus ou moins tes trois zones, mais à l'affichage des images ils appartiennent bien à l'image centrale... J'ai testé sur firefox et internet explorer mais aucun des deux n'a révélé de problème de coupure dans le design.
En fait, si.

En faisant un CTRL+A sur la page, tu t'apercevra qu'un trait d'environ
3 à 5 pixel apparaît entre chaque bloc. Et le plus gênant de ces traits
coupe l'image sur la partie gauche (la plante qui pousse) entre le le bloc centre et le bloc header.

Je ne vois pas comment enlever cette zone.
Ah ben ca le faisait pas y'a 5mn et la si ^^

Sur firefox ca passe niquel...

Pour info, ton conteneur fait 800px de large, ce qui va poser problème aux internautes en 800x600 (20% des internautes encore à l'heure actuelle), il faudrait donc réduire cette taille à un maximum de 780px pour faire bien. De plus, ton
margin-left: -375px;
devrait être à 400px pour le cas ou ton conteneur fait 800. Pour un conteneur de 780, il te faudra donc avoir un
margin-left: -390px;


pour ton soucis de coupure, je ne trouve pas d'ou ca vient.

Edit: tu utilise des attribus de mise en forme dans ton code html
border="0"

Ca serait mieux d'utiliser la propriété CSS :
img {
border: 0;
}

Modifié par Mikachu (12 Jun 2006 - 16:17)