Agencement de divs

**patrotot** · 16/12/2014, 14h28

Bonjour,
depuis 3 jours j'essaie de mettre en place 8 DIV sur une page web locale (pc) et je n'y arrive pas, alors j'ai besoin d'un éclairage.

Nom : divs.jpg
Affichages : 260
Taille : 18,1 Ko

Nom : divs.jpg
Affichages : 260
Taille : 18,1 Ko

Le problème c'est que je n'arrive pas à placer les boutons gris (des div) dans le div n°7, ils se placent automatiquement à une dizaine de cm sous ma page et l'écran passe alors en ascenseur.

le html des boutons est :

Code html :

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

1
2
3
4
5
6
<div id="bouton1" class="btn" onclick="alert('#')">bout1</div>
<div id="bouton2" class="btn" onclick="alert('#')">bout2</div>
<div id="bouton3" class="btn" onclick="alert('#')">bout3</div>
<div id="bouton4" class="btn" onclick="alert('#')">bout4</div>
<div id="bouton5" class="btn" onclick="alert('#')">bout5</div>
<div id="bouton6" class="btn" onclick="alert('#')>bout6</div>

le css des boutons est :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.btn{
position:relative;
top:20px;
left:15px;
width:75px;
height:20px;
margin:auto;
display:inline-block;
border:2px solid black;
background-color:#CCCCCC;
text-align:center;
border-radius:10px 3px;
font-weight:bold;
}

Ce dont j'ai besoin c'est une indication sur la manière de placer les 8 DIV sur la page en HTML.
Ensuite je me débrouillerais pour le code CSS.

**ryan** · 16/12/2014, 16h34

Yop!

La première chose à faire est de terminer le code du onclick sur le bouton 6 par un double guillemet...

Pour le reste, voici une solution possible:

Code html :

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
<!DOCTYPE html>
<html>
<head>
	<title>Test</title>
	<style>
                .btn{
                position:relative;
                top:20px;
                left:15px;
                width:75px;
                height:20px;
                margin:auto;
                display:inline-block;
                border:2px solid black;
                background-color:#CCCCCC;
                text-align:center;
                border-radius:10px 3px;
                font-weight:bold;
                }       
        </style>
</head>
 
<body>
 
<div id='wrap' style='width:100%;'>
 
	<div id="container" style="margin: 15 15 0 15; width: 100%;">
 
		<div id="div1" style="width: 100%;background-color: blue;">
			DIV 1
		</div>
 
		<div id="div2" style="float: left; width: 25%; height: 250px; margin: 15 0 0 0; background-color: red;">
			DIV 2
		</div>
 
		<div id="container_3_4" style="float: left; width: 50%;">
 
			<div id="div3" style="width: 100%; height: 50px; background-color: green;">
				DIV 3
			</div>	
 
			<div id="div4" style="width: 100%; height: 200px; background-color: yellow;">
				DIV 4
			</div>
		</div>
 
		<div id="div5" style="float: left; width: 25%; height: 250px; background-color: pink;">
			DIV 5
		</div>	
 
		<div id="container_6_7" style="float: left; width: 75%;">		
			<div id="div6" style="width: 100%; height: 75px; background-color: purple;">
				DIV 6
			</div>	
 
			<div id="div7" style="width: 100%; height: 50px; background-color: olive;">
				<div id="bouton1" class="btn" onclick="alert('#')">bout1</div>
				<div id="bouton2" class="btn" onclick="alert('#')">bout2</div>
				<div id="bouton3" class="btn" onclick="alert('#')">bout3</div>
				<div id="bouton4" class="btn" onclick="alert('#')">bout4</div>
				<div id="bouton5" class="btn" onclick="alert('#')">bout5</div>
				<div id="bouton6" class="btn" onclick="alert('#')">bout6</div>
			</div>
		</div>
 
		<div id="div8" style="float: left; width: 25%; height: 125px; background-color: aqua;">
			DIV 8
		</div>
 
	</div>
 
</div>
 
</body>
</html>

**NoSmoking** · 16/12/2014, 21h58

Bonjour,

Le problème c'est que je n'arrive pas à placer les boutons gris (des div) dans le div n°7, ils se placent automatiquement à une dizaine...

ne jamais sous estimé l'importance de mettre le code HTML qui est utilisé.

Je rajouterais que je ne vois pas pourquoi utiliser des DIVs là où il existe un élément, BUTTON, qui est fait pour cela, le CSS faisant le reste.

**patrotot** · 19/12/2014, 20h20

Merci beaucoup de votre aide, grâce à vos indications j'ai réussi à faire ce que je voulais

Agencement de divs

CSS

Discussions similaires

Partager

Partager