28173 sujets

CSS et mise en forme, CSS3

Décalages sans fin :(

Salut tout le monde...voilà, je suis nouveau, et je trouve ce site très bien, c'est pour ça que je me suis inscrit...Mais aussi, parce que j'ai un problème de décalage...Je m'explique :
Sur IE 6, c'était presque parfait (il y avait un tout p'tit décalage d'1 pixel entre mon menu, mon corps, et le footer). Mais il y a quelques jours, je suis passé sous IE 7, et là, quelle surprise, que des décalages, on ne pouvait plus descendre la page, etc...Donc j'ai corrigé mon style CSS, et j'ai presque fini, cependant, j'ai un décalage. Et à chaque fois que j'arrive à le retirer, il y en a un autre qui apparaît.

Ma question est plutôt simple, j'aimerai savoir : est-il possible d'attacher mon corps à l'image du menu, et d'attacher l'image du bas (footer) au corps, afin que lorsque je fais des retours à la lignes, tout se suive parfaitement (que ça soit extensible à l'infini, et sans décalages) ?

Merci beaucoup, je compte sur vous Smiley cligne 

<style type="text/css">
body {
background-image : url(arr_plan.gif); 
background-repeat : repeat-x; 
background-attachment : fixed; 
background-color : #7f7f7f; 
margin : auto; 
width : 1000px; 
margin-bottom : 10px; 
} 
#bloc {
background-color : #666666; 
background-image : url(bckgr_menu.gif); 
background-repeat : repeat-y; 
margin : auto; 
width : 1000px; 
border-left : 1px solid white; 
} 
#header {
width : 1000px; 
height : 200px; 
background-image : url(tobit_g6_black.png); 
background-repeat : no-repeat; 
margin : auto; 
border-left : 1px solid white; 
border-right : 1px solid white; 
} 
#menu_haut {
width : 1000px; 
background-image : url(menu.gif); 
background-repeat : no-repeat; 
margin : auto; 
font-family : Verdana, Arial, Helvetica, sans-serif; 
font-size : 10px; 
padding-top : 9px; 
padding-bottom : 9px; 
border-top : 1px solid white; 
border-left : 1px solid white; 
border-right : 1px solid white; 
} 
#menu_haut a {
color : #ff9900; 
text-decoration : none; 
} 
#menu_haut a:hover {
color : #666666; 
} 
#img_haut {
width : 1000px; 
height : 35px; 
background-image : url(img_corps.gif); 
background-repeat : no-repeat; 
margin : auto; 
border-right : 1px solid white; 
border-left : 1px solid white; 
} 
#menu {
float : left; 
width : 239px; 
background-color : #666666; 
background-image : url(bckgr_menu.gif); 
background-repeat : repeat-y; 
} 
#menu h5 {
font-family : Verdana, Arial, Helvetica, sans-serif; 
background-color : #333333; 
color : white; 
text-align : center; 
border : 1px solid; 
border-color : #ff9900; 
margin-left : 20px; 
margin-right : 20px; 
} 
#menu a {
color : black; 
font-family : Verdana, Arial, Helvetica, sans-serif; 
font-size : 11px; 
text-decoration : none; 
} 
#menu a:hover {
color : white; 
background-color : #333333; 
border : 1px solid; 
border-color : #ff9900; 
padding : 2px; 
} 
#menu ul {
list-style-image : url(puce2.gif); 
} 
#menu img {
border : 1px solid white; 
} 
#corps {
width : 750px; 
padding : 5px; 
background-color : #333333; 
border : 1px solid white; 
font-family : Verdana, Arial, Helvetica, sans-serif; 
font-size : 11px; 
position : absolute; 
} 
#corps a {
color : #ff9900; 
font-family : Verdana, Arial, Helvetica, sans-serif; 
font-size : 11px; 
text-decoration : underline; 
} 
#corps a:hover {
color : #0066ff; 
text-decoration : none; 
} 
#corps ul {
list-style-image : url(puce2.gif); 
} 
#img_bas {
width : 1000px; 
height : 35px; 
background-image : url(img_bas.gif); 
background-repeat : no-repeat; 
margin : auto; 
border-right : 1px solid white; 
border-left : 1px solid white; 
margin-bottom : 0; 
} 
#img_bas2 {
width : 1000px; 
height : 35px; 
border-right : 1px solid white; 
border-left : 1px solid white; 
border-bottom : 1px solid white; 
background-image : url(img_bas2.gif); 
background-repeat : no-repeat; 
margin-top : 0; 
} 
#copyright {
font-family : Verdana, Arial, Helvetica, sans-serif; 
font-size : 9px; 
color : #333333; 
text-align : center; 
margin-top : 10px; 
} 
#copyright a {
color : white; 
text-decoration : none; 
} 
#copyright a:hover {
color : black; 
} 
.Style1 {
color : #ff9900; 
} 
.Style2 {
color : #ffffff; 
} 
.Style6 {
color : #333333; 
} 
.Style7 {
font-family : Verdana, Arial, Helvetica, sans-serif; 
font-size : 11px; 
color : #ffffff; 
} 
.Style8 {
font-family : Verdana, Arial, Helvetica, sans-serif; 
font-size : 11px; 
} 
.Style9 {
color : #ff3300; 
} 

-->
</style>

Modifié par Tobit (18 Nov 2006 - 11:55)
Peut-être qu'en rajoutant ceci :
* {
margin: 0;
padding: 0;
border: 0;
}

au début de ta feuille de style le problème sera solutionné.
Juste une idée comme ça.
Salut

Merci pour ta réponse, mais malheureusement, ça ne change rien...

J'ai le corps qui est attaché au footer, mais il n'est pas attaché au menu du haut.
J'ai mis une page en ligne, pour que vous voyez un peu mieux ce que je voudrais Smiley cligne

Sur cette page, le corps est attaché à l'image du haut, mais pas à l'image du bas.

Et si je fais des retours à la ligne dans le corps, il passe par dessus l'image du bas, alors que je voudrais que l'image du bas suivent l'extension du corps Smiley cligne

http://tobit.free.fr/accueil2.htm
J'ai mis une page en ligne, pour que vous voyez un peu mieux ce que je voudrais Smiley cligne

Sur cette page, le corps est attaché à l'image du haut, mais pas à l'image du bas.

Et si je fais des retours à la ligne dans le corps, il passe par dessus l'image du bas, alors que je voudrais que l'image du bas suive l'extension du corps Smiley cligne

http://tobit.free.fr/accueil2.htm
Modifié par Tobit (18 Nov 2006 - 11:56)
Il faut que tu mettes ta div corps en position relative avec un overflow. Ça devrait régler ton problème.

#corps {
width : 750px; 
padding : 5px; 
background-color : #333333; 
border : 1px solid white; 
font-family : Verdana, Arial, Helvetica, sans-serif; 
font-size : 11px; 
position : relative;
overflow: auto; 
}
Alors, j'ai essayé, et voici mon résultat :

- pour l'image, c'est parfait, quand je fais des retours à la ligne, elle suit le corps.

- par contre, le corps est sous mon menu de gauche, alors que je voudrais qu'il soit à droite du menu de gauche (aligné), et sous le menu du haut.

Merci Smiley cligne
Et bien...je voudrai que l'image du bas, soit collée au corps.

Tout en ayant le corps collé à l'image du haut, ce qui est déjà fait sur ton aperçu.

En fait, le design ne doit former qu'un seul bloc de forme rectangulaire.

J'espère que je suis pas (plus) très confu Smiley cligne
Tobit a écrit :
Et bien...je voudrai que l'image du bas, soit collée au corps.


De quelle image parles-tu au juste? De la bande jaune? Ce serait peut-être mieux que tu montre ce que tu veux en image avec photoshop par exemple...
Oui. En fait, je voudrais que la barre jaune soit collée au corps, et collée à la barre grise juste en dessous de celle-ci Smiley cligne

Je te fais une image Smiley cligne
Sujet clos
Aller à