Le "link" de la programmation!
Groupe : Membres
|
Salut, voila, j'ai à moitié ( voir à trois quarts XD ) copié le code du site du zéro pour la création de design sur mon site web. Malgré cela une erreur subsiste : le corps de la page se place en dessous du menu ( même avec le margin-left -_-" ). Or j'aimerais qu'il se place à 20px sous la bannière.
Je vous donne mon code, si quelqu'un a la solution, se serait sympa de me la donner 
Code : CSS 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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89 | body
{
width: 760px;
margin : auto;
margin-top: 20px;
margin-bottom: 20px;
background-image: url("fond.PNG");
background-repeat: repeat-x;
}
/* L'en-tête */
#menu
{
float: left;
width: 120px;
margin-top: 20px;
}
.element_menu
{
background-color: aqua;
background-image: url("fond.PNG");
background-repeat: repeat-x;
border: 2px solid blue;
margin-bottom: 20px;
}
/* Quelques effets sur les menus */
.element_menu h3 /* Tous les titres de menus */
{
color: black;
text-decoration: underline;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
}
.element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
{
list-style-image: url("images/puce.png"); /* On change l'apparence des puces */
padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
}
.element_menu a /* Tous les liens se trouvant dans un menu */
{
color: black;
}
.element_menu a:hover /* Quand on pointe sur un lien du menu */
{
background-color: white;
color: blue;
}
#corps
{
width: 884px;
margin-top : 20px;
margin-left: 140px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
color: black;
background-image: url("fond.png");
background-repeat: repeat-x; /* Une petite image de fond qui se répètera horizontalement en haut */
border: 2px solid blue; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
}
#pied_de_page
{
width : 1024px;
padding: 5px;
text-align: center;
color: black;
background-image : url("fond.PNG");
background-repeat: repeat-x;
border: 2px solid blue;
}
|
Voili voilou 
A+
Vous aimez les maths et/ou la physique/chimie ? N'hésitez pas, foncez sur mon site web : cliquez-ici
|
Groupe : Membres
|
La largeur du corps est de 884px, la largeur du menu est de 120px, ça depasse ton body qui est de 760px (pourquoi lui avoir attribuer une largeur ?)
En tout ça te fait une largeur de 1004px, il faut que ta résolution suivent...
Diminue la largeur du corps et ton problème sera normalement réglé.
Tous unis pour la liberté sur le net !
|
Le "link" de la programmation!
Groupe : Membres
|
ça ne change absolument rien -_-
Quelqu'un a une autre idée?
P.S.: quand j'enlève le "width" de mon corps, mon corps se transforme en un espèce de de rectangle immonde qui fait moins de 5 px de largeur et mon texte dépasse de partout du corps... u_u
ça m'énerve un peu de pas pouvoir faire de design correcte... Surtout que j'ai simplement copier coller dans le tuto de m@teo,ben que j'ai légèrement changé quelques détails...
Vous aimez les maths et/ou la physique/chimie ? N'hésitez pas, foncez sur mon site web : cliquez-ici
|
Groupe : Membres
|
Citation : kermaP.S.: quand j'enlève le "width" de mon corps
Je ne t'ai pas dit d'enlever le width mais de simplement diminuer sa largeur....(450px par exemple)
Tous unis pour la liberté sur le net !
|
Groupe : Membres
|
Il confond surement avec ma réponse dans le premier post qu'il a fait...
Evite les doublons la prochaine fois stp 
pourrais-tu éventuellement nous donner ton html? parce que normalement en retirant le width il devrait prendre la taille de son contenu il me semble.
|
Groupe : Membres
|
|
Le "link" de la programmation!
Groupe : Membres
|
OUla, il y a eu une grosse embrouille lol Je n'avais même pas vu que j'avais fait du double post, (mon ordinateur a eu quelques problèmes de connexions) et je n'avais pas lu ton message sur l'autre topic. Si j'ai retiré le width, c'est tout simplement pour faire comme sur le tuto XD. Mais ne vous en faites pas, le problème est réglé. J'avais simplement oublié de refermer la blise </div> dans mon xhtml... Complètement débile
EDIT: enfaite, j'ai un autre petit problème : mon pied de page s'inscrit à 10px sous le corps. Or mon menu est plus grand que mon corps ( pour le moment) Si quelqu'un pouvait me dire comment faire en sorte que le pied de page s'affiche à 10px sous le menu et sous le corps est non pas en plein dans le menu... -_-
Ce serait très sympa
Voila mon css: Code : CSS 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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84 | #menu
{
float: left; /* Le menu flottera à gauche */
width: 120px; /* Très important : donner une taille au menu */
margin-top: 10px;
margin-bottom: 10px;
}
.element_menu
{
background-color: #626262;
background-image: url("fondbouke.png");
background-repeat: repeat-x;
border: 2px solid blue;
margin-bottom: 10px; /* Pour éviter que les éléments du menu ne soient trop collés */
}
/* Quelques effets sur les menus */
.element_menu h3 /* Tous les titres de menus */
{
color: black;
text-decoration: underline;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
}
.element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
{
list-style-image: url("images/puce.png"); /* On change l'apparence des puces */
padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
}
.element_menu a /* Tous les liens se trouvant dans un menu */
{
color: black;
}
.element_menu a:hover /* Quand on pointe sur un lien du menu */
{
background-color: white;
color: blue;
}
#corps
{
margin-top: 30px;
margin-left: 140px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
margin-bottom: 10px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
padding: 20px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
color: black;
background-image: url("fondbouke.png");
background-repeat: repeat-x; /* Une petite image de fond qui se répètera horizontalement en haut */
border: 2px solid blue; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
}
#corps h1
{
color: black;
text-align: center;
text-decoration: underline;
}
#pied_de_page
{
width: 760px;
padding: 5px;
text-align: center;
color: black;
background-image : url("fondbouke.PNG");
background-repeat: repeat-x;
border: 2px solid blue;
}
|
A++
Édité
le 19/07/2008 à 12:46:44
par kerma
Vous aimez les maths et/ou la physique/chimie ? N'hésitez pas, foncez sur mon site web : cliquez-ici
|
Groupe : Membres
|
tu peut mettre ton footer dans le même block que de ton corps, comme ceci par exemple:
Ton blok menu (float: left)
un block (float: left) qui contient le block corps(sans float) et le block footer (sans float)
De cette façon peu importe la taille du menu, le footer sera toujours en dessous du corps à 10px (à condition bien sur de préciser les marges.)
Tous unis pour la liberté sur le net !
|
Groupe : Membres
|
Disposer du code HTML permet de voir comment la page est faite.
Ça permet aussi de constater les erreurs et de les faire corriger.
En outre, ça évite de se creuser la tête inutilement et de proposer des solutions qui ne marchent pas à cause d'une simple erreur en HTML qu'on ne peut pas voir.
Sinon, en supposant que la structure de la page est correcte, ajoute simplement clear : left; à ton pied de page.
++
http://www.zmaths-physique.net76.net/ ???
Édité
le 20/07/2008 à 01:03:55
par Yano
|
Groupe : Membres
|
Citation : Yanoajoute simplement clear : left; à ton pied de page.
Certe mais dans ce cas elle ne pourra être à 10px en dessous du corps, ça dependra de la hauteur du menu.....
Tous unis pour la liberté sur le net !
|
Groupe : Membres
|
En supposant que la structure de la page — qu'on ne connaît toujours pas — est correcte, ça devrait suffire pour que le pied de page soit toujours en dessous du bloc le plus haut.
Par exemple.
Édité
le 20/07/2008 à 17:55:35
par Yano
|
Le "link" de la programmation!
Groupe : Membres
|
Non c'est bon, vous en faites pas, y'a plus de problèmes
Vous aimez les maths et/ou la physique/chimie ? N'hésitez pas, foncez sur mon site web : cliquez-ici
|
Tutoriels
Communauté
Mon compte
Recherche
Livre d'or
Publicité
Le problème de ce sujet a été résolu
kerma
154 Zéros connectés |
8 requêtes |
0.0524s (0.0348s)
