Mise en page [Résolu]

fazpedro · 01/05/2011, 22h02

Bonjour,
je suis débutant en CSS, et je souhaite avoir dans un premier temps la mise en page suivante de haut en bas :
- image en haut à gauche
- un commentaire texte en-dessous
- des liens (Accueil...)
- une zone de texte

Mon problème: le texte se retrouve à droite de l'image et pas en-dessous...

Merci de votre aide.
-----HTML--------------------------

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
<!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>
<title>MON SITE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">	
</head>
<body>
<div id="fixe-haut"><img src="image.gif" width="636" height="115" align="left" /></div>
<div id="main">mon site a voir</div>
<hr>
<p>le site des decouvertes</p>
<p>&nbsp;</p>
<ul id="tabnav">
<li class="active"><a href="#">Accueil</a></li>
     <li><a href="#">Agenda</a></li>
     <li><a href="#">Liens</a></li>
     <li><a href="#">Nous Contacter</a></li>
</ul>
</div>
</body>
</html>

--------------style.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
body {
    font: 100% verdana, arial, sans-serif;
    background-color: #fff;
    margin: 50px;
}
#fixe-haut
	{
	    height          : 70px;
		position		: fixed;
		top				: 0;
		width			: 100%;
		left			: 0;
}
#en_tete {
	font: 100% Bodonie, Verdana, sans-serif;
	float: left;
	font-size: 15px;
	line-height: 14px;
	font-weight: bold;
	margin: 0 10px 4px 10px;
	text-decoration: none;
	color: #000080;
	}
 
#tabnav {
	margin: 0;
	padding: 0 0 20px 20px;
	border-bottom: 1px solid #696;
	}
 
#tabnav li {
	margin: 0;
	padding: 0;
	display: inline;
	list-style-type: none;
	}
 
#tabnav a:link, #tabnav a:visited {
	float: left;
	font-size: 20px;
	line-height: 14px;
	font-weight: bold;
	margin: 0 10px 4px 10px;
	text-decoration: none;
	color: #9c9;
	}
#tabnav li.active a:link, #tabnav li.active a:visited, #tabnav a:hover {
	border-bottom: 4px solid #696;
	padding-bottom: 2px;
	background: #fff;
	color: #363;
	}
#tabnav a:hover {
	color: #696;
	}

----------------------------

Bisûnûrs · 02/05/2011, 09h47

C'est normal, tu as mis ton bloc image en position:fixed, il sort donc du flux de la page et le texte n'a pas de point de repère pour se positionner par rapport à lui.
Supprime cette propriété ou met un margin-top à ton texte.

fazpedro · 02/05/2011, 11h49

Voilà ce que j'ai modifié en gras dans le .CSS:

Code :

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

1
2
3
4
5
6
7
#fixe-haut
	{	    height          : 70px;
	/*	position		: fixed; */
	float: left;
		top				: 0;
		width			: 100%;
		left			: 0; }

Voilà ce que j'ai modifié en gras dans le .HTML:

Code :

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

1
2
3
<div id="fixe-haut"><img src="image.gif" width="636" height="115" align="left" /></div>
<p>&nbsp;</p>
<p>&nbsp;</p>

et c'est bon, le titre se retrouve bien en-dessous.

Merci.

02/05/2011, 09h47	#2
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	C'est normal, tu as mis ton bloc image en position:fixed, il sort donc du flux de la page et le texte n'a pas de point de repère pour se positionner par rapport à lui. Supprime cette propriété ou met un margin-top à ton texte.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email