Probleme balise div

**jabou** · 29/01/2010, 21h49

Bonjour,
j'aimerais fixer une balise div sur ma page à un endroit bien précis mais je n'y arrive pas comment faire? Voici le code utilisé:

Code :

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

1
2
3
4
5
6
7
div.plan
{
	width:780px;
	margin-left:auto;
	margin-right:auto;
	margin-top:140px;
}

J'ai essayer d'utiliser " position:fixed; "
mais je ne peu pas placer la balise ou je veux dans ma page.

**goomazio** · 29/01/2010, 22h56

Bonjour,

Avec la valeur absolute tu devrais pouvoir placer ton calque où tu veux.

Code :

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

position: absolute;

**jabou** · 29/01/2010, 23h15

Cela ne marche pas... La balise est à la bonne position dans ma page mais seulement sur l'axe horizontal. J'aimerais positionner une balise sur ma page et que quand on descend dans la page ou que l'on réduit/agrandit la fenêtre elle reste au même endroit (cad en dessous de ma baniere).

**sebhm** · 30/01/2010, 00h31

alors fixed doit etre la solution mais ca depend de la version de ton navigateur

montre nous ton code complet HTML + CSS

**jabou** · 30/01/2010, 00h40

Htm:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><link rel="stylesheet" media="screen" type="text/css" title="Test" href="css/mon css.css"/>
<title>Shigeru Miyamoto_Accueil</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="Evolution;communication" />
</head>
<!--Span est utilisé pour créer des colonnes (blocs côte à côte). Div est utilisé pour créer des blocs les uns en dessous des autres.
Imbriquer des Div dans des Span n'est pas valide XHTMLement parlant -->
<body id="up">
<div class="plan">
  <h4><img src="css/puce1.jpg"/> Accueil</h4>
</div>
<div class="sous_plan">
<h2 id="Biographie" ><a href="biographie/biographie.htm"title="En savoir plus!">Biographie</a></h2>
	 <p>Shigeru Miyamoto, né le 16 novembre 1952, est un créateur japonais de jeu vidéo. Il est le créateur des franchises Super Mario, Donkey Kong, The Legend of Zelda, Star Fox, F-Zero et Pikmin pour le compte de Nintendo. Il a également supervisé de nombreux titres édités par Nintendo et développés par d'autres studios. Il est actuellement directeur général de Nintendo EAD.
	 </p>
 <h2 id="Oeuvres"><a href="oeuvre/oeuvre.htm"title="En savoir plus!">Ses oeuvres</a></h2>
	 <p>Shigeru Miyamoto est considéré comme une des plus grandes figures du jeu vidéo, surnommé le « Spielberg des jeux vidéo » ou encore « l'inventeur du jeu vidéo moderne ». En 1998, il a été la première personne à entrer au Hall of Fame de l'Academy of Interactive Arts and Sciences.
	 </p>
 <h3 id="remonter"><a href="#up">Remonter</a></h3>
</div>
</body>
</html>

Css:

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
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
/* CSS Document */
body
{background-image:url("baniere.jpg");
background-repeat:no-repeat;
background-position:top;
background-attachment:fixed;
}
div.plan
{
	width:780px;
	margin-left:auto;
	margin-right:auto;
	margin-top:140px;
}
div.sous_plan
{	
	width:780px;
	margin-left:auto;
	margin-right:auto;
	margin-top:140px;
}
blockquote
{font-style: italic;
font-size:small;
text-align:center;
margin-top:70px;
}
p
{font-size:16px;
}
h1
{color:black;
font-size:x-large;
text-align:center;
}
h2
{color:#375D81;
font-size:medium;
}
h3
{font-size:medium;
font-weight:bold;
}
#remonter
{ font-size:x-small;
}
th
{background-color:#6699FF;
}
tr
{background-color:#6699FF;
}
a
{color:#6600FF;
}
a:hover
{color:green;
}
#menu
{text-decoration:none;
color:#6600FF;
}
#menu:hover
{color:#6666FF;
}
td a
{text-decoration:none;
}

**goomazio** · 30/01/2010, 09h38

Ton but c'est d'avoir une bannière (le calque plan) et en dessous la page (le calque sous_plan) ? (voir miniature)

J'ai juste modifié ceci :

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
 
div.plan
{
    width:780px;
    margin-left:auto;
    margin-right:auto;
    margin-top:10px;
    border: 1px solid green;
    height: 100px;
}
div.sous_plan
{    
    width:780px;
    margin-left:auto;
    margin-right:auto;
    margin-top:10px;
    border: 1px solid red;
}

**sebhm** · 30/01/2010, 10h46

ton doctype n'est pas bon

je ne comprends pas vraiment ce que tu veux faire.
Explique toi mieux ou donne nous une page en ligne.
Dis nous sur quel navigateur tu es.

**jabou** · 30/01/2010, 19h00

*Pourquoi mon doctype n'est il pas bon?

*J'aimerais mettre la balise div "plan" au dessus de ma bannière qui se trouve dans body (faut il la mettre dans une balise div a part?). Et que celle ci ne descende pas avec le reste du texte.(La balise div "plan" contient le texte"accueil" )

*La balise div "sous_plan" correspond au texte du site à faire défiler.

*J'utilise Firefox

Le résultat voulu est en pièce jointe

**goomazio** · 30/01/2010, 19h21

Ok j'ai compris ce que tu veux faire : comme le menu en haut de cette page ?

Ce menu est fait en créant deux bloques : un pour le menu fixe et un pour le reste. Et la subtilité c'est de mettre le bon style sur le deuxième bloque pour que ça fasse comme si c'était toute la page : juste ce deuxième bloque sera scrollable.

Dans cet exemple, le style du bloque fixe :

Code :

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

1
2
3
4
5
6
7
8
9
#bloc-fixe { 
	position:fixed;
	overflow:auto;
	right:0px;
	left:0px;
	top:0px;
	height:80px;
	border-bottom: 1px solid black;
}

Et le style du deuxième bloque avec tout le contenu :

Code :

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

1
2
3
4
5
6
7
8
#contenu { 
    position:fixed;
    overflow:auto;
    right:0px;
    left:0px;
    bottom:0px;
    top:85px;
}

Le code HTML en gros :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<body>
    <div id="bloc-fixe">
        <p>Tout ceci reste en haut</p>
    </div>
    <div id="contenu">
        <p>Contenu de la paget</p>
    </div>
    <script type="text/javascript">
         document.getElementById("contenu").focus()
    </script>
</body>

Le code Javascript permet de perfectionner un peu tout ça.

Salut!

**jabou** · 30/01/2010, 19h25

Merci

, c'est tout à fait ce que je veux faire, je vais essayer ca tout de suite.

**sebhm** · 30/01/2010, 19h43

*Pourquoi mon doctype n'est il pas bon?

tu melanges Strict et Transitional

**jabou** · 30/01/2010, 19h49

Que dois-je mettre à la place alors? (c'est bizarre car c'était le doctype par défaut dans mon éditeur html)

**sebhm** · 30/01/2010, 21h29

regarde le lien que je t'ai donné : la liste des doctype y est

mais c'est en effet bizarre que ton éditeur te propose ce doctype.
Y'a t-il un spécialiste dans la salle ??

**jabou** · 31/01/2010, 15h52

Merci pour la bannière, ca marche nickel mais il y a juste un truc qui ne fonctionne pas:

-J'aimerai encrer mon menu sur la bannière (et non en fonction de la page) du genre: Menu1,Menu2,etc

-Le problème c'est que je ne sais pas réduire ma page ou sinon, mon menu est complètement décalé.

Je m'explique en images:

**goomazio** · 31/01/2010, 17h44

Pour le moment tu n'as qu'une seule image pour ta bannière et ton menu ?

Il me semble que la seule solution serait de diviser cette image et de placer le petit cadre de menu (voir vignette : on voit pas très bien mais c'est un bouton de menu) au même endroit où tu as placé le lien (Menu 1).

Sinon je ne sais pas comment tu peux les garder superposés après un redimensionnement.

**jabou** · 31/01/2010, 20h10

J'y ai pensé aussi mais seulement je ne vois pas comment fixer l'image "bouton" sur ma bannière. (Ma bannière est toujours au centre de ma page et donc elle bouge si on redimensionne la page).

**goomazio** · 31/01/2010, 23h49

Je ne comprends pas. Est-ce que tu saurais remettre le code du problème que tu parle ?

**jabou** · 01/02/2010, 00h05

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><link rel="stylesheet" media="screen" type="text/css" title="Test" href="css/mon css.css"/>
<title>Shigeru Miyamoto_Accueil</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="Evolution;communication" />
</head>
<!--Span est utilisé pour créer des colonnes (blocs côte à côte). Div est utilisé pour créer des blocs les uns en dessous des autres.
Imbriquer des Div dans des Span n'est pas valide XHTMLement parlant -->
<body id="up">
 
 
<div id="banniere_bloc">
<h4><img src="css/puce1.jpg"/> Accueil</h4>
</div>
 
<div id="txtmenu_accueil">Menu1</div>
 
 
<div id="site_contenu">
<h2 id="Biographie" ><a href="biographie/biographie.htm"title="En savoir plus!">Biographie</a></h2>
	<p>Shigeru Miyamoto, né le 16 novembre 1952, est un créateur japonais de jeu vidéo. Il est le créateur des franchises Super Mario, Donkey Kong, The Legend of Zelda, Star Fox, F-Zero et Pikmin pour le compte de Nintendo. Il a également supervisé de nombreux titres édités par Nintendo et développés par d'autres studios. Il est actuellement directeur général de Nintendo EAD.
	 </p>
 <h2 id="Oeuvres"><a href="oeuvre/oeuvre.htm"title="En savoir plus!">Ses oeuvres</a></h2>
	 <p>Shigeru Miyamoto est considéré comme une des plus grandes figures du jeu vidéo, surnommé le « Spielberg des jeux vidéo » ou encore « l'inventeur du jeu vidéo moderne ». En 1998, il a été la première personne à entrer au Hall of Fame de l'Academy of Interactive Arts and Sciences.
	 </p>
 <h3 id="remonter"><a href="#up">Remonter</a></h3>
</div>
 
</body>
</html>

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
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
90
91
/* CSS Document */
body
{background-image:url("baniere_fondu.jpg");
background-attachment:fixed;
background-repeat:repeat;
}
#banniere_bloc
{ 
			position:fixed;
			overflow:auto;
			right:0px;
			left:0px;
			top:0px;
			height:100%;
			background-image:url("baniere.jpg");
			background-repeat:no-repeat;
			background-attachment:fixed;
			background-position:top;
			font-size:90%;
			width:100%;
}
#txtmenu_accueil
{			position:fixed;
			margin-left:50px;
			margin-top:30px;
}
#site_contenu 
{ 
			position:fixed;
			overflow:auto;
			right:0px;
			left:0px;
			bottom:0px;
			top:163px;
			border:solid 1px;
			background-color:#86ECB9;
			width:100%
			height:100%;
}
blockquote
{font-style: italic;
font-size:small;
text-align:center;
margin-top:70px;
}
p
{font-size:16px;
}
h1
{color:black;
font-size:x-large;
text-align:center;
}
h2
{color:#375D81;
font-size:medium;
}
h3
{font-size:medium;
font-weight:bold;
}
h4{
	position: absolute;
	left: 5px;
	top: 124px;
}
#remonter
{ font-size:x-small;
}
th
{background-color:#6699FF;
}
tr
{background-color:#6699FF;
}
a
{color:#6600FF;
}
a:hover
{color:green;
}
#menu
{text-decoration:none;
color:#6600FF;
}
#menu:hover
{color:#6666FF;
}
td a
{text-decoration:none;
}

(J'aimerais simplement que le texte "Menu1" (#txtmenu_accueil) colle sur ma bannière (image))

--->comme sur n'importe quel site voici un exemple: sur http://www.prizee.com/ le texte "Accueil" ou "Jeux" reste sur la banniere.

**goomazio** · 01/02/2010, 12h47

Tu dois faire que, comme tu dis, comme pour ta bannière "est toujours au centre de ma page et donc elle bouge si on redimensionne la page", tes points de menus doivent bouger aussi.

Et donc tu es obligé de découper ton image pour placer chaque partie de l'image qui doit être superposée avec du texte dans le même conteneur. Comme ça si le conteneur est redimensionné, l'image et le texte seront déplacé/redimensionné de la même manière.

Voir vignette pour le découpage : chaque cadre serait un calque.
Tu aurais quelque chose du genre :

Code XHTML :

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

1
2
3
4
5
6
7
8
<div id="banniere"><!-- cadre rouge /--></div>
 
<div id="menu">
    <div class="pointmenu">Menu 1</div> <!-- cadre vert /-->
    <div class="pointmenu">Menu 2</div>
</div>
 
<div id="pagecourante"></div>

**jabou** · 02/02/2010, 00h05

Ca marche.

Merci pour tous ces précieux conseils

Probleme balise div

CSS

Discussions similaires

Partager

Partager