Discussion :

[Aspic]

Bonjour,

J'ai un probleme avec la mise en page de mon site (voir le lien)
Voir ici

Voici mon code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
		<style type="text/css">
div#header {
	width:1000px;
	height:200px;
	background-image:url(Header.jpg)
	}
		div#menu {
	float:left;
	border:none;
	width:250px;
	height:500px;
	background-image:url(Partenaires.jpg)
	}
div#contenu {
float:left;
	border:none;
	width:512px;
	height:500px;
	background-image:url(Contenu.jpg)
	}
		div#partenaire {
	float:right;
	border:none;
	width:250px;
	height:500px;
	background-image:url(Partenaires.jpg)
	}
div#footer {
clear:both;
	width:1000px;
	height:68px;
 background-image:url(footer.jpg)
	}
	</style>

Je ne comprends pas car pour le milieu j'ai 500 pixels(centre) + 250 pixels(gauche) + 250 pixels(droite) = 1000 pixels (taille du header)

Or pourquoi ca ne s'emboite pas correctement ? J'ai penser aux bordures des calques mais je ne sais psa du tout !

Merci de l'aider car la je seche vraiment

[Bisûnûrs]

Tu as mis un float:right sur ton div partenaire.

Etant donné qu'il n'est inclu dans aucun élément, il prend pour limite le bord de la fenêtre.

Soit tu mets un float:left à la place du float:right, soit tu englobes les trois div du milieu dans un autre auquel tu auras spécifié la largeur maximale des trois blocs.

[Aspic]

Tu as mis un float:right sur ton div partenaire.

Etant donné qu'il n'est inclu dans aucun élément, il prend pour limite le bord de la fenêtre.

Soit tu mets un float:left à la place du float:right, soit tu englobes les trois div du milieu dans un autre auquel tu auras spécifié la largeur maximale des trois blocs.

Salut, pour le float avant je l'avais mis en left et ca marche pas non plus (j'ai modifier la mise en forme sur le lien) maintenant il est collé à gauche mais un rang plus bas !!

Sinon pour l'autre méthode je ne sais pas vraiment comment faire et si c'est la meilleur idée... (je débute en CSS)

SInon j'ai rajouté ca dans mes 3 blocs mais sans succès :

Code :

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

1
2
padding: 0px;
margin: 0px;

Merci de ton attention

[Bisûnûrs]

Salut, pour le float avant je l'avais mis en left et ca marche pas non plus (j'ai modifier la mise en forme sur le lien) maintenant il est collé à gauche mais un rang plus bas !!

Je n'ai aucun problème, que ce soit sur Firefox2 ou sur IE6, le bloc de droite est bien sur la même ligne que les autres et collé au bloc bleu.

Sur quel navigateur testes-tu ? Peux-tu nous montrer un screenshot ?

De manière générale, commence tes feuilles de style par :

Code :

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

1
2
3
4
*{
   margin:0;
   padding:0;
}

Ca supprimera toutes les différences de marges entre les navigateurs.

[Aspic]

Voici la piece jointe ma résolution est de 1024x768

Mon header fait exactement 1024 comme le footer...

J'ai testé chez un pote qui est en 1280x1024 est ca marche très bien (avec un espace blanc à droite mais c'est normal) et s'il passe en 1024x768 ca plante !

Donc essaye en 1024x768 chez toi et tu verras

J'ai rajouté les deux lignes de code dans le body pour virer la marge.

D'où peux venir ce probleme ? Merci

PS: Le lien du premier post a été mis à jour.

[Bisûnûrs]

Dans ce cas-là c'est un comportement normal.

Ton head apparemment dépasse de la largeur maximale de l'écran (cf ta barre horizontale qui apparaît).
C'est ce qui va se passer également sur les plus petites résolutions (800x600).

Ton bloc de droite, en fait, n'a pas la place nécessaire pour s'afficher à côté des autres blocs.

Admettons que tu es en 1024x768, la taille maximale de ta fenêtre sera par exemple 998px (1024 - bordures navigateurs - taille scrollbar - ...).

Ton header de 1000px fait apparaître la scrollbar horizontale, seulement tes 3 blocs n'ont pas de taille maximale fixe pour l'ensemble des blocs, donc pour que le 3e s'affiche à côté des autres il va manquer 2px.

Ce que tu peux faire, c'est donc encadrer ces trois blocs d'un 4e de 100px de largeur.