pb de div !! :'(

Version imprimable

25/01/2005, 22h06
ThitoO

pb de div !! :'(

Je vous expose mon probleme:
- Les rectangles bleu montrent les "petit" div de ma page.
- Le rectangle rouge montre le "grand" div qui permet de centrer tous les autres.
- Le rectangle vert montre l'endroit ou je voudrai placer mon nouveau div.

http://serial.r.free.fr/images/exemple.gif

J'ai bien essayer de le faire, je place un div hors de mon div "grand" mais lorsque je le place grace aux css et il se forme un espace de la meme hauteur que mon nouveau div au dessus du debut de mon grand div.

.: Dites moi si vous avez rien compris je vous referer un autre shema :lol: :.

Voici le code de ma page:

Code:

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<title>.: Bienvenue sur le site web des serial riders :.</title>
</head>
<body><div align="center">
					 <div class="haut"></div>		 
					 <div class="menu"><img src="images/menu.gif" border="0" usemap="#Map">
              <map name="Map">
                <area shape="rect" coords="189,98,311,121" href="randos.htm">
                <area shape="rect" coords="323,98,433,120" href="bikes.htm">
                <area shape="rect" coords="447,100,564,120" href="nous.htm">
                <area shape="rect" coords="577,99,697,120" href="psychos.htm">
								<area shape="rect" coords="183,27,642,86" href="index.htm">
                <area shape="circle" coords="103,68,27" href="index.htm">
                <area shape="circle" coords="32,84,20" href="index.htm">
							</map>
					 </div>
					 <div class="centre"><br><br><p>
			Bonjour et bienvenue sur le nouveau site web des serial riders. Ce site a été creer en parti grace
		 aux proprieté CSS et aux Div. Il n'y a pas de tableaux. Si vous avez des commentaires à faire à propos
		  de ce site merci de me les envoyer par mail. Antoine_blanchet_79@hotmail.com<br><br><p class="signature">
			.: Merci de votre participation :.</p></p></div>
			<div class="bas"></div><br>
			<div class="haut"></div>
			<div class="centre">
			<img src="images/bikes.gif">
			<p>Nos bikes seront bientot en ligne.</p>
					 <div class="sol"></div>
					 <div class="bas"></div>
			</div>			
</body>
</html>

et mon css:

Code:

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
 
/* CSS Document */
 
.menu
{
width: 750px;
height: 128px;
background-color: 1B1636;
}
.centre
{
width: 750px;
height: 100%;
background-color: #1B1636;
}
p
{
font-size: small;
color: #B4AFD4;
font: bold;
text-indent: 30px;
}
.signature
{
font-size: small;
color: #B4AFD4;
font: bold;
text-align: center;
}
.sol
{
width: 750px;
height: 30px;
background-image: url(images/design.gif);
}
.haut
{
width: 750px;
height: 50px;
background-image: url(images/haut.gif);
}
.bas
{
width: 750px;
height: 50px;
background-image: url(images/bas.gif);
}
body
{
background-color: #000000;
}
.contenu
{
 margin-left: auto;
 margin-right: auto;
 margin-top: auto;
 width: 750px;
}

.: merci encore :.

25/01/2005, 22h22
ThitoO

Peut etre avec la valeur:

Code:

visibility:XXXXX;

????
25/01/2005, 22h46
BoBinou

Je doute qu'avec un DTD HTML 4.01 Transitional tu y arrivesavec des div sous IE...

Bref, je ne vois pas la portion de code correspondante, l'aurais tu oublié ?
25/01/2005, 22h52
ThitoO

tu ne la voi pas ?

c'est normale je l'ai supprimé pour avoir un code qui marche.

je cherche qqun qui pourrait me l'expliquer ou meme me l'ecrire :oops:

hu hu
26/01/2005, 01h39
gob3d
Je n'ai pas du tout lu le code css ou html.. C trop long.. mais d'aprés la photo et ta question je ne vois qu'une seule soulution pour placer ton div "vert" ou tu veut sur la page... Le positionnement absolu (peutetre avec du relatif ça marche aussi)

ça fait un pe prés ça :

Html :

Code:

<div id="vert">contenu du div vert</div>

et CSS :
Code:

1 2 3 4 5 6 7 8 9 #vert { position: absolute; top: 50px; left: 50px; width: 100px; height: 300px; border: 2px dashed #00f808; }
Voilà !
je n'ai pas testé donc il se peut que t'ai quelques reglages a faire.

Si ça marche fait moi un coucou et n'oublie pas de mettre "RESOLU" a ton topic.

Bonen chance.
A+
Gob
26/01/2005, 11h25
ThitoO

merci god3b mais j'avai deja essayer avec ce code et cela forme un un espace au dessus du div "rouge" 8O 8O

j'avai entendu parler de calques mais je ne sais pas comment les faire :lol:
26/01/2005, 11h41
Johnbob
Le code de gob3d doit fonctionner... As-tu essayé d'écrire dans ta page HTML d'abord le grand div centré et le petit div vert à gauche à la fin du code ?

Si ça marche pas essaie comme ceci:

Code:

div.grosDivCentre { position:relative; top:5px; }

Pour le grand div centré ceci serait plus standard:
Code:

1 2 body { text-align:center; } div.grosDivCentre { margin:0 auto; }
26/01/2005, 14h07
ThitoO
je suis un peu con:

le code pour le div "vert" sera donc:

Code:

<div id="gauche"></div>

et le css:
Code:

1 2 3 4 5 6 7 8 9 #gauche { position: absolute; width: ??px; height: ??px; left: 0px; top: 20px; border: 1px #RRGGBB dashed }
Je m'excuse aupres de god3b, sont code marche !! (le mien ne marchai pas car j'avai oublier le "e" de absolut :lol: :oops:

Désolé tout le monde !!