kleines problem mit layer

joextra · 25.04.2007, 18:47

hi,

hab folgendes problem. ich hab einen hauptlayer. darin werden die restlichen elemente (divs) absolut positioniert. leider bekomme ich es nicht hin den hauptlayer dynamisch zu machen, das die größe (nach unten) dynamisch erweitert wird wenn nötig. bin schon seit stunden auf der suche nach einer antwort und komme nicht weiter. kann mir da vielleicht jemand helfen?
das css des hauptlayers sieht mom. so aus:

HTML-Code:

.page {
	position:relative;
	top:0px;
	width:1022px;
	height:768px;
	background-color:#87807C;
	margin: 0 auto;
}

es sollte eine mindesthöhe haben, aber wenn nötig nach unten länger werden.

webcreate · 25.04.2007, 19:48

Probier mal folgendes:

min-height:768px;
height:auto !important; /* für moderne Browser */
height:768px; /*für den IE */

marc22 · 25.04.2007, 19:50

Das kann nicht klappen. Die absolut positionierten Layer sind aus dem "Dokumenten-Fluss" entnommen, das heißt, der Hauptlayer richtet sich nicht nach ihnen.

Versuch lieber, die innen liegenden Elemente per float zu positionieren, dann klappt es auch mit dem Hauptlayer.

joextra · 25.04.2007, 21:09

das dokument soll mittig in der seite erscheinen. wenn die browserbreite verändert wird, soll es sich dynamisch mit verändern. klappt das mit float?
oder mal anders gefragt: wie kann ich die absoluten layer in den dokumenten fluss bekommen? das wäre die einfachste lösung
ich dachte eingentlich das sich die absoluten layer an den umliegenden layer mit der positionierung orientieren (was bei mir eigentlich auch der fall ist)

webcreate · 25.04.2007, 21:16

Warum absolut und warum float?
margin: 0 auto; Macht das doch schon.

joextra · 25.04.2007, 23:37

@webcreate
leider klappt dein tipp nicht

vielleicht liegts auch am body. der schaut so aus:

Zitat:

body {
background-color: #ffffff;
font-family: Verdana, Arial;
font-size: 11px;
text-align:center;
margin: 0;
}

webcreate · 26.04.2007, 00:35

Hier dann mal was zu spielen.

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css">
    /* ### Generelles ################################################################## */
    *{
        border:    0;
        padding: 0;
        margin:    0;
    }

    html{
        background:    #333;
        font-size: 0.8em;
        font-family: Tahoma, Arial, Helvetica, sans-serif;
    }

    body{
        width: 768px;
        margin: 0px auto;
    }

    /* ### Inhalt ################################################################## */
    #container{
        border-left: #ccc 1px solid;
        border-right: #ccc 1px solid;    
        background: #ccc;
    }
    #content{
        width: 600px;
        min-height:384px;
        height:auto !important;  /* für moderne Browser */
        height:390px;  /*für den IE */
        voice-family: "\"}\"";
        voice-family: inherit;
        padding: 0 5px 5px 10px;
    }
    /* HACK */
    html>/**/body #content{
        padding: 0 5px 5px 120px;

    }
    /* ### Navigation ################################################################## */
    #container #navigation{
        background: #eee;
        float: left;
        padding:5px;
    }
    #container #navigation ul{
        list-style-type: none;
    }
    #container #navigation ul li{
        display: block;
        border:    #333333 1px solid;
        background: #aaa;
        width:100px;
        color: #fff;
    }
</style>
</head>
<body>
<div id="container">
    <div id="navigation">
        <ul>
            <li>Navi1</li>
            <li>Navi2</li>
            <li>Navi3</li>
            <li>Navi4</li>
            <li>Navi5</li>
        </ul>
    </div>
    <div id="content">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla faciLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla faci
    </div>
</div>
</body>
</html>

joextra · 26.04.2007, 14:37

@webcreate
danke, aber das hat mir leider auch nicht geholfen. nutze jetzt eine kombination aus float & margin. damit klappts

marc22 · 27.04.2007, 16:01

Das hört sich nicht so gut an. Probier es doch noch mal hiermit:

Code:

<!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>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Develop</title>
		<style type="text/css">
			#global
			{
				margin:0px auto;
				width:600px;
				background-color:#FF0000;
			}
		</style>
	</head>
	<body>
		<div id="global">Globaler Div</div>
	</body>
</html>

webcreate · 27.04.2007, 17:58

Ich verstehe Dein Problem wohl nicht so recht. Das was slayer und ich gepostet haben, hat den selben Ansatz und funktioniert ...

joextra · 28.04.2007, 15:16

@webcreate
ich mache es doch so wie es slayer vorgeschlagen hat.
habe vorher das genommen was du gepostet hast und in meinem css eingebaut, aber habs trotzdem nicht gebacken bekommen. so wie ich es jetzt habe funktioniert es aber

webcreate · 28.04.2007, 15:17

Na dann is ja gut.

joextra · 02.05.2007, 18:19

jetzt habe ich doch ein kleines problem. auf dem ie sieht es gut aus, aber der ff (v. 1.5) geht nur nach min-height. passt also die höhe nicht automatisch an. das css sieht so aus:

Zitat:

.page {
position:relative;
top:0px;
width:1022px;
min-height:768px;
height:auto !important; /* für moderne Browser */
height:768px; /*für den IE */
background-color:#87807C;
margin: 0 auto;
padding-bottom:20px;
}

weiß jemand woran es liegen könnte?

joextra · 03.05.2007, 00:35

hat sich erledigt