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> </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; }
Partager