Moin…Moin…
Soweit habe ich das Gerüst für meine Page stehen. Aber jetzt verschiebt sich die Navi nach oben, über den Content, wenn ich das Browserfenster sich verkleinert.
Was mache ich da? Hilft „min-height“ oder "max-height"Angaben?
Nein, der Content schiebt sich unter die Navi, weil zu wenig Platz ist. Das kann man vermeiden indem man dem Content keine feste Breite angibt, sondern mit % arbeitet und alles mit float:left ausrichtet.
Hi,
so pauschal sollte man nicht antworten, zumal % kein Allheilmittel ist.
Ich gebe der Navi gerne eine passende Breite in em und lasse sie floaten oder positioniere sie auch mal absolute und der Content benötigt keine Breitenangabe, um den zur Verfügung stehenden Platz einzunehmen.
Gruß
Ingo
Moin…Danke für eure Antworten. Habe jetzt beide Vorschläge ausprobiert. Aber trotzdem: wenn sich das Browserfenster verkleinert, dann verschiebt sich die Navi trotz eurer Vorschläge.
Die Frage ist natürlich auch immer wie klein ein PC-Monitor oder ein Notebook ist/sein kann, um diesen unangenehmen Effekt darzustellen.
Muss ich wohl mit leben…
Moin,
Die Frage ist natürlich auch immer wie klein ein PC-Monitor
oder ein Notebook ist/sein kann, um diesen unangenehmen Effekt
darzustellen.
200x300px zum Beispiel bei Handys.
Außerden hat die Größe des Monitors hiermit wenig zu tun, sondern nur die Größe des Viewports, und der ist schon meist deutlich kleiner als das Browserfenster. Bedenke - und es gibt tatsächlich Leute, die das ncht wissen! - dass man ein Fenster nicht maximiert haben muss!
Muss ich wohl mit leben…
Hatten wir eigentlich einen Link zur Seite, um detailliert auf Dein Problem einzugehen, oder reichen Dir die Antworten?
Das Thema, wie man ein Design am besten in den Browser bringt, wenn man alle Möglichkeiten, die das WWW so mit sich bringt, berücksichtigen will, ist schier unerschöpflich.
Größe des Viewports, Größe der Schrift, verschiedene Browser, Grafiken ja/nein, Textbrowser, Vorlesebrowser, Barrierefreiheit, körperliche Gebrechen der Nutzer (insb. Augen), usw usf.
Man kann hier viel machen und man sollte nicht zu früh aufhören, seine Website nutzerfreundlich zu machen. Meist erreicht man mit sauberem Arbeiten schon mehr, als jemand, der seine Site „bastelt“.
Liebe Grüße,
-Efchen
Moin…Moin. einen Link hattest Du schon, aber schick ihn Dir hier nochmals vorsichtshalber:
Da kannst Du dann sehen, wenn Du den Browser verkleinerst (oder den View-Port…) dass sich die der Content unter die Navi schiebt.
Liegt vielleicht auch daran, dass die Navi „alleine steht“…
Es gibt, meine ich, einen Code, der das verhindert. Weiss aber nicht, welcher…
Moin,
Es gibt, meine ich, einen Code, der das verhindert. Weiss aber
nicht, welcher…
Das hab ich im letzten Thread schon erklärt, wie das geht.
Setze ein margin-left in #content, um zu verhindern, dass der Content weiter nach links rutscht. (Im Moment hast Du nur ein padding-left, das hier keine Auswirkung hat)
Bei zu kleinen Viewports gibts dann natürlich horizontale Scrollbalken.
Um die auch zu verhindern, muss die Breite des #content dynamisch werden.
Gruß,
-Efchen
Hi,
baue ein div um die navigation und den content und gib ihm ein festes width mit. und zwar die summe aus navi 160 + content 780.
html
css
.neuesDiv {
width: 940px;
}
sorry + die borderbreite also 4*5px
–> width: 960px;
Meine Lösung hat ein div weniger 
MOin…schon wieder Dank für Deine Hilfe. Habe jetzt das margin-left mit px-Anzahl gesetzt. Aber wenn der Bildschirm sich verkleinert schiebt sich der Content noch immer unter die Navi, wenn ich den Bildschirm so klein mache wie es eben geht…
Und dann habe ich festgstellt, dass, wenn der Content sich dadurch irgendwann auch verengt, der Text nicht „mitgeht“. Das heisst, er verschiebt sich ebenfalls, wie nix mehr zu sehen ist. Da gibt es auch eine Lösung, weiss aber auch nicht mehr welche…
… mehr auf http://w-w-w.ms/a48e2e
Moin,
Aber wenn der Bildschirm
sich verkleinert schiebt sich der Content noch immer unter die
Navi, wenn ich den Bildschirm so klein mache wie es eben
geht…
Das liegt daran,weil Du noch immerdas „float:right“ drin hast, was ich schon im letzten Thread als Ursache für Dein Problem bemängelt habe.
Und dann habe ich festgstellt, dass, wenn der Content sich
dadurch irgendwann auch verengt, der Text nicht „mitgeht“.
Das verstehe ich nicht - was Du meinst.
Liebe Grüße,
-Efchen
So, Efchen, jetzt habe ich float aus dem Content raus, margin-left war ja schon drin, aber - der Content schiebt sich immer noch unter die Navi. Einziger Unterschied: Ich kann das Browserfenster jetzt etwas weiter zusammenschieben, bis der Content unter der Navi hängt.
Mehr kann man wohl nicht machen, oder? Danke für Deine Geduld mit mir…
aber - der Content schiebt sich
immer noch unter die Navi.
Aber da sind wir auch schon bei einer Größe, wo es kaum noch Spaß macht, da einen Text zu lesen.
Mehr kann man wohl nicht machen, oder?
Doch 
Dass das jetzt noch so ist, liegt daran, dass Du dem content eine feste Breite gegeben hast, nänmlich 60%. Irgendwann ist neben der Navi kein Platz mehr für 60%, aber unten drunter. Dann rutscht das Element natürlich runter.
Danke für Deine Geduld
mit mir…
Och, alles halb so wild. Aber wenn Du es ein bisschen einfacher haben willst, installier Dir Firebug (für Firefox), damit kannst Du Elemente Deiner Seiten direkt analysieren und auch sofort CSS-Eigenschaften verändern, einfügen und löschen. Da kannst Du dann z.B. das width:60% entfernen und sofort ausprobieren, wie sich das auswirkt.
Noch Fragen?
Liebe Grüße,
-Efchen
Moin nochmal…
also jetzt habe ich den %-Wert bei dem Content-width durch px ersetzt und stelle fest, dass es bei Firefox endlich hinhaut - beim IE aber nicht. Aber soviel ich weiss, gibt es Probleme mit dem Explorer.
Werde wohl noch eine Weile damit „rumspielen“ müssen, bis es da auch klappt. Aber erstmal geht das so für mich in Ordnung. Du sagst ja auch selber, dass es ab einer bestimmten Größe eh kaum noch Spass machen würde Text zu lesen.
Moin,
also jetzt habe ich den %-Wert bei dem Content-width durch px
ersetzt
Komisch, bei mir steht „em“.
und stelle fest, dass es bei Firefox endlich hinhaut -
beim IE aber nicht.
Bei mir funktioniert es gut. Auch im IE (9).
Aber soviel ich weiss, gibt es Probleme mit dem Explorer.
Es gibt nciht „den“ Internet Explorer. Es gibt etliche, und alle sind irgendwie verschieden. Wenn Du vom IE6 redest, da glaub ich das am ehesten, denn dessen Verständnis von CSS war eher mau. Wobei es für die meisten normalen Dinge dann doch gereicht hat.
Werde wohl noch eine Weile damit „rumspielen“ müssen, bis es
da auch klappt.
Was klappt denn nicht?
Aber erstmal geht das so für mich in Ordnung.
Auch für Deine Besucher? Oder schreckt sie es ab?
Du sagst ja auch selber, dass es ab einer bestimmten Größe eh
kaum noch Spass machen würde Text zu lesen.
Das ist wohl richtig, aber das Problem kommt mit der festen Größe ja jetzt nicht mehr zum Tragen. Weder beim FF noch beim IE.
Aber was mir noch aufgefallen ist: Deine Navigation ist 160px breit, der Abstand des #content nach links aber 16em. Das führt bei bestimmten Schriftgrößen dazu, dass sich der Content unter die Navigation schiebt, was Du ja nicht willst. Du musst hier schon mit gleichen Einheiten arbeiten. Wobei px immer eher ungünstig ist, wenn man davon ausgeht, dass verschiedene Menschen verschieden große Schrift haben.
Liebe Grüße,
-Efchen
So, jetzt habe ich bei der Navi u n d dem Content em angeführt. Jetz noch ein paar Feinheiten -anderes Headerbild etc.etc…) Habe schon ein bisserl geänder - kannst ja mal schauen und mir dazu Deine Meinung kurz schreiben…
Für nen Anfänger wie mich geht’s glaub ich erstmal…
Moin,
So, jetzt habe ich bei der Navi u n d dem Content em
angeführt.
Ja, jetzt klappt das mit dem Abstand und dem Umbruch deutlich besser, nciht wahr?
Bleibt allerdings das Problem, dass Dein div#navigation (abgesehen davon, dass es überflüssig ist, weil div eine Gruppe auszeichnet, darin aber bei Dir nur ein Element ist, was keine Gruppe ist) die Breite in em ausgezeichnet hat, die Liste darin aber in px. D.h. wenn die Schrift klein genug ist, ist 10em kleiner als 140px und Deine Navigation ragt über ihren Rahmen hinaus.
Jetz noch ein paar Feinheiten
Och ja, so gesehen kann man auch noch ein paar Grobheiten machen
kannst ja mal
schauen und mir dazu Deine Meinung kurz schreiben…
Aber nicht böese sein
Für nen Anfänger wie mich geht’s glaub ich erstmal…
Naja, wie mans nimmt:
-
„reichen“ tut es immer erst, wenn der Nutzer zufrieden ist, und der kriegt im Moment nicht viel geboten. Anfänger geben sich meist der irrigen Annahme hin, bei einer öffentlichen Website wäre es ausschlaggebend, was sie von der Site halten. Tatsächlich schreibt man Websites aber immer für andere. Schreibt man sie wirklich für sich selbst, dann muss sie auch nicht öffentlich zugänglich sein.
-
Anfänger hin oder her, man muss gesagt kriegen, wie es richtig funktioniert. Hat man einen schlechten Lehrer, wird man HTML/CSS nie richtig lernen oder begreifen. Dein Quelltext zeigt, dass Dein Lehrer eigentlich keine Ahnung von HTML hat. Vermutlich irgendein Baukasten-Code von Weebly? Du deklarierst den Code als HTML5, schreibst aber teilweise üblen Code aus den 1990er Jahren. Mit HTML5 hat das wenig zu tun, mit HTML hat auch nicht so viel gemeinsam, wie es sollte. Veraltete Tags wie font haben im HTML-Code nichts zu suchen, denn das Aussehen wird allein von CSS gemacht („Trennung von Inhalt und Layout“). div-Suppe noch dazu, überall sind divs, von denen man mit Sicherheit etliche weglassen könnte, was auch den Code übersichtlicher und verständlicher machen würde.
Dann da noch dieser ganze JS-Kram von Weebly…ich meine, für einen Anfänger keine gute Basis, um damit echtes HTML/CSS zu lernen.
Wenn Du möchtest, kannst Du hier Hilfestellung bekommen, wie Du das Lernen von HTML/CSS richtig angehen kannst. Du solltest allerdings einen Webspace haben, der Dir Deinen Code nicht mit irgendwelchem überflüssigen Code versaut.
Zum Einstieg kann ich Dir die in FAQ:1161 verlinkte Einführung empfehlen. Für Fragen stehe ich hier im Forum jederzeit gern zur Verfügung.
Für nen Anfänger wie Dich hast Du es Dir vermutlich viel zu umständlich gemacht. Ich wette, den eigentlichen Sinn von HTML hast Du auch noch nicht begriffen (leider tun sich damit sehr viele schwer, obwohls ganz einfach ist). Sollte ich mich irren, wirst Du wissen, was man bei hTML unter „Semantik“ versteht.
Also wie gesagt, ich will Dich nicht runter machen, aber ich glaube, Du machst Dir alles zu schwer und kommst nicht wirklich voran mit allem. Es würde leichter gehen und dabei auch alles viel klarer werden.
Liebe Grüße,
-Efchen
Moin…Moin…
Harte, ehrliche Worte - aber Du hast recht. Ich beschäftige mich zwar schon eine Weile mit HTML und CSS - aber sooo gaaanz durchschaut hab ich’s noch nicht. Das Angebot zur Hilfe werde ich dann gerne annehmen.
Erstmal lade ich mir „Firebug“ runter - so wie Du es mir geraten hast.
Naja, und dann stellt sich mir ja auch immer die Frage, ob man nun zwingend mit HTML5 umgehen muss - oder ob ich das frühere HTML auch noch nutzen kann…
So, das wars dann auch wirklicb - und schoooon wiiieeder ein Danke.
Moin,
Harte, ehrliche Worte - aber Du hast recht. Ich beschäftige
mich zwar schon eine Weile mit HTML und CSS - aber sooo gaaanz
durchschaut hab ich’s noch nicht. Das Angebot zur Hilfe werde
ich dann gerne annehmen.
Ich geb Dir einen Tipp zum Einstieg: Begreife, dass HTML nicht zur Darstellung da ist, sondern nur für die logische Inhaltsauszeichnung, die Semantik. Such Dir raus, was das bedeutet. Trenne immer strikt den Inhalt vom Aussehen und mache das Aussehen nur mit CSS.
Am einfachsten lernt man HTML, indem man sich einen Text nimmt und diesen logisch auszeichnet - ohne sich darum zu kümmern, wie das im Browser aussieht.
Erst, wenn die Semantik vollständig ist, kann man das Aussehen mit CSS bestimmen. Niemals verwendet man strong, weil das im Browser fett dargestellt wird, sondern nur um sehr wichtige Inhalte auszuzeichnen. Niemals nimmt man h2 statt h1, weil h1 zu groß ist. usw.
Naja, und dann stellt sich mir ja auch immer die Frage, ob man
nun zwingend mit HTML5 umgehen muss - oder ob ich das frühere
HTML auch noch nutzen kann…
HTML5 ist noch nicht vollständig verabschiedet. Ich glaub zwar auch nicht dran, dass sich da noch viel ändern wird, aber ich finde fast, dass HTML 4 für den Einsteiger erstmal einfacher ist. HTML5 bringt schon einiges an Neuem und teilweise ändert sich die logische BEdeutung einiger Tags, je nachdem, in welchen Containern sie untergebracht sind.
Ich denke auch, dass man erstmal begreifen muss, was HTML ist (Semantik), bevor man HTML5 verstehen kann. Denn für jemanden, der glaubt, mit HTML mache man Optik, ist HTML5 völlig unverständlich, weil sich optisch natürlich fast nichts ändert.
So, das wars dann auch wirklicb - und schoooon wiiieeder ein
Danke.
Immer wieder gern.
Liebe Grüße,
-Efchen