[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;
}

**mackean** · 18/11/2007, 21h30

merci pour ta reponse mais en fait div="all" engloble le site moins 2 div qui sont des décos qui font toute la largeur de l'ecran.

<body>
<div></div>

<div id="all">

monsite

</div>

<div></div>
</body>

donc je sais pas si ton code marche je vais essayer et je te tiens au courant.
merci encore.

**mackean** · 19/11/2007, 00h13

jeje13009 : Ton code ne marchait malheureusement pas pour ma page mais je suis arrivé au resultat que je souhaitais avec ceci:

Code :

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

1
2
3
4
 
margin-left:auto;
margin-right: auto;
width: //taille de ton doc//

Par contre je n'arrive vraiment pas a saisir cette histoire de float, là j'essai de mettre <div classe="nappe"> a la suite de mon image et il refuse de s'y mettre meme avec un float:left. J'ai vraiment un souci avec les float

.

adresse du site:http://requiemeca.free.fr/

**Bisûnûrs** · 19/11/2007, 09h12

Si tu veux mettre ton div nappe à côté de ton div carte, il faut effectivement lui mettre un float:left.

Cependant il retourne à la ligne parce que le conteneur de ces div n'a pas de dimensions, donc s'arrête au bord de l'écran.

Renseigne donc une largeur en plus à ton div all qui prend pour valeur la somme des largeurs de tes trois div menu, carte et nappe.

**mackean** · 19/11/2007, 10h51

Un grand merci a toi. En effet, c'etait la taille qui n'allait pas, je l'avais renseignée mais elle etait trop petite.

[positionnement] probleme dans mon code

Positionnement en CSS

Discussions similaires

Partager

Partager