Suite de texte superposé à mes div

**damaters** · 16/12/2016, 11h45

Bonjour, le texte à la fin de mon site sont superposés à mes div alors que je les ai fermées. Je n'arrive pas à voir ou le probleme. J'ai réussi à mettre mes div à coté de l'un à l'autre. C’était mon but. Voila mon site:
Nom : site.JPG
Affichages : 418
Taille : 149,3 Ko

Nom : site.JPG
Affichages : 418
Taille : 149,3 Ko

mon 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
<!DOCTYPE html>
<html lang='fr'>
	<head>
 
		<h1>Communauté d'agglomération de Paris-Vallée de la Marne</h1>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
   <link rel="stylesheet" type="text/css" href="cof.css" />
	</head>
	<body>
	<p>Communauté d’agglomération Paris – Vallée de la Marne
 
Au 1er janvier 2016, la communauté d’agglomération de Marne-la-Vallée / Val-Maubuée a rejoint Paris-Vallée de la Marne.</p>
 
	<div class="contenu">
 
		<p div class="p2"><br>La communauté d’agglomération Paris – Vallée de la Marne regroupe les anciennes agglomérations de Marne-et-Chantereine, de la Brie Francilienne et de Marne-la-Vallée / Val Maubuée soit 12 villes avec 225 159 habitants : Croissy-Beaubourg, Champs-sur-Marne, Emerainville, Lognes, Noisiel, Torcy, Brou-sur-Chantereine, Chelles, Courtry, Vaires-sur-Marne, Pontault-Combault et Roissy-en-Brie.
 
		</div></p>
 
		<p div class="text2"><br>65 conseillers communautaires, élus au sein de chaque conseil municipal parmi les conseillers sortants, siègent au conseil communautaire. Le nombre de sièges dévolus à chaque commune est fonction de sa population, chacune disposant d’au moins un conseiller.
 
		</div></p>
	</div>
<br>Paul Miguel a été élu président de cette nouvelle agglomération le 20 janvier 2016.
 
 
 
 
</p>
<br>Missions
 
<br>La communauté d’agglomération Paris – vallée de la Marne exerce des compétences en matière de développement économique, équilibre social de l’habitat, politique de la ville, aménagement urbain, santé… Elle gère également des services publics importants : médiathèques, piscines, conservatoires et maison de la justice et du droit.
 
<br>Missions de service public<br>
 
<br>Eau
<br>Assainissement
<br>Transports
<br>Réseau de chaleur
<br>Récupération et élimination des déchets
<br>Aires d’accueil des gens du voyage<br>
<br>Missions de gestion d’équipements intercommunaux et d’entretien du patrimoine<br>
 
<br>Médiathèques
<br>Conservatoire
<br>Piscines
<br>Parcs et Forêts
<br>Aménagement des bords de Marne
<br>Valorisation du patrimoine
<br>Missions d’aménagement urbain et de développement économique<br>
 
<br>Urbanisme
<br>Transports
<br>Réseaux
<br>Schéma directeur local
<br>Développement économique
 
	</body>
</html>

et mon css :

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
html {
    #height: 100%}
body
{
    background-color: #949494;
    font-family: Arial, sans-serif;
    #height: 100%;
    margin: 0 auto;
 
}
 
.p2
{
position: absolute;
left: 25%;
height: 256px;
width:326px;
font-size: 20px;
background:url(images/top.png) no-repeat;
padding:0;
text-align: center;
float: left;
 
 
}
 
.text2
{
position: absolute;
right: 25%;
height: 256px;
width:326px;
font-size: 20px;
background:url(images/tournois.png) no-repeat;
text-align: center;
float: left;
}
.contenu
{
position: absolute;
height: 256px;
width:326px;
font-size: 20px;
background:url(images/tournois.png) no-repeat;
text-align: center;
float: left;
}

**damaters** · 16/12/2016, 11h51

j'ai oublié de changer cette ligne:
<link rel="stylesheet" type="text/css" href="bof1.css" />

et du coup, ça me donne:
Nom : site 2.JPG
Affichages : 316
Taille : 173,7 Ko

Invité · 16/12/2016, 15h00

Bonjour,

Code :

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

1
2
3
4
<p div class="p2">
...
<p div class="text2">
...

Ce serait bien de connaitre un minimum les bases du HTML et du CSS :

HTML :

Notamment, il est important de :

structurer correctement le code HTML
connaitre les balises principales, et leur utilisation en fonction de leur "sens" (sémantique)
(ex. balise <p> pour "paragraphe")

CSS :

N.B. position: absolute; : à n'utiliser QUE SI on ne peut pas faire autrement (ou dans des ccas précis).
Voir la FAQ CSS.

**damaters** · 16/12/2016, 16h00

j'ai lu les tutoriels mais je n'arrive pas toujours pas à régler le problème de superposable et le div:p2 et le div:text2 n'est plus centré:
Nom : site3.JPG
Affichages : 293
Taille : 58,9 Ko

Nom : site3.JPG
Affichages : 293
Taille : 58,9 Ko

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
 
<!DOCTYPE html>
<html lang='fr'>
	<head>
 
		<h1>Communauté d'agglomération de Paris-Vallée de la Marne</h1>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
   <link rel="stylesheet" type="text/css" href="bof1.css" />
	</head>
	<body>
	<p>Communauté d’agglomération Paris – Vallée de la Marne
 
Au 1er janvier 2016, la communauté d’agglomération de Marne-la-Vallée / Val-Maubuée a rejoint Paris-Vallée de la Marne.</p>
 
 
 
	<div id="p2"><br>La communauté d’agglomération Paris – Vallée de la Marne regroupe les anciennes agglomérations de Marne-et-Chantereine, de la Brie Francilienne et de Marne-la-Vallée / Val Maubuée soit 12 villes avec 225 159 habitants : Croissy-Beaubourg, Champs-sur-Marne, Emerainville, Lognes, Noisiel, Torcy, Brou-sur-Chantereine, Chelles, Courtry, Vaires-sur-Marne, Pontault-Combault et Roissy-en-Brie.
 
	</div>
 
	<div id="text2"><br>65 conseillers communautaires, élus au sein de chaque conseil municipal parmi les conseillers sortants, siègent au conseil communautaire. Le nombre de sièges dévolus à chaque commune est fonction de sa population, chacune disposant d’au moins un conseiller.
 
	<br></div>
 
	<div id="text3">
 
 
		<br><br><br><br>Paul Miguel a été élu président de cette nouvelle agglomération le 20 janvier 2016.
		<br>Missions
 
		<br>La communauté d’agglomération Paris – vallée de la Marne exerce des compétences en matière de développement économique, équilibre social de l’habitat, politique de la ville, aménagement urbain, santé… Elle gère également des services publics importants : médiathèques, piscines, conservatoires et maison de la justice et du droit.
 
		<br>Missions de service public<br>
 
		<br>Eau
		<br>Assainissement
		<br>Transports
		<br>Réseau de chaleur
		<br>Récupération et élimination des déchets
		<br>Aires d’accueil des gens du voyage<br>
		<br>Missions de gestion d’équipements intercommunaux et d’entretien du patrimoine<br>
 
		<br>Médiathèques
		<br>Conservatoire
		<br>Piscines
		<br>Parcs et Forêts
		<br>Aménagement des bords de Marne
		<br>Valorisation du patrimoine
		<br>Missions d’aménagement urbain et de développement économique<br>
 
		<br>Urbanisme
		<br>Transports
		<br>Réseaux
		<br>Schéma directeur local
		<br>Développement économique
	</div>
 
	</body>
</html>

et le 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
 
body
{
    background-color: #949494;
    font-family: Arial, sans-serif;
    #height: 100%;
    #margin: 0 auto;
 
}
 
div#p2
{
height: 256px;
width:326px;
font-size: 20px;
background:url(images/top.png) no-repeat;
padding:0;
text-align: center;
float: left;
 
}
 
div#text2
{
 
height: 256px;
width:326px;
font-size: 20px;
background:url(images/tournois.png) no-repeat;
text-align: center;
float: left;
}
div#text3
{
text-align:center;
height: 256px;
width:326px;
font-size: 20px;
background:url(images/tournois.png) no-repeat;
}

Invité · 16/12/2016, 16h14

FAQ CSS :

Mais tant que ton code HTML ne sera pas correctement structuré, ça restera du bricolage...

N.B.

tu es étudiant ?
en stage dans une entreprise ?
on t'a demandé de refaire le site de la boite ?
(alors que tu n'as, à priori, pas les ~~compétences~~ connaissances nécessaires)

**damaters** · 16/12/2016, 16h29

je prépare un portfolio sur mon stage et mes missions sur ma formation pendant mon stage quand j'ai du temps. Je ne suis pas développeur et je travaille dans le système et réseaux.

Suite de texte superposé à mes div

CSS

Vue hybride

Discussions similaires

Partager

Partager