tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
6
ZUGRIFFE
2061
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
DIESES THEMA IST
GESCHLOSSEN
  1. 02.09.07 13:55 #1
    dirk80 Tutorials.de Gastzugang
    Hallo!

    Ich bin dabei ein Template zu erstellen. Es soll mit einer Ausnahme wie das angehängte Bild aussehen. Dabei habe ich Box1-5 mit position: absolute definiert. Box5 orientiert sich jedoch anders als Box 1-4 am Boden, da Box 3 immer verschiedene Höhen haben kann.

    Jedoch will ich Box 5 abhängig von der Höhe von Box3 direkt darunter anzeigen lassen. Im Moment kann es dazu kommen, dass Box5 Box überlappt. Dass soll jedoch nicht passieren. Hat jemand einen Vorschlag wie ich das machen könnte

    Vielen Dank schon mal.

    Dirk
    Miniaturansicht angehängter Grafiken Miniaturansicht angehängter Grafiken CSS Layout mit position absolute und relativ möglich?-template.jpg  
     
  2. 02.09.07 14:18 #2
    Matonor Matonor ist offline Mitglied Bronze
    Registriert seit
    Mar 2004
    Beiträge
    31
    du könntest:
    1. min-height von html und body auf 100% setzen (im IE 6 height auf 100%)
    box5 dann absolut innerhalb von body am unteren rand per bottom:0 positionieren und box3 margin-bottom mit dem wert der höhe von box5 geben.
    oder
    2. box5 als kind von box3 definieren und per bottom: 0 an den unteren rand setzen.
     
    Unmögliches ist dazu da, möglich gemacht zu werden.
  3. 04.09.07 18:11 #3
    dirk80 Tutorials.de Gastzugang
    Danke für die Antwort
    zu 1) hat bei mir nicht geklappt. sobald box3 soviel Text enthält, dass das Fenster gescrollt werden müsste, befindet sich box 5 nicht mehr am unteren Rand.

    zu 2) hat geklappt.
     
  4. 08.09.07 00:53 #4
    dirk80 Tutorials.de Gastzugang
    Wie funktioniert denn Vorschlag 1?

    Ich muss den 1. Vorschlag umsetzen, da Box2 und Box4 länger als Box3 sein könnten und in dem Fall Box5 nicht am Ende der Seite sich befinden würde.
     
  5. 08.09.07 01:13 #5
    Maik Tutorials.de Gastzugang
    Hi,

    vielleicht hilft dir da dieses alternative Modell weiter?

    Code :
    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
91
92
93
94
95
96
97
98
99
100

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<title>tutorials.de | demo_dirk80</title>
 
<style type="text/css">
<!--
* {
margin:0;
padding:0;
}
 
html,body {
height:100%;
}
 
#wrapper {
position:relative;
min-height:100%;
height:auto !important;
height:100%;
}
 
#box1 {
background:#cfcfcf;
height:150px;
}
 
#box2 {
float:left;
width:150px;
background:#ff0000;
}
 
#box3 {
margin:0 150px;
border:1px solid #000;
}
 
#box4 {
float:right;
width:150px;
background:#ff0000;
}
 
#box2,#box3,#box4 {
padding-bottom:30px;
}
 
#box5 {
clear:both;
position:absolute;
width:100%;
bottom:0;
background:#00e0ff;
}
 
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
 
.clearfix {display: inline-block;}
 
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
-->
</style>
 
</head>
<body>
 
<div id="wrapper" class="clearfix">
     <div id="box1">
          <p>box1</p>
     </div>
     <div id="box2">
          <p>box2</p>
     </div>
     <div id="box4">
          <p>box4</p>
     </div>
     <div id="box3">
          <p>box3</p>
     </div>
     <div id="box5">
          <p>box5</p>
     </div>
</div>
 
</body>
</html>
     
  6. 08.09.07 11:48 #6
    dirk80 Tutorials.de Gastzugang
    Hi!

    Irgendwas habe ich noch falsch gemacht. Woran kann es liegen, dass Box4 (wie im angehängten Bild) nicht richtig obenrechts floatet?

    Code :
    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

    body, html {
    padding:0;
    margin:0;
    height:100%;
}
#rahmen {
    position:relative;
    min-height:100%;
    height:auto !important;
    height:100%;
    width: 800px;
}
#topbereich {
    background-image: url(../images/index_top.jpg);
    text-align: right;
    padding: 0px;
    margin: 0px;
    height: 350px;
    width: 100%;
}
#left {
    float: left;
    vertical-align:top;
    width: 200px;
    background-color: #ff0000;
}
#content {
    border: 1px solid #000;
    margin: 0 200px;
}
#right {
    float: right;
    width: 200px;
    background-color: #ff3344;
}
#left, #content, #right {
    padding-bottom: 31px;
}
#footer {
    clear: both;
    position: absolute;
    bottom: 0px;
    width:800px;
    text-align: right;
    background-color: #00ffff;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
h1 {
    margin:0;
    font-size: 16px;
}
    Miniaturansicht angehängter Grafiken Miniaturansicht angehängter Grafiken CSS Layout mit position absolute und relativ möglich?-boxenentwurf.jpg  
     
  7. 08.09.07 12:10 #7
    Maik Tutorials.de Gastzugang
    Notier die drei "Spalten"-DIVs in dieser Reihenfolge:

    Code :
    1
2
3

    <div id="left">...</div>
<div id="right">...</div>
<div id="content">...</div>
    In meinem Beispiel lautet das Markup:

    Code :
    1
2
3

    <div id="box2">...</div><!-- linke Spalte -->
<div id="box4">...</div><!-- rechte Spalte -->
<div id="box3">...</div><!-- mittlere Spalte -->
     
« Problem mit Layer | Floats nicht komplett aufheben? »

Ähnliche Themen

  1. URL - rausfinden ob absolute/relativ
    Von wolfclaw im Forum Java
    Antworten: 2
    Letzter Beitrag: 28.03.07, 15:09
  2. position:absolute - Div verscheibt layout
    Von kakapopo im Forum CSS
    Antworten: 5
    Letzter Beitrag: 29.07.06, 10:10
  3. Absolute Position eines Objekts relativ zu einem Div festlegen.
    Von DaRula im Forum CSS
    Antworten: 2
    Letzter Beitrag: 11.07.06, 13:08
  4. div position:relativ
    Von Kussilein im Forum CSS
    Antworten: 3
    Letzter Beitrag: 19.11.04, 21:42
  5. div relativ/absolute kombinieren
    Von melmager im Forum CSS
    Antworten: 4
    Letzter Beitrag: 22.08.03, 14:02