Discussion :

[Neuromancien2]

Bonjour,

J'ai plusieurs problèmes sur une mise en page CSS.

1) Sur la page d'accueil (Home.html), le pied de page est collé au bloc précédent (left dans ce cas). Je n'arrive pas à créer une marge entre les deux.
2) Je voudrais une marge fixe de 10px entre la colonne de gauche et la colonne centrale (content). Pour l'instant ça ne fonctionne pas correctement si je réduit la taille de la fenêtre.
3) Sur le panneau d'administration, les différents blocs correspondant aux modules sont à l'extérieur du cadre content.

Pouvez-vous m'aider ?

Les fichiers sont en pièces jointes.

[4R416N33]

1) Sur la page d'accueil (Home.html), le pied de page est collé au bloc précédent (left dans ce cas). Je n'arrive pas à créer une marge entre les deux.

Sur ton css, pour ton id #footer

Code :

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

1
2
3
4
5
6
7
8
9
10
#footer {
background-color:#F5D8AE;
border:1px solid #F1C28A;
clear:both;
font-family:Utopia,Arial;
font-size:small;
position:relative;
text-align : center;
top:10px;
}

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<div id="content">
<div id="welcome_message">
<h2>Welcome</h2>Bienvenue sur ce site !<br>
Vous y trouverez...</div>
<div id="latestnews">
<h3>Latest News</h3>
<ul class="articles">
<li><a href="#">Test article (05-01-2008)</a></li><li><a href="#">Hello (04-23-2008)</a></li></ul>
</div>
</div>

2) Je voudrais une marge fixe de 10px entre la colonne de gauche et la colonne centrale (content). Pour l'instant ça ne fonctionne pas correctement si je réduit la taille de la fenêtre.

Mais ton div content dans un autre div avec un margin left de 20% (bord droite de ton cadre de gauche) et tu mets alors dans ton content un margin left de 10px

3) Sur le panneau d'administration, les différents blocs correspondant aux modules sont à l'extérieur du cadre content.

Le pb, c'est que tes différents blocs sont en float left, ils se places donc un peu arbitrairement.

Deux solutions :

Tu te mets au tableaux. Même si l'effet de mode peut en attirer plus d'un, le 100% div+css n'a pas forcément que du bon

Tu joue sur le height de ton content pour "faire croire" que les blocs sont à l'intérieur.

Dans ces cas la, je privilégie souvent la deuxième solution, parce que je suis une fashion victim qui adore la mode (et déteste les tableaux).

[@Ikey]

Salut,

Mais ton div content dans un autre div avec un margin left de 20% (bord droite de ton cadre de gauche) et tu mets alors dans ton content un margin left de 10px



Le pb, c'est que tes différents blocs sont en float left, ils se places donc un peu arbitrairement.

Deux solutions :

Tu te mets au tableaux. Même si l'effet de mode peut en attirer plus d'un, le 100% div+css n'a pas forcément que du bon

Tu joue sur le height de ton content pour "faire croire" que les blocs sont à l'intérieur.

Dans ces cas la, je privilégie souvent la deuxième solution, parce que je suis une fashion victim qui adore la mode (et déteste les tableaux).

- Mettre des div partout ca s'appelle le syndrome de la divitis, et ce n'est pas mieux que l'utilisation de tableaux. On peut juste dire que l'on utilise des css!
- les feuilles de styles ne sont pas une mode mais indispensable pour l'accessibilité

Pour reprendre le fil du post!

Une solution que je te propose sans bidouille : j'ai mis les 3 parties dans lesquelles j'ai fait des modifications. Vu que ce sont de légères modif, je te laisse découvrir tout seul

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
 
#left {
	float: left;
	padding: 1%;
	margin: 1% 0;
	width: 20%;
	border: 1px solid #f1c28a;
	font-family: Georgia;
	background-color: #f5d8ae;
}			
 
#content {
	float: right;
	width: 75%;
	padding: 1%;
	margin: 1% 0;
	border: 1px solid #000;
	background-color: #fff;
	font-family: Georgia, Bookman, Palatino, Utopia;
}
 
#footer {
	clear:both;
	font-size: small;
	text-align: center;
	font-family: Utopia, Arial;
	color: #000;
	background-color: #f5d8ae;
	border: 1px solid #f1c28a;
	margin: 10px 0 0 0;
}