Gibt es einen Mindestabstand?

Computer: Software & Programmierung HTML & CSS
#1

Hallo allerseits,
nachdem ich mal ein wenig mit dem bereits vor einiger Zeit angesprochenen Problem rumprobiert habe, muss ich mich nochmal an euch wenden. Zuerst aber die Seite:
http://derjesko.de
und die CSS:
http://derjesko.de/mue-style.css

Durch Angabe von einer Prozentbreite, einer max- und einer min-width für die Navigation (.kat) habe ich den gewünschten Effekt erreicht, dass innerhalb eines bestimmten Bereiches eine Browserverkleinerung zu einem verschwinden des hinteren Background-teils zur Folge hat. Des weiteren habe ich den Content (also .below und .readroom) mit einer absoluten angabe am rechten Browserrand ausgerichtet und ihm ebenfalls eine prozentangabe, eine max- und eine min-width gegeben, was soweit auch ganz gut funktioniert.
Mein Problem ist jetzt folgendes: Wenn ich den Browser stark verkleinere, überlagert der Content den Navibereich - das ist auch soweit noch i.O., solange es sich nur um den mit hintergrund gefüllten rechten Rand der Navi handelt. Wenn man ihn aber noch weiter verkleinert, geht der Content aber immer weiter über die Navi (logischerweise), eben auch über den Navitext. Da ist der Browser natürlich schon sehr klein, aber ich hätte trotzdem ganz gerne, dass er das nicht macht, und sich sagen wir nicht weiter als 100 px dem linken rand annähert. Natürlich könnte ich einfach beim content die min-width angabe weglassen, aber dann hab ich so einen schmalen contentbereich, der dann auch nutzlos wäre. Stattdessen soll einfach, wenn der Browser so stark verkleinert wird, 100px links für den rest der verbliebenden Navi verbleiben, und daneben der content (der dann auch seine min-width von 300px erreicht hat) - wenn also das Browserfenster schmaler als 450px ist, soll einfach eine horizontale Scrollleiste erscheinen, so dass ab der breite das layout eben fix ist. Logisch wäre da so etwas wie ein zusätzlicher linksabstand, der aber auch nur einen mindestwert angibt… so wie min-width, nur eben für den abstand. gibt es das? wenn ja, wie sieht das aus? Wenn nein - wie kriege ich das trotzdem hin?
Wäre euch dankbar für ein paar gute Tipps!

beste Grüße,
derJesko

#2

hi,

nachdem Dir so lage keiner schreibt versuche ich Dir mal zu helfen.

Also, ich könnte mir vorstellen das es da was von Selfhtml gibt, bin mir aber nicht ganz sicher. Aber hast Du mal versuch ein mindestabstand zum linken Browserrand zu vergeben, der einfachheit halber nenne ich es mal „min-left: 100px;“. Ich kann Dir nicht sagen ob das geht, aber einen versuch ist es wert.

PS: schreib mal wenn’s geklappt hat :smile: !!!

lg. Meganova

#3

hey Mega,
schön, doch noch ne Antwort zu kriegen :wink:
Nette Idee (die mir auch schon irgendwie zu einfach vorkam) - klappt aber leider nicht. Führt zumindest im Opera zu gar keiner Reaktion… aber den Versuch war es wert :wink:
Sonst noch Ideen?
gruß derJesko

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

#4

Hi!

Dummerweise kennt der IE min-width und max-width nicht. Im Mozilla funktioniert ja alles.

Hast Du denn schon mal versucht, das Ganze mit float zu strukturieren anstelle absoluter Positionierungen?

Gruß, Caro

#5

Hi Jesko,

das mit min-left war schon so ne spontane Idee

Mhhh, aber ich hab mir mal deine Seite angesehen, wenn der Navigator dann wirklich soweit überlagert ist das man den Text nicht mehr sehen kann, ist der Browser ja schon so klein… so klein hat doch niemand sein Browser, oder ???

Naja eine Idee hab ich schon noch, die ist zwar etwas blöd aber:
Du könntest um alle Teile der Seite eine div machen und in diese dann irgend eine Grafik z.B. als footer geben, wenn dann der Browser soweit minimiert wird wie die Grafik breit ist, wird dann die ganze div nicht mehr minimiert, und eine Überlagerung des Menütextes gibt es dann auch nicht mehr.

Ich bin mir zwar sicher das dass eher unspektakulär ist, aber das geht bestimmt.

lg. Meganova

#6

Hey Mega,

so klein hat doch niemand sein Browser, oder ???

normalerweise wohl nicht, aber ich hab z.B. kein Netphone o.ä. zur verfügung, und wer weiß wie das da aussieht…

Du könntest um alle Teile der Seite eine div machen und in
diese dann irgend eine Grafik z.B. als footer geben, wenn dann
der Browser soweit minimiert wird wie die Grafik breit ist,
wird dann die ganze div nicht mehr minimiert, und eine
Überlagerung des Menütextes gibt es dann auch nicht mehr.

Das wäre zwar eine etwas getrixte Lösung, könnte aber tatsächlich funktionieren… den umgreifenden Div habe ich sogar schon, durch den ich ursprünglich die maximalbreite festgelegt hatte. Ist nen Versuch wert!
Danke dir, gruß derJesko

#7

Hey Caro,

Dummerweise kennt der IE min-width und max-width nicht

Ja, ist mir bewusst. Hast du dir das schon im IE angeguckt? Würde mich interessieren, welche der drei min angaben er dann interpretiert - die erste, also prozentuale?
Ich überlege auch nen extra IE-Style einzubinden, bei dem das ganze wie vorher vollkommen fix ist. Das ist dann halt pech… :wink:

Im
Mozilla funktioniert ja alles.

Ja klar, außer dem mindest abstand natürlich :wink:

Hast Du denn schon mal versucht, das Ganze mit float zu
strukturieren anstelle absoluter Positionierungen?

Hab ich schon dran gedacht und auch schon versucht. Dabei sind dann ganz andere Probleme aufgetreten, vor allem mal wieder im IE. Hab das ganze dann auch hier reingestellt und nach zahllosen versuchen, die drastischen verschiebungen irgendwie zu reparieren, haben wir dann gemeinsam festgestellt, dass mit den absoluten Positionierungen diese Probleme nicht auftreten.
Beste Grüße, derJesko

#8

noch mal min-width :wink:
Hab grad noch ne bessere Idee gehabt, statt das mit irgendeiner Grafik zu lösen: ich hab dem umfassenden Div (".main") einfach auch eine min-width gegeben, 500px, also 300 für den content und 200 für die Navi, wenn also das Browserfenster schmaler wird als 500 px, gibts einfach ne zusätzliche horizontalleiste - und es funktioniert!!! Danke dir :wink:
Der nächste Punkt wär natürlich der IE, der das ganze min- und max- zeug noch nicht interpretiert. Ich weiß aber nicht wie er das dann interpretiert (nimmt er die prozentangabe, oder die letzte width angabe und ignoriert das min oder max davor?). da ich mac hab und der IE für mac noch schlimmer ist als der für win kann ich das nicht testen, und browsershots.org ist ja etwas umständlich wenn man das für jede browserbreite nochmal machen muss und immer nur einmal pro tag machen darf… vielleicht kannst du ja mal kurz reinschauen, wenn er nämlich den %-wert nimmt, brauch ich dafür ja auch noch ne lösung… ach je, der liebe IE… :wink:
beste Grüße, derJesko

#9

Re: noch mal min-width :wink:
Hallo Jesko,

Der nächste Punkt wär natürlich der IE, der das ganze min- und
max- zeug noch nicht interpretiert.

Min-Width und Max-Width werden vom IE7 bereits interpretiert. Voraussetzung ist allerdings, dass du einen strikten DOCTYPE wählst und dass die betreffenden Block oder Inline-Block-Elemente floaten oder absolut positioniert sind:

minWidth was introduced in Windows Internet Explorer 7.

The min-width/max-width attributes apply to floating and absolutely positioned block and inline-block elements, as well as some intrinsic controls. They do not apply to non-replaced inline elements, such as table rows and row/column groups. (A „replaced“ element has intrinsic dimensions, such as an img or textArea.)

This property is enabled only under the strict !DOCTYPE.

http://msdn.microsoft.com/en-us/library/ms530811(VS…
http://www.css4you.de/max-width.html

Wenn das Hinderungsgründe sind, kannst du dir im IE immer noch mit Expressions behelfen, die allerdings aktiviertes JavaScript voraussetzen, kein valides CSS sind und möglicherweise die Rechnerleistung stärker beanspruchen als dir lieb ist.

Außerdem musst du, wenn du Expressions verwenden willst, für den IE8 dann ab jetzt wohl in einem META-Tag vorsehen, dass er sich weiterhin so verhält wie der IE7.

http://blogs.msdn.com/ie/archive/2008/10/16/ending-e…
http://msdn.microsoft.com/en-us/library/ms533876(VS…

Gruß Gernot

#10

Hi Jesko,

Hat geklappt… Ich hab mir eben mal deine Seite mit IE8 angesehen und das mit der mindestbreite geht !!!

#11

Tach, Jesco!

Würde mich interessieren, welche der drei min angaben er dann
interpretiert - die erste, also prozentuale?

Meinst Du damit die Angabe für width? Ja, die interpretiert er - mehr oder weniger.
Min-width, max-width und min-left (gibts das überhaupt?) dagegen nicht.
Ich rede übrigens vom IE6, der IE7 interpretiert diese Werte analog dem Mozilla.

Mozilla funktioniert ja alles.

Ja klar, außer dem mindest abstand natürlich :wink:

Äh, doch. Den auch. Auf Windows zumindest.

Gruß, Caro

#12

der IE
Hey Gernot
Danke für die Info! Zur Zeit habe ich auf den Doctype auf Transitional - das könnte ich zwar bei den meisten Seiten (wie zB die Startseite) auf Strict ändern, nicht aber auf den Seiten der Unterkategorie „Visuell“ mit den ganzen Fotos & Grafiken, weil diese per iframe angezeigt werden - das geht doch nicht in Strict, oder? Das heißt wenn, dann könnte ich das nur bei einigen Seiten ändern, und dann ist die Frage, wie das auf die Einheitlichkeit des gesamten Auftrittes wirkt…?
Die absolute Positionierung ist ja kein Problem, das trifft zumindest auf den Content zu, der umfassende Maincontainer ist dies zwar nicht, das ließe sich aber entweder noch machen, oder (falls das neue Probleme hervorrufen würde) auch lassen, da das ja nur im Falle von einem Browserfenster von 500px oder schmaler relevant wird, und dass dann nur bei den IE-nutzern… wäre zur not vernachlässigbar.
Meinst du ich sollte die Seiten ohne iframe auf strict setzen, auch wenn dann die visuell-seiten als einzige anders dargestellt werden?

gruß derJesko

#13

Gut, okay… hab ja jetzt auch schon deine mail gekriegt, danke dir. min-left war nur ein geratener Versuch, der aber nicht geklappt hat, ist aber auch mittlerweile wieder raus. Zum IE7 hat Gernot mir ja auch schon geschrieben.
Tja, und IE6… muss dann wohl vorerst mit der reinen %-angabe für width leben, bis ich mir irgendwas für alle niedrigen IE-versionen hab einfallen lassen…

Das der mindestabstand jetzt im FF klappt, will ich hoffen - hab da ja jetzt noch einiges geändert, im Opera & Safari klappts jetzt auch richtig - war das im FF auch vorher schon? Das wundert mich ehrlich gesagt, wüsste nicht wodurch! :wink: aber egal, hauptsache es funktioniert jetzt…
beste grüße, derJesko