• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Größe/Positionierung von div-Containern

planet4

planet4

New member
hallo,

ich hab ein Problem mit der Positionierung von div-containern:
ein container jeweils für einen Rahmen um die Seite, darin
ein oder mehrere andere; ich möchte jetzt, dass der äußere
Rahmen-container sich immer mit der Länge nach unten anpasst,
jenachdem wieviel auf der Seite steht. d.h. er soll keine feste
Größe von soundsoviel pix Höhe haben, denn dann müsste ich ihn ja
für jede Seite extra im stylesheet definieren. gebe ich ihm eine Höhe
von 100%, ist er immer nur so hoch wie die Bildschirmausgabe am Monitor
und die Inhalte hängen unten rüber.
hat jemand schon mal ein ähnliches Problem gehabt oder kann mir einen
Tipp geben?

planet4.
 
mich verwirrt ein wenig dein 'jeweils'

Hab ich dich richtig verstanden? Du möchtest Aussen einen Container haben mit border, und darinnen mehrere Andere. Und der Äussere skaliert vertikal je nach der Inhaltslänge. ja!?
 
So ganz Ideal ist das glaub ich nicht geworden. Bei mir wird der Content-Bereich im Opera bisschen zu schmal angezeigt.

Kannst es dir ja mal ansehen. Hab allerdings schon mehr rumgetüddelt als ich wollte/sollte weil ich grad so ein Layout zum Ausbau gebrauchen kann.

Im Prinzip hab ich ein Aussen div mit 100% definiert und die Innen divs sind immer so lang wie Content drin ist. Das Aussen-div skaliert mit der längesten Content-Länge mit.

Code: 
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/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" />
<style type="text/css">
*	{
margin:0px;
padding:0px;
}

body	{
background:#c4c4c4;
font-family:Arial, Verdana;
font-size:12px;
color:#000;
}

#center	{
position:absolute;
left:50%;
top:20px;
width:760px;
margin-left:-380px;
}


#aussen 	{
background:#FFECF5;
padding:10px;
height:100%;
float:left;
border:1px solid #000;
}

#top {
background:#FF9BCB;
height:50px;
border:1px solid #000;
margin-bottom:10px;
padding:5px;
}

#left	{
width:140px;
float:left;
}

#left1 {
background:#FF9BCD;
padding:1px;
border:1px solid #000;
margin-bottom:10px;
}

.leftnav	{
color:#fff;
display:block;
font-weight:bold;
text-decoration:none;
background:#FF1A87;
padding:2px;
margin-bottom:1px;
}

.leftnav:hover	{
color:#FFECF5;
}

#left2	{
background:#FF9BCB;
border:1px solid #000;
padding:5px;
}

#right 	{
margin-left:5px;
width:580px;
padding:5px;
background:#f3f3f3;
float:left;
border:1px solid #000;
}

</style>
</head>
<body>
<div id="center">
	<div id="aussen">
         <div id="top"><h2>header</h2></div>
		<div id="left">
                   <div id="left1">
                   	<a class="leftnav" href="#">Link1</a>
                         <a class="leftnav" href="#">Link2</a>
                   </div>
                   <div id="left2">left2<br />left2<br />left2<br /></div>


                 </div>
                 <div id="right">
                 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec sed dolor id neque vehicula cursus. Quisque mauris nunc, lobortis vitae, cursus laoreet, accumsan vel, est. Donec eu ante euismod ante pretium vehicula. Maecenas faucibus, lectus at laoreet viverra, sem nisl vehicula velit, nec tincidunt pede justo id elit. Nullam at neque sed sapien vulputate lacinia. Ut fermentum. Donec iaculis consequat risus. Integer nibh turpis, consectetuer ac, dictum sed, tristique a, pede. Nunc sed est. Vestibulum sed tellus. Vestibulum dictum ante in massa. Suspendisse nunc. Vestibulum placerat consectetuer libero. Phasellus turpis nisl, tincidunt at, ornare sit amet, dapibus vel, massa. Duis lobortis sapien in elit. Aliquam erat volutpat. Sed nisl. Maecenas volutpat nulla vel quam.</p>
<hr />
<p>Proin luctus lorem eget turpis rhoncus suscipit. Proin convallis tortor faucibus nulla. Nulla facilisi. In urna orci, vestibulum et, nonummy eget, porta non, felis. Proin commodo mollis orci. In hac habitasse platea dictumst. Pellentesque pede lorem, pharetra at, accumsan a, convallis id, mauris. Aliquam erat volutpat. Suspendisse potenti. Nulla sit amet elit sit amet velit iaculis pharetra. Nullam dignissim. Donec sagittis molestie mauris. Quisque bibendum. Donec molestie. Suspendisse tempus nibh at velit. Suspendisse blandit elementum sapien. In lobortis blandit erat. Curabitur blandit eleifend nulla. Integer ac lectus.</p>


                 </div>
<p style="text-align:right;">Februar 2005</p>
	</div>
</div>
 
planet4 schrieb:
d.h. er soll keine feste
Größe von soundsoviel pix Höhe haben, denn dann müsste ich ihn ja
für jede Seite extra im stylesheet definieren. gebe ich ihm eine Höhe
von 100%, ist er immer nur so hoch wie die Bildschirmausgabe am Monitor
und die Inhalte hängen unten rüber.
Zum Vergrößern anklicken....

height:auto; ?
 
Guten Morgen Bine!

Vielen Dank für deine Hilfe, ich glaub, ich hab jetzt begriffen, was mein Fehler war:

ich hab alle divs, die im Rahmen-Container liegen, absolut positioniert...

muss mir das aber noch mal genau anschauen, auch das, was der Opera macht,

der gibt irgendwie ein Durcheinander aus.

planet4.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben