CSS Zweispaltiges Layout (keine feste Breite)

[te one]

Hallo,

ich bin ganz neu in CSS und habe ein Problem:
(bis jetzt sind nur 2 der 3 Spalten im Layout vorhanden)

div#left {
background: grey;
position: fixed;
height: 100%;
width: 20%;
left: 0px;
float: left;
}
div#main {
background: white;
position: relative;
height: 100%;
width: 80%;
float: right;
}
p#main {
text-align:left;
clear:both;
}

Left ist links das Menü und Main soll rechts die Hauptseite sein.

Nun möchte ich allerdings, dass das left-div nicht immer 14% hat sondern sich dynamisch ändern kann.(Würde also gerne die width-Angabe rausnehmen)
Wie definiere ich nun die Breite des Main-Divs??
Weil width von div#main müsste ja 100%-div#left.width sein, damit das hinhaut.

Vielleicht hab ich auch den falschen Ansatz. Wie gesagt mein erstes Layout mit CSS...

Vielen Dank im vorraus

 

[freak96]

Bin jetzt auch kein CSS-Ass, Ich mache es aber immer so, dass ich das Linke Menü in das rechte Inhalts-div packe:

<div id="main">
   <div id="left">
      <!-- Hier kommt das Navi rein -->
   </div>
<!-- Hier kommt der Inhalt rein --->
</div>

Jetzt kannst du #left einfach nach links floaten. Der Container richtet sich jetzt automatisch nach der größe des Inhalts. Mit min-width und max-width kannst du die Containergröße noch eingrenzen.

Ansonsten kann ich auch YAML sehr empfahlen.

 

[berto]

wir haben die spalten layouts mithielfe dieser seite gelernt:
http://www.webmaster-crashkurs.de/css-lernen.htm
wir haben sie gut gefunden und haben alles geschafft. lies es dir einfach einmal durch..

 

[te one]

Bin jetzt auch kein CSS-Ass, Ich mache es aber immer so, dass ich das Linke Menü in das rechte Inhalts-div packe:

<div id="main">
   <div id="left">
      <!-- Hier kommt das Navi rein -->
   </div>
<!-- Hier kommt der Inhalt rein --->
</div>

Jetzt kannst du #left einfach nach links floaten. Der Container richtet sich jetzt automatisch nach der größe des Inhalts. Mit min-width und max-width kannst du die Containergröße noch eingrenzen.

Hm, das hatte ich auch schon probiert, nur hat nicht funktioniert (obwohl ich auch dachte, dass das geht).
Hab das aber jetzt noch durchprobiert und herausgefunden, dass das ganze geht, solange man die position des Navis nicht auf fixed setzt.
Ich möchte aber, dass das Menü immer sichtbar bleibt Wie mach ich denn das jetzt...

div#left {
background: grey;
<!-- wenn ich das position: fixed rausnehme, gehts! -->
position: fixed;
height: 100%;
left: 0px;
float: left;
}
div#main {
background: white;
}

Aufbau bzw. Verschachtelung der DIVs ist jetzt so wie du es oben beschrieben hast

 

[Turas]

Lass mal das position: fixed bzw relative weg. Genauso kannst du die Hoehenangabe weglassen.

Zu dem Problem:
Mit der Angabe von width sagst du doch, wie breit es sein soll. Wo liegt das Problem? 20% bei width sagt, dass es 20% der Bildschirmbreite breit sein soll.

 

[te one]

Das Menü soll aber fixed sein. D.h. es bleibt trotz Scrollen immer links an der Seite

Außerdem soll sich das Menü über die komplette Höhe erstrecken (damit die ganze Linke seite diese Hintergrundfarbe bekommt)

Zu width: 20%
Das habe ich aktuell nur so gemacht. Später möchte ich diese Angabe rausnehmen damit das Menü automatisch kleiner bzw. größer (je nach Inhalt) wird.
Genau hier liegt aktuell das Problem.
Daraus folgt ja auch, dass ich nicht weiß wie groß der rechte Teil sein darf (Denn wenn der Linke dann zB nur 10% einnimmt soll das rechte 90% haben)
Wenn man nochmal nen div rumpackt und das Menü nicht fixed ist, dann geht das. Aber mit nem fixed Menü gehts anscheinend nicht so einfach

 

[Turas]

