Layout mit Layern

Status
Nicht offen für weitere Antworten.
S

someone

Grünschnabel
Ich möchte mit Hilfe von <div>-Layern ein zweispaltiges Layout in der folgenden Form erstellen:

|200px|restlicher Platz|

Die erste Spalte stellt kein Problem dar, doch wie kann ich erreichen, dass die zweite Spalte den Rest des Fensters füllt?
Gebe ich 100% als größe an, ist sie zu groß.
 
Hallo,
vielleicht gehts auch ohne JS - teste mal follgende idee (ich habs noch nicht getestet):

1) Du erstellst deinen 200px Layer
2) Du erstellst einen 100% Layer
3) Du regelst die "Reihenfolge" mittels z-index so, dass der 100% Layer unter dem 200px Layer liegt.
4) Zu guterletzt gibst du dem 100% Layer noch einen "padding-left"-Wert von 200px...

Sollte imo den selben effekt haben, ober seht ihr da irgenwelche Probleme? Wer´s testet postet bitte ob´s geklappt hat :)

ciao
 
Meinst du sowas?

Code: 
#layer1 {
	position:absolute; 
	margin-top:10px; 
	margin-left:175px; 
	width:83%;  
	height:550px;
	z-index:1; 
	overflow: auto;
	background-color: #f0f8ff;
	border: 1px solid #000000;
	font-family: arial, helvetica;
	font-size: 13px;
	padding-left: 12px;
	padding-top: 5px;
    scrollbar-face-color:  #f0f8ff;
    scrollbar-shadow-color:   #f0f8ff;
    scrollbar-highlight-color: #666666;
    scrollbar-3dlight-color:    #f0f8ff;
    scrollbar-darkshadow-color:   #666666;
    scrollbar-track-color:  #f0f8ff;
    scrollbar-arrow-color: #666666;
}

#box {
	position:absolute; 
	margin-top:10px; 
	margin-left:10px; 
	width:150px; 
	height:310px;
	z-index:1; 
	overflow: auto;
	background-color: #f0f8ff;
	border: 1px solid #000000;
	font-family: arial, helvetica;
	font-size: 13px;
	padding-left: 12px;
	padding-top: 5px;
}


Gruß Axel
 
Jein ;) - eher an sowas:
PHP: 
<html>
<head>
<style type="text/css">
body  {
        padding:0px;
        margin:0px;
      }

.voll { position:absolute; 
        left:0px; 
        top:0px; 
        padding-left:205px; 
        width:100%; 
        height:100%; 
        z-index:1; 
        background-color: #CCCCCC;
      }

.left { position:absolute; 
        left:0px; 
        top:0px; 
        width:200px; 
        height:100%; 
        z-index:2; 
        background-color: #999999;
      }
</style>
</head>
<body>

<div id="voll" class="voll">Inhalt rechts...<br>Inhalt rechts...<br>Inhalt rechts...<br></div>
<div id="left" class="left">Inhalt links...<br>Inhalt links...<br>Inhalt links...<br></div>

</body>
</html>

ciao
 
Klär mich bitte mal über den Unterschied auf. Is ziemlich warm und mir steht jemand auf der Leitung :-( .
Meins ist eine externe css-Datei, deins ist intern. Oder hab ich da jetzt nen Knick im Hirn :-). Gut nich gerade das schönste Beispiel, aber selten.

Axel
 
Original geschrieben von crono
Hallo,
vielleicht gehts auch ohne JS - teste mal follgende idee (ich habs noch nicht getestet):

1) Du erstellst deinen 200px Layer
2) Du erstellst einen 100% Layer
3) Du regelst die "Reihenfolge" mittels z-index so, dass der 100% Layer unter dem 200px Layer liegt.
4) Zu guterletzt gibst du dem 100% Layer noch einen "padding-left"-Wert von 200px...

Sollte imo den selben effekt haben, ober seht ihr da irgenwelche Probleme? Wer´s testet postet bitte ob´s geklappt hat :)

ciao
Zum Vergrößern anklicken....

Danke, die Lösung funktioniert sehr gut.
 
Original geschrieben von Axel007
Klär mich bitte mal über den Unterschied auf.
Zum Vergrößern anklicken....

Du hast bei dir margin-left:175px; und width:83%; - das sieht für mich danach aus, das die 175px die restlichen 17% sind - von daher musst du bei jeder Auflösung was neues berechnen, da es sich sonst verschiebt. Bei mir ist es auf jeder Auflösung gleich...


Gut nich gerade das schönste Beispiel, aber selten.
Axel
Zum Vergrößern anklicken....
Man sieht woraufs ankommt - ich will ja für so ein popliges Beispiel keinen Designpreis gewinnen...

bye
 
Zuletzt bearbeitet:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück