Position relative dans un conteneur en position relative

artefact89 · 22/11/2010, 18h43

Bonjour,

je suis une tuto, et je n'arrive pas à comprendre pourquoi le bloc en rose (voir code) est décalé vers le bas en laissant un espace libre et que l'espace se positionne sans laisser d'espace libre. Mais je pensais que ce dernier aurait pris comme référence le 2eme elements, et donc être décalé un peu plus loin. Je pense que les coordonnées varient selon le position relative. Merci pour votre aide.
Arte

PS : J'ai utilisé firefow

code :

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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<?xml version="1.0" encoding="utf-8"?>
<!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>
  <link rel="stylesheet" type="text/css" href="external.css" />
  <title>CSS Positioning: Relative</title>
 
    <style>
 
    div#outer {
        position: relative;
        width: 750px;
        margin: 15px auto;
        background-color: #369;
        border: solid 1px black;
    }
 
    div#first {
        position: relative;
        top: 0;
        left: 0;
        background-color: #ccf;
        float: left;
        width: 220px;
        padding: 15px;
    }
 
    div#second {
        position: relative;
        top: 0;
        left: 250px;
        background-color: #fcc;
        width: 220px;
        padding: 15px;
    }
 
    div#third {
        position: relative;
        top: 0;
        left: 500px;
        background-color: #cff;
        width: 220px;
        padding: 15px;
    }
 
    </style>
 
</head>
 
<body>
 
<div id="outer">
    <div id="first">
        <h1>1 BW Whois</h1>
        <p>
        <a href="http://whois.bw.org/">BW Whois</a> is Bill's open-source whois 
        client. Originally released in December 1999, and still in active 
        development, BW Whois has evolved into a full-featured command-line/web 
        client with rich security features, caching and database support.
        </p>
    </div>
 
 
    <div id="second">
        <h1>2 AMTP</h1>
        <p>
        <a href="http://amtp.bw.org">AMTP</a> (Authenticated Mail Transfer 
        Protocol) is Bill Weinman's solution to the SPAM problem. AMTP is being 
        designed as a replacement for SMTP, with security features designed to 
        reduce the impact of Unsolicited Bulk Email (UBE) and the cost of running 
        mail servers.
        </p>
    </div>
 
    <div id="third">
        <h1>3 Writing</h1>
 
        <p>
        Mr. Weinman has written five books, including The CGI Book and, with his
        sister Lynda, Creative HTML Design. He has contributed to other books on
        programming and web design and has written articles for various
        computer-related periodicals.
        </p>
    </div>
</div>
 
</body>
</html>

Image.jpg

02-relative.html

ornitho13 · 24/11/2010, 17h16

Salut,

En gros tu voudrais faire 3 colonnes qui se suivent?

Si c'est le cas, utilise le float:left, et supprime toutes tes propriétés "top" et "left", ainsi que les "position:relative".
A partir de là, rajoute une div en dernier avec un clear:left afin d'arréter la propagation du float

Voici ce que donnerais ton code:

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
77
78
79
80
81
82
83
84
85
 
<?xml version="1.0" encoding="utf-8"?>
<!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>
  <link rel="stylesheet" type="text/css" href="external.css" />
  <title>CSS Positioning: Relative</title>
 
    <style>
 
    div#outer {
        padding:5px;
        width: 750px;
        margin: 15px auto;
        background-color: #369;
        border: solid 1px black;
    }
    div#first {
        top: 0;
        left: 0;
        background-color: #ccf;
        float: left;
        width: 220px;
        padding: 15px;
    }
    div#second {
        float: left;
        background-color: #fcc;
        width: 220px;
        padding: 15px;
    }
 
    div#third {
    	float: left;
        background-color: #cff;
        width: 220px;
        padding: 15px;
    }
 
    </style>
 
</head>
 
<body>
 
<div id="outer">
    <div id="first">
        <h1>1 BW Whois</h1>
        <p>
        <a href="http://whois.bw.org/">BW Whois</a> is Bill's open-source whois 
        client. Originally released in December 1999, and still in active 
        development, BW Whois has evolved into a full-featured command-line/web 
        client with rich security features, caching and database support.
        </p>
    </div>
 
 
    <div id="second">
        <h1>2 AMTP</h1>
        <p>
        <a href="http://amtp.bw.org">AMTP</a> (Authenticated Mail Transfer 
        Protocol) is Bill Weinman's solution to the SPAM problem. AMTP is being 
        designed as a replacement for SMTP, with security features designed to 
        reduce the impact of Unsolicited Bulk Email (UBE) and the cost of running 
        mail servers.
        </p>
    </div>
 
    <div id="third">
        <h1>3 Writing</h1>
 
        <p>
        Mr. Weinman has written five books, including The CGI Book and, with his
        sister Lynda, Creative HTML Design. He has contributed to other books on
        programming and web design and has written articles for various
        computer-related periodicals.
        </p>
    </div>
    <div style="clear:left;height:0;">&nbsp;</div>
</div>
 
</body>
</html>

J'espère que cela t'aidera

++

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