In der Regel sind fixed Container fuer die Menus keine gute Idee, da es wahrscheinlich den meisten sehr ungewohnt vorkommt.

Wie du schon geschrieben hast, funktioniert das so wie du es dir vorstellst mit fixed containern nicht, da diese komplett aus den Kontext genommen werden, unabhaengig von der Position im HTML Quelltext.
Aber auch das automatische anpassen ohne fixed funktioniert wahrscheinlich nicht so, wie du dir das vorstellst. Nach irgendwas muss sich die Breite der Container richten. Du sagst, der Container soll sich entsprechend des Inhaltes anpassen. Ja schon, aber wie genau? Woher soll der Browser wissen, was du mit "Anpassen entsprechend des Inhaltes" genau meinst? Der Container kann so schmal sein, dass nur ein Wort pro Zeile reinpasst oder so breit, dass der gesamte Inhalt in eine Zeile passt.
Ohne Angabe von width wird die komplette verfuegbare Breite eingenommen. Sobald du aber das float Attribut setzt, musst du sowieso eine width angeben.

 

[te one]

Hm wenn man das ganze so sieht, hast du natürlich recht.

Ich wollte halt sowieso ein Logo einbauen dann hätte sich die breite danach gerichtet.
Aber bei der Grafik gebe ich ja auch die Breite an, dann kann ich das für das Menü ja auch machen^^

Also gut dann mach ich das einfach so (20% sind aber fast ganz schön viel oder, noch dazu wenn ichs fixed mache?) Wieviel nimmt man denn da so? 15%? Grafiken passe ich halt entsprechend an
Ps: Jetzt überrede mich bitte nicht das fixed wegzumachen. Das bleibt dran

 

[Turas]

20% ist nicht zu viel, mache es einfach so breit wie es dir gefällt. Du solltest aber bedenken, dass das Menu dadurch auf Breitbildmonitoren zu breit aussieht und auf schmaleren wie Handys zu klein. Deshalb nimmt man oft feste Pixelbreiten für die Menus.

Noch mal zum fixed: Schau dir mal das Beispiel im Anhang an. Bei sehr langen Texten erreicht man bei einem fixed Container nicht mehr den gesamten Inhalt! Und insbesondere auf kleinen Bildschirmen (wie Handys) könnte das zum Problem werden. Das sollte dir zumindest bewusst sein ;-)

Edit: Das Problem könnte man evtl. umgehen indem man einen Scrollbalken bei content overflow erlaubt, ist aber nicht sonderlich schön anzusehen.

Edit2: Dasselbe Beispiel mit Scrollbalken habe ich mal zum Anhang hinzugefügt.

 

[te one]

Ok, dann mach ich einfach das Menü mit ner festen Breite.

Das die linke Leiste eh nur als Menü dient sollte die nie arg voll werden (soviele Menüpunkte gibts bei mir nicht).

Wenn ich aber jetzt auch noch Handybenutzer berücksichtige, dann darf ich ja am besten alles i-wie umbauen.

Handybenutzer sind erstmal nicht berücksichtigt. Wenns mal irgendwann kommen sollte bekommen die ihr eigenes CSS-File, dann passts

 

[sverebom]

Ich würde den Inhalt nicht auf die volle Fläche des Monitors aufblasen, weil die Textzeilen gerade auf Breitbildmonitoren sehr lang/breit werden, und sehr lange Zeilen sind unangenehm für den Leser. Ich weiß gerade nicht aus dem Stehgreif, wie lang die Zeilen maximal sein sollten bzw. wieviele Wörter maximal in einer Zeile stehen sollte. An deiner Stelle würde ich mit einer fixen Breite arbeiten, bei der die Zeilen nicht zu lang werden, oder definierst auch die Schriftgröße fließend. Je größer der Monitor, desto größer die Webseite und auch die Schrift.

 

[te one]

variable Schriftgröße: Das sieht aber dann auf nem großen Monitor sehr unprofessionel aus.

Hab auch auf einigen Seiten gesehen, dass eigentlich bei weitem nicht die maximale Breite benutzt wird (Ist hier beim Beitragschreiben zB auch so).
Da fragt man sich doch, warum der Trend zu immer größeren TFTs geht?! Damit man mehr von Hintergrundfarbverlauf bzw. Hintergrundbild sieht?!