Kombination von min-width, max-width und prozent?

Computer: Software & Programmierung HTML & CSS
#1

Hallo allerseits,

ich würde gerne die Navigation meiner Website (http://derjesko.de, CSS-Datei: http://derjesko.de/mue-style.css) ein bisschen Breitenvariabler anpassen - bisher habe ich einfach eine feste Breite angelegt, so dass auch der Hintergrund der Navi immer gleichbreit bleibt. Ich hätte es aber gerne so, dass bei einem kleineren Browserfenster die Navigation in ihrer horizontalen Breite „zusammengeschrumpft“ wird, undzwar so, dass notfalls nur der mittlere Teil in der hellblauen Farbe mit dem Text davor sichtbar ist, und die Grafikränder erst links und u.U. auch rechts verschwindet, damit im Fenster Platz für den Content ist (ohne eine horizontale Scrollleiste). Da habe ich jetzt erstmal folgende Idee:

Der Navigationscontainer bekommt eine prozentuale Breite, sagen wir 35%, welche bei 100%iger Ausfüllung der gesamten Seite dem vollen Navigationshintergrundbild entspricht. Dazu kommt dann noch ein max-width: 474px; so dass bei einem breiteren Browserfenster die Navigation nicht übermäßig breit wird (also breiter als das Hintergrundbild). Damit bei einem sehr kleinen Browserfenster kein Problem auftritt, kommt ein min-width:80px; dazu, für den Fall dass 35% des Fensters kleiner sein würde (dann kommt halt ne horizontale Leiste dazu). Außerdem wird der Hintergrund an einem Punkt 160px von rechts entfernt ausgerichtet (background-position: -160px; genau soweit entfernt wie der Textinhalt der Navi) damit zuerst der linke Hintergrundteil verschwindet - geht das?
Ja, so also die gesamte Idee, was sagt ihr dazu? Könnte das funktionieren wie gewollt - und noch viel wichtiger: Wie siehts mit der Kompatiblität aus? Wird min-width & max-width vernünftig interpretiert? Und was passiert bei browsern die das noch nicht können?

Ich weiß, ich könnte es erstmal ausprobieren, wollte nur, bevor ich mir die Mühe machen, fragen - vielleicht hat ja jemand schon Erfahrung damit und kann mir sagen was es da für Probleme geben kann etc.
Dankeschön,
gruß derJesko

#2

Volle Breit(Seite)
Vorschlag:

Das Menü hat eine fixe Position (Top 0px, left 0px) und eine feste breite (width 100px)
Die Inhaltsbox hat ebenfalls die feste Position (Top 0px, left 0px) und die Breite (width 100%).
Dazu kommt aber noch ein linker Aussenabstand von der Menübreite (leftmargin 100px).

Jetzt nimmt der Inhalt 100% der Seite ein, lässt aber links einen Freibereich in Form des Aussenabstandes. In diesem Freibereich liegt das Menü.

#3

Hey Tom,
der Vorschlag ist an sich ganz gut, es gibt nur 2 Probleme:
erstens: der Hintergrund des Inhalts hat eine feste breite (der transparenzeffekt an beiden seiten), bei deinem Vorschlag träte bei weniger Platz das unschöne Abschneiden dieses Hintergrundes auf. bei mehr platz würde der Text über das Hintergrundbild hinausgehen (da dieses auf x nicht wiederholt)
zweitens: die Navi ist eben nicht nur 100 px sondern ein bisschen mehr, d. h. bei zB browserbreite von nur 400 x schrumpft der Inhaltsbereich auf geringere Breite als die Navi - das ist unschön und unzweckmäßig, statt dessen sollte eben der nur-grafische Bereich der Navi verschwinden… deshalb die Idee
gruß derJesko

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

#4

Ränder in extra DIV
Dann mach dein Inhalt-Div einheitlich mit blauem Hintergrund.
Die Ränder können dann in extra Bereiche, die jeweils ein wiederholendes Randbild haben oder eben die Eckbilder als Hintergrund.

Also so:

bild\_ecke | ----------div\_bild\_oberer\_rand----------| bild\_ecke

div\_\_\_\_\_\_\_\_ div\_\_\_\_\_\_\_\_
bild\_\_\_\_\_\_\_ bild\_\_\_\_\_\_\_
seitenrand\_ seitenrand\_
\_\_\_\_\_\_\_\_\_\_\_ Div: INHALT mit blauem -----------
\_\_\_\_\_\_\_\_\_\_\_ Hintergund -----------
\_\_\_\_\_\_\_\_\_\_\_ -----------
\_\_\_\_\_\_\_\_\_\_\_ -----------

bild\_ecke | ----------div\_bild\_unterer\_rand----------| bild\_ecke
#5

Sorry dass ich so lange nicht geantwortet habe, bin zur zeit im Ausland.
Natuerlich liesse sich das machen - dabei wird aber das zweite von mir genannte Problem noch nicht geloest. Ausserdem hatte ich eigentlich vor, das Design nur ueber die CSS Datei zu regeln, und nicht wieder etliche extra-divs in jede HTML-Datei zu schreiben… und wie gesagt, der gerade durch meine min-width max-width Gedanken gewuenschte Effekt der sich auf beiden Seiten verkleinernden Navi ist damit auch noch nicht erzielt. Naja, werde wohl wenn ich demnaechst zurueck bin, mal beides exemplarisch ausprobieren, mal sehen was dabei rumkommt :wink:
Danke fuer die Muehe
gruss jesko