[positionnement] probleme dans mon code

**mackean** · 17/11/2007, 21h37

Edit: je ne comprend pas pourquoi mais meme en mettant vos code pour colorer les miens ça ne marche pas (je dois etre vraiment mauvais)... si quelqun peux m'aider là aussi)...

Bonjour,
jeune etudiant graphiste, je rencontre de serieux problemes avec mes placements de balises div non pas dans mon code mais dans le graphisme de ma page. J'ai 2 problemes que je vais vous exposer ci dessous:

1- tout d'abord pour la jonction entre 2 balises DIV (les codes html et css sont présent en dessous des questions). Lorsque je place mes images dans "<div id="menu">" puis dans "<div id="carte">" et que dans le css je demande a "<div id="menu">" de faire un float a gauche,il y a un espace entre les deux de quelques pixel, je ne comprend pas pourquoi.

2-Malgrés cela je continu mon codage et tente d'inserer dans <div id="menu_2"> la derniere image, et que je lui dis de faire un float a droite, alors <div id="carte"> se place au dessous des deux autres.

je vous mets donc les codes de ma page:

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
 
<html>
<body>
<div id="traits_haut">
</div>
 
<div id="menu">
<div class="entete" ><img src="images/resto_gourmand_ban.jpg" /></div>
<div class="menu_haut"><img src="images/menu_resto_haut.jpg" /></div>
<div class="menu_bas"><img src="images/menu_resto_bas.gif" /></div>
<div class="pied_menu"><img src="images/piment.jpg" /></div>
</div>
 
 
<div id="carte">
<div class="ombre_haut"><img src="images/ombre_carte.jpg"/></div>
<div class="carte_haut"><img src="images/carte_haut.jpg"/></div>
<div class="milieu">
<span class="carte_gauche"><img src="images/carte_gauche.gif" /></span>
<span class="carte_centre"></span>
<span class="carte_droite"><img src="images/carte_droite.gif" /></span>
</div>
 
<div class="carte_bas"><img src="images/carte_bas.gif" /></div>
<div class="pied_carte"><img src="images/ombre_carte_bas.jpg" /></div>
</div>
 
 
<div id="menu_2"><img src="images/ombre_droite.gif" /></div>
 
<div id="traits_bas">
</div>
</body>
</html>

Code css :

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
body
{
width: 1024px;
margin: auto;
margin-top: 20px; 
margin-bottom: 20px;
}
 
#menu
{
float:left;
width:369px;
display:inline;
}
 
.entete
{
width: 369px;
height: 129px;
} 
 
 
.menu_bas{
width:369px;
height:280px;
background:url(images/menu_resto_bas.gif);
 
}
 
 
#carte
{
width:621px;
display:inline;
}
 
.ombre_haut
{
margin:0px;
padding-left:0px;
 
}
 
#menu_2{
float:right;
display:inline;
 
}

Voila en esperant ne pas trop abuser de votre gentillesse et merci d'avance.

ps si vous avez besion des images j'ai la possibilités de vous les envoyer...

**Bisûnûrs** · 18/11/2007, 10h22

Sans les images, difficile de se rendre compte du rendu que tu souhaites avoir.

Un lien vers ta page en ligne serait plus utile.

Sinon je conseille de commencer par mettre un DOCTYPE complet à ton document (http://xhtml.developpez.com/faq/?pag...#html_doctypes).

Le bug des quelques pixels de décalage que tu observes (j'imagine donc que tu visualises ton site sur IE6 ...) est appelé le three pixels jog.
Plus d'infos ici : http://www.test.blog-and-blues.org/h...ts/float6.html

**mackean** · 18/11/2007, 18h31

Voici l'adresse du site :http://requiemeca.free.fr/
Grand merci a toi, j'ai reussi a palier au probleme en mettant 2 float sur "menu" et "carte". mais maintenant un autre probleme se pose. voila,je souhaite dans le menu mettre un overflow mais je n'arrive pas a mettre la taille a :

Code :

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

1
2
 
<div class="carte_centre"></div>

dans le css, j'ai beau mettre la taille et overflow auto, ça ne le prend pas en compte.

**Bisûnûrs** · 18/11/2007, 18h49

C'est parce que ton div est en display:inline par la class "carte". On ne peut pas renseigner de dimensions à un élément inline. Passe-le en block et mets-lui un float:left.

**mackean** · 18/11/2007, 20h35

Encore une fois merci a toi car ça marche trés bien. Je vais surement encore abuser de ta bonté mais j'aurais aimé savoir comment centrer uniquement ce qui est entouré par Div id="all" dans differentes resolutions... J'ai bea mettre margin: auto, cela ne change rien...

adresse :http://requiemeca.free.fr/
Encore merci pour tes reponses rapîde...

**jeje13009** · 18/11/2007, 21h25

slt,

je ne vois pas ton <div id="all"> dans ton code, mais je présume que ce div englobe l'ensemble de ton site... tu dois donc avoir : <body><div id="all"> [...] </div></body> ; c'est ca ?

en ce cas dans ton css tu mets :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
body{
text-align:center;
}
 
#all{
position:absolute;
top:0px;
left:50%
margin-left:-512px; //en fait - la moitié de la largeur de ton site !
text-align:left;
}

[positionnement] probleme dans mon code

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager