CSS Layout mit position absolute und relativ möglich?

Status
Nicht offen für weitere Antworten.
D

dirk80

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
 

Anhänge

  • template.JPG
    template.JPG
    30,1 KB · Aufrufe: 228
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.
 
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.
 
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.
 
Hi,

vielleicht hilft dir da dieses alternative Modell weiter?

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

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

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

Anhänge

  • Boxenentwurf.JPG
    Boxenentwurf.JPG
    32,4 KB · Aufrufe: 48
Notier die drei "Spalten"-DIVs in dieser Reihenfolge:

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

Code: 
<div id="box2">...</div><!-- linke Spalte -->
<div id="box4">...</div><!-- rechte Spalte -->
<div id="box3">...</div><!-- mittlere Spalte -->
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück