CSS: Bildschirmfüllender dynamischer Balken [Archiv]

Matrix316

2008-01-08, 10:03:54

Ausgangslage: Zwei DIVs nebeneinander (float:left)

Wie bekomme ich es hin, dass ich das linke div immer Fix bildschirmfüllend am linken Bildschirmrand haben kann?

Wenn ich höhe 100% mache, wird es trotzdem nur so weit dargestellt wie Objekte in diesem vorhanden sind. Wenn rechts im DIV ein Objekt angezeigt wird, welches über den Bildschirm hinaus geht, und ich dann runterscrolle, bleibt das DIV natürlich da wo es ist und ein eventuelles Menü verschwindet. Es wird zwar dann auf 100% Bildschirmhöhe gestreckt, aber bleibt in der Höhe.

Ist es möglich mit DIVs und CSS es so zu machen, dass es ähnlich wie ein Frameset reagiert, das heißt, das linke DIV bleibt FIX und wird immer Bildschirmhoch dargestellt und nur das rechte ändert sich beim Scrollen? Oder, dass das linke dynamisch seine Höhe anpasst?

darph

2008-01-08, 10:10:27

Nein, das geht nicht. Nicht unter unzulässiger Zuhilfenahme von jeder Menge häßlicher Scripterei.

Schöner geht es so (http://www.alistapart.com/articles/fauxcolumns/).

Das Thema hatten wir ja nun schon ein paar mal.

Matrix316

2008-01-08, 11:19:39

Nein, das geht nicht. Nicht unter unzulässiger Zuhilfenahme von jeder Menge häßlicher Scripterei.

Schöner geht es so (http://www.alistapart.com/articles/fauxcolumns/).

Das Thema hatten wir ja nun schon ein paar mal.

2. Ich dachte da gehts um gleich hohe Divs.

1. Irgendwie funktioniert das nicht mit dem Bild und dem Code: background: #ccc url(../images/bg_birch_800.gif) repeat-y 50% 0;

Im Designer siehts zwar so aus, aber in echt macht er nur eine Zeile.

So, habs mal mit ner Table probiert und warum macht ers in der Breite, aber nicht in der Höhe???

<table style="height: 100%; width:100%">
<tr>
<td style=" background-color:Green; ">
</td>
<td style="background-color:Red; ">
</td>
</tr>
</table>

dead.line

2008-01-11, 10:28:28

Ausgangslage: Zwei DIVs nebeneinander (float:left)

Wie bekomme ich es hin, dass ich das linke div immer Fix bildschirmfüllend am linken Bildschirmrand haben kann?

Wenn ich höhe 100% mache, wird es trotzdem nur so weit dargestellt wie Objekte in diesem vorhanden sind. Wenn rechts im DIV ein Objekt angezeigt wird, welches über den Bildschirm hinaus geht, und ich dann runterscrolle, bleibt das DIV natürlich da wo es ist und ein eventuelles Menü verschwindet. Es wird zwar dann auf 100% Bildschirmhöhe gestreckt, aber bleibt in der Höhe.

Ist es möglich mit DIVs und CSS es so zu machen, dass es ähnlich wie ein Frameset reagiert, das heißt, das linke DIV bleibt FIX und wird immer Bildschirmhoch dargestellt und nur das rechte ändert sich beim Scrollen? Oder, dass das linke dynamisch seine Höhe anpasst?

naja es geht schon. Mit Hilfe von sogenannten "Faux Columns" (der Link von Darph behandelt genau das)
Du gibts der linken Spalte einfach ein Hintergrundbild welchem du ne höhe von 100% gibst.
Dann kannste du der linken spalte eine absolute positionierung geben...

absolute = absolute Positionierung, gemessen am Rand des nächsthöheren Vorfahrenelements, das nicht die Normaleinstellung position:static aufweist. Scrollt mit.

so "könnte" es funktionieren, habs noch nicht ausprobiert, werde ich aber gleich mal machen ^^

EDIT:: warum benutzt du Tabellen?

dead.line

2008-01-11, 10:47:06

Ok, das mit "position: absolute" ging nicht, man muss fixed benutzen. Also "position:fixed;"
Die Faux Columns sind sogar gar nicht nötig....

hier meine CSS datei:

body { margin:0;}
#left {
background-color:#666666;
color:#000000;
height:100%;
width:200px;
position:fixed;
padding:20px;
}
#right {
background-color:#009900;
color:#000000;
height:2000px;
width:500px;
margin-left:250px;
padding:20px;
}

und hier meine HTML datei:

<html>
<head>
<link rel="stylesheet" type="text/css" href="layout.css" media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>2 Spalten Layout Test</title>
</head>

<body>

<div id="left">
Linke Spalte
</div>
<div id="right">
Rechte Spalte
</div>

</body>
</html>

damit hast du eine Linke Spalte die immer 100% höhe hat und auch immer im bild bleibt, egal wieviel inhalt in der rechte spalte ist. Die rechte spalte kann jetzt mit beliebig viel Inhalt gefüllt werden. (hab da jetzt nur 2000px höhe reingeschrieben fürs testen)

mfg

Matrix316

2008-01-11, 13:16:10

Super danke. Tabellen hier zum Test. Ansonsten finde ich die oft besser einfacher und schneller zu nutzen fürs Layout als mich durch irgendwelche divs mit obskuren css Daten zu hangeln.

Im Internet sagen zwar viele "Tabellen sind des Teufels" fürs Layout, aber es gibt viele Seiten die das nutzen. Das finde ich auch garnicht verwerflich, denn ein div ist eben nur ein div und die auf das format zu bringen was man will, kann ziemliches geacker werden. Vor allem, weil diese manchmal anders reagieren als Tabellen, je nach dem was man in das Div reintut.

dead.line

2008-01-11, 16:12:14

Im Internet sagen zwar viele "Tabellen sind des Teufels" fürs Layout, aber es gibt viele Seiten die das nutzen. Das finde ich auch garnicht verwerflich, denn ein div ist eben nur ein div und die auf das format zu bringen was man will, kann ziemliches geacker werden. Vor allem, weil diese manchmal anders reagieren als Tabellen, je nach dem was man in das Div reintut.

....geschmackssache ^^ (mit tabellen bist ja auf der "ganz" sicheren seite. damit hat kein browser probleme, nachteil: seite ist relativ statisch, sprich kannst nicht einfach die gesamte seite im design verändern nur durch tausch des Stylesheets ^^ )

Aber ich hoffe das der Code den ich gepostet hab, dir geholfen hat.

mfg

Matrix316

2008-01-11, 21:40:03

Jo, das ist ganz genau das was ich gesucht habe. :)

Matrix316

2008-01-14, 09:59:54

Oder auch net. ;) Mit Firefox geht das, aber beim IE macht er mir das rechte DIV unter das linke (immer noch rechts, nur halt fängts versetzt da an, wo das linke endet). Wenn ich dann beim linken float:left mache, ist das wieder nicht fix und scrollt mit nach oben.

darph

2008-01-14, 15:03:58

http://files.darph.net/bla.html

Schau dir das mal an. Und nun stelle dir vor ich hätte anstatt silver dem Element die Hintergrundfarbe yellow gegeben. Ist es das, was du willst?

<html>
<head>
<title>Faux Columns par excellence</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
border: 0px;
background-image: url("leftstuff.png");
background-repeat: repeat-y;
}

#faux {
width: 150px;
margin: 0px;
padding: 0px;
position: fixed;
border: 0px solid black;
background-color: silver;
color: black;
}

#vrai {
margin-left: 150px;
padding-left: 5px;
}
</style>
</head>
<body>
<div id="faux">
<ul>

<li><a href="http://google.de">Google</a></li>
<li><a href="http://yahoo.de">Yahoo</a></li>
<li><a href="http://youporn.com">Metacrawler</a></li>
</ul>
</div>
<div id="vrai">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>

<p>Und das ist das Bild: <img src="leftstuff.png" alt="Hintergrundbild" /></p>
</div>
</body>
</html>

Bild: http://files.darph.net/leftstuff.png - 150 Pixel breit, 1 Pixel hoch.

Matrix316

2008-01-14, 19:00:03

Fast. Beim Firefox bleibt links das Menü da wo es ist, beim IE scrollt es mit und der Text beginnt erst unterhalb des grauen Kasten links oben.

darph

2008-01-14, 19:27:17

Anders geht es aber nicht. Du kannst mit JavaScript die Position relativ zum ViewPort erzwingen. Aber das ist schlechter Stil.

Generell ist jede Form von Bevormundung schlechter Stil. Der User hat kein Problem damit, wieder nach oben zu scrollen, wenn er woanders hin will. Das ist ein Tastendruck. Sachen, die sich bewegen wirken dagegen immer ablenkend.

Wenn du das wirklich willst, dann geht es nur so. Aber überlege dir gut, ob du es überhaupt unbedingt brauchst.

Matrix316

2008-01-15, 09:04:02

Manchmal ist das was ich will, nicht das was von anderen gewünscht wird. ;)

Wir nutzten in den Webanwendungen für die Firma immer Framesets, die aber mit dem VS2005 nicht mehr in der Designer Ansicht unterstützt werden und testen aus, ob man mit Master Pages sowas nachbilden kann.

DanMan

2008-01-15, 16:30:13

Fast. Beim Firefox bleibt links das Menü da wo es ist, beim IE scrollt es mit und der Text beginnt erst unterhalb des grauen Kasten links oben.
Das wär bzw. ist mir schnurtz. Es sieht etwas anders aus, aber der Nutzer wird nicht wirklich beeinträchtigt. Yahoo nennt das Progressive Enhancement bzw. Graceful Degradation (http://developer.yahoo.com/yui/articles/gbs/index.html), und was für die gut ist, das sollte für dich auch nur recht sein.

darph

2008-01-15, 17:28:52

Manchmal ist das was ich will, nicht das was von anderen gewünscht wird. ;)
Als Designer und Entwickler ist es nicht nur deine Aufgabe, festzustellen, was der Kunde/Auftraggeber will, sondern auch, ihm klarzumachen, was der ganz bestimmt nicht will.

Das der Kunde/Auftraggeber da notorisch schwierig ist, ist leider wahr. ;(