Discussion :

[rom117]

Bonjour (et rebonjour à ceux qui m'ont déjà aidé il y a quelques semaines ) !

Je m'occupe actuellement de ce site : http://www.make-development-inclusive.org/index.php et je travaille en résolution 1024*768. Pour une question de commodité, j'ai bloqué la largeur de mes pages à 1024 px. Jusque là tout va bien ...
Mais quand j'augmente la résolution on peut voir quelques petits décalages
Il y a 2 problèmes :
- le bandeau tout en haut est légèrement décalé vers le bas (il devrait normalement être collé en haut de page)
- la ligne juste en dessous du bandeau est elle aussi décalée vers le bas

Je ne sais pas trop d'où ca vient. Voici le css du bandeau :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
/*haut de la page : image (avec logo "Make inclusive development"), textes*/ 
#header  
{ 
    height:13%; 
    background-image:url(images/bandeau1024.jpg); 
    background-position:center; 
    background-repeat:no-repeat; 
    text-align:center; 
    margin:auto; 
}

Je précise que j'ai le même problème sous firefox et que j'ai deux feuilles de style différentes : une pour IE et une pour FF.

Ce qui est bizarre c'est que le texte qui est dans le bandeau n'est pas décalé, seule l'image est décalée. Pourtant si on regarde la structure de ma page php, on s'apercoit que la regle css pour le texte est déclarée dans la règle css pour l'image :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<!--affichage du bandeau et du texte tout en haut : "Pour rompre..." et "Un projet financé..."--> 
<div id="header">/*POUR L'IMAGE DU BANDEAU*/ 
    <div id="titletext">/*POUR LE TEXTE DU BANDEAU*/ 
 
    </div> 
    <div id="orangetext"> 
 
    </div> 
</div>

Si vous avez des idées je suis preneur !

Merci d'avance pour votre aide

[lv3895]

Salut. Tu peux peut être essayer de mettre un margin-top: 0px pour coller le header en haut de la page. Sinon tu peux nous montrer ton code "titletext" et "orangetext" pour voir pourquoi il ne se décale pas comme le header stp?
A+

[rom117]

Salut lv3895 !

J'ai rajouté le margin-top mais ca n'a rien changé !

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
#header 
{
	height:13%;
	background-image:url(images/bandeau1024.jpg);
	background-position:center;
	background-repeat:no-repeat;
	text-align:center;
	margin:auto;
	margin-top:0%;
}

Et voici le css de orangetext et titletext (je ne pense pas que ce soit ca qui soit en cause) :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
#titletext 
{
	padding:0.5% 0%;
	font-size:1.25em;
	font-weight:bold;
}

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
#orangetext 
{
	color:#F30;
	font-weight:bold;
	font-style:normal;
	font-size:1.05em;
}

J'ai pas mis de margin pour ces textes comme tu peux le voir. Et c'est pour ca que mon problème est tres bizarre. Le problème apparait aussi quand je suis en 1024*768 et que je zoom avec le ctrl + ou -. Si ca peut aider...


Merci d'avance pour ton aide

[Macmillenium]

Bonjour,

Enlève le height:13% sur le #header, laisse le s'adapter à la hauteur de son contenu
Et rajoute simplement un padding:4px 0.

[rom117]

C'était exactement ça le problème ! J'ai un tout petit peu agrandi le padding mais sinon le principe est le même

Merci beaucoup c'est trop bien

Fallait savoir que ce petit décalage tout innocent était dû à un height

Quoi qu'il en soit, c'est !

Merci encore et @ +

Rom