Contenu figé en haut de page

Bonjour à tous!

Mon problème est le suivant: la div "corps" reste bloquée tout en haut de la page du site.
J'ai beau essayer de la descendre dans le css avec les commandes "border-top", ou "top", ou "border-bottom", ou "bottom", rien n'y fait! Elle reste figée tout en haut de page.

J'ai essayé de changer les positions "relative" pour "absolute" du contenu, mais ça ne change pas la fait que ça ne réponde plus aux commandes de positionnement vertical?

J'ai choisi les positions "relative" car je fait un site extensible, avec image "background" extensible également, en suivant le conseil d'un internaute d'alsacréation.

Voisi mon code css:

/*MON SITE*/

#body {
margin-left : auto;
margin-right : auto;
padding : 0;
background-color : #696799;
width : 100%;
height : 100%;
position : relative;
}
#background {
top : 0;
bottom : 0;
width : 100%;
height : auto;
position : absolute;
background-image : url(images/nouveau_site2.png);
background-color : #696799;
background-repeat : no-repeat;
}
#corps {
width : 36%;
height : 80%;
margin-left : 28%;
color : white;
position : relative;
text-align : center;
border-bottom : 3,5%;
z-index : 1;
border : purple 2px solid;
}
ul {
color : purple;
}
li {
border : 0;
}
#menu {
width : auto;
height : auto;
margin-left : 5%;
font-size : 100%;
color : #605f5e;
top : 35%;
position : relative;
border : 2px solid yellow;
z-index : 1;
position : absolute;
}
h3 {
font-size : 100%;
color : white;
}
h1 {
font-size : 200%;
color : white;
}
ul {
color : white;
}
#titre1 {
left : 0;
z-index : 1;
height : 20%;
width : 100%;
position : relative;
border : 2px solid green;
}
#pretext {
left : 0%;
text-align : center;
font-size : 100%;
position : relative;
border : 2px solid orange;
z-index : 1;
}
#titre2 {
left : 0%;
text-align : center;
position : relative;
border : 2px solid red;
z-index : 1;
}
#text {
width : 100%;
text-align : center;
font-size : 80%;
position : relative;
border : 2px solid blue;
z-index : 1;
}
.style1 {
font-family : "Times New Roman", Times, serif;
}
p {
font-size : 150%;
}
h2 {
font-size : 200%;
}


#IFHE {                              
width : auto;
height : auto;
margin-left : 80%;
position : absolute;
top : 33%;
z-index : 1;
}

Si vous trouvez ce qui cloche, vous me sauvez mon site! ; )
Modifié par Jir! (26 Aug 2009 - 10:30)

Salut,

Et margin-top ? Ca ne marche pas ? et padding-top ?
Sinon pense à entourer ton code des balises [ code][ /code] (sans espaces devant)

Hello Jir! et bienvenue ,

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace après le crochet ouvrant).



Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je te rappelle que l'Aide (dont le lien est fourni lors de l'inscription) contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.

Le margin-top fait décaler le background vers le bas en même temps que la <div>, ce qui laisse un bandeau blanc en haut.(bien que la background et le "corps" soient bien dans deux <div> distinctes ne se contenant pas l'un l'autre.
Par contre avec le padding seul le texte descend où je veux le mettre. MAIS la bordure de la div touche tout de même toujours le haut de la page.
Ce qui a pour effet de faire remonter le texte sur la bannière si je réduit la fenêtre ou change de résolution, au lieu de le faire s'abaisser tout en étirant l'image background vers le bas, ce qui laisse plus de possibilité de résolution et de taille de fenêtre.

PS : j'avais pas bien compris comment mettre le codage en valeur, désolé.
Modifié par Jir! (26 Aug 2009 - 11:01)