[CSS] Placement "bancal" de blocs div

**unicyclon** · 15/09/2005, 10h45

Bonjour,

J'ai un petit problème gênant au niveau de la prise en charge des blocs div et de leur agencement en CSS. Voici déjà le code 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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
	<div id="top">
		<h1>Kerbos</h1>
	</div>
	<div id="body">
		<div id="menu">
			<ul>
				<li><a href="index.php?q=1:0:0:0:0:0">Accueil</a></li>
				<li><a href="index.php?q=1:0:0:0:0:0">Jouer</a></li>
				<li><a href="index.php?q=1:0:0:0:0:0">Forum</a></li>
				<li><a href="index.php?q=1:0:0:0:0:0">Messages</a></li>
				<li><a href="index.php?q=1:0:0:0:0:0">Profil</a></li>
				<li><a href="index.php?q=1:0:0:0:0:0">A propos</a></li>
			</ul>		
		</div>
		<div id="content">
			<div id="lipsum">
				<p>Lorem ipsum dolor sit amet, consectetuer [...]</p>
				<p>[...]</p>
				<p>[...]</p>
				<p>[...]</p>
				<p>[...]</p>
		  </div>
		</div>
	</div>
</div>
</body>
</html>

Le code 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
69
70
71
72
73
74
75
76
77
78
79
80
81
/*
-------------------------------------------------------------------
Global Definitions
-------------------------------------------------------------------
*/
 
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	margin: 0px;
	padding: 0px;
}
 
/*
-------------------------------------------------------------------
Global Skelton
-------------------------------------------------------------------
*/
 
#top h1 {
	display: none;
}
 
#top {
	height: 0px;
}
 
#container {
	width: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	padding-top: 74px;
	background: #FFFFFF url('../images/kerbos_medium.jpg') no-repeat 15px 15px;
}
 
#body {
	border-top: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
}
 
#content {
	margin: 0px 0px 0px 200px;
	padding: 0px 10px 10px 10px;
	background-color: #FF0000;
}
 
#menu {
	width: 200px;
	height: 100%;
	float: left;
	background: #F2F2F2 url('../images/menu_bottom.gif') no-repeat bottom left;
}
 
/*
-------------------------------------------------------------------
Menu
-------------------------------------------------------------------
*/
 
#menu ul {
	list-style-type: none;
	padding: 0px 0px 5px 0px;
	margin: 0px;
}
 
#menu li {
	border-bottom: 1px solid #DDDDDD;
	padding: 8px 10px 8px 15px;
	border-right: 1px solid #DDDDDD;
}
 
#menu a {
	font-size: 12px;
	color: #000000;
	text-decoration: none;
}
 
#menu a:hover {
	text-decoration: underline;
}

Et enfin une capture de ce que ça donne sous Safari (idem Firefox et IE...) :

La coloration rouge est faite à des fins de test, et vous aurez compris qu'au final je voudrais coller le bloc du contenu à la bordure haute. Mais ça ne marche pas....

D'avance merci.

**spirou** · 15/09/2005, 12h03

Sans doute un :

Code :

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

1
2
3
4
 
p{
margin: 0;
}

Ou

Code :

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

1
2
3
4
 
p{
margin-top: 0;
}

devrait régler ton problème.

**sebzed** · 22/09/2005, 10h25

J'ai à peu de choses près les même partages de ma fenêtre sauf que suivant la page, à la place de la boite content, j'ai 2 colonnes une ou je mets le texte et dans l'autre je l'illustre.
Tout allait bien tant que je travaillais avec des top: et left: et que tout partait du coins en haut à gauche. Les écrans larges étant de plus en plus répendus, je me suis dit que j'allais tout mettre dans le milieu de l'écran avec une largeur fixe. Et dès lors j'ai un gros problèmes avec les boites qui sont côte à côte Quelqu'un aurait-il un exemple à me montrer ??
Merci d'avance.

[CSS] Placement "bancal" de blocs div

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager