nicht angemeldet
Textumfluss Problem
Hallo Selfhtml Forenleser,
habe da ein Problem mit CSS, auf das ich einfach keine Antwort finde. Bzw. habe ich die Antwort gefunden, sie lässt sich allerdings leider nicht so Anwenden wie gewünscht. Seit zwei Tagen bastle ich jetzt schon an diesem Problem, ich kann nur einfach nicht verstehen warum mein Code sich so verhält wie er es tut und nicht so, wie ich es haben will.
Wenn ich es richtig verstanden habe, müsste das CSS Attribut "float" in einem div-Element automatisch dafür sorgen, das der Text in anderen div-Elementen darunter um diese Box herumfließt. Aus irgendeinem Grund tut er das bei mir allerdings nicht. Ich kann machen was ich will (z-index vergeben, Positionsart ändern, etc), nichts hilft.
Screenshot: http://www.ueberbewertet.de/images/cssproblem.png
Hier die HTML und die CSS Dateien:
http://www.ueberbewertet.de/layouttest/index.htm
http://www.ueberbewertet.de/layouttest/standard.css
(nicht erschrecken, das Design ist sehr "speziell" - und da ich mir alles mögliche an allen möglichen Ecken und Enden abgeschaut habe habe ich vermutlich auch tonnenweise Fehler übernommen :/ )
Falls jemand mal eben drüberschauen könnte ob ich irgendwo einen offensichtlichen Fehler gemacht habe wäre das super. Für Vorschläge wäre ich sehr Dankbar.
Gruß,
-- Matthias
-
Hallo Matthias,
Auf den ersten Blick, würde ich das
<div id="navigation"> <div id="nav_top"><span></span></div> <h3><span>Archive</span></h3> <p><span>Entry</span></p> <p><span>Entry</span></p> <p><span>Entry</span></p> <h3><span>Comments</span></h3> <p><span>Entry</span></p> <p><span>Entry</span></p> <p><span>Entry</span></p> <h3><span>Blogroll</span></h3> <p><span>Entry</span></p> <p><span>Entry</span></p> <p><span>Entry</span></p> <h3><span>Misc</span></h3> <div id="nav_bottom"><span></span></div> </div>und das
h1 { } h2 { } div { } li { } span { }überarbeiten.
Dann würde ich float aus dem Content-Kontainer entfernen.
Padding 0 ist auch überflüssig.
Dem Navigation-Kontainer würde ich noch Position absolute nehmen und ihn im HTML vor den Content-Kontainer setzen.
Schaun wir mal wie es dann aussieht.Grüße, Matze
-
Danke erstmal für die Antwort! Und sorry für die verspätete Antwort meinerseits, hatte vor dem Schreiben vorhin total verpeilt, das ich für heute Abend Konzertkarten hatte (Muff Potter waren toll... ;-) ).
Habe getan wie du vorgeschlagen hast, leider hat das erstmal ein neues Problem gebracht. Beim entfernen des float aus dem content Container ist mir nicht ganz klar, wo da plötzlich der Abstand oben und unten herkommt.
Dieses Konstrukt mit den leeren spans im Navigations container habe ich mir von www.csszengarden.com abgeschaut, weil ich oben und unten Bilder als Rahmen haben wollte und diese Bilder nicht im HTML code erscheinen sollten. Nachher sollte das Design so einfach wie möglich zu ändern sein.
Und die leeren Einträge in der CSS Datei sollten irgendwann mit "Leben" befüllt werden. ;-)
Wie gesagt, ist jetzt alles auskommentiert/entfernt/überarbeitet, das ganze sieht dann so aus:
http://www.ueberbewertet.de/layouttest/index_new.htm
http://www.ueberbewertet.de/layouttest/standard_new.cssNochmal die alte Version:
http://www.ueberbewertet.de/layouttest/index.htm
http://www.ueberbewertet.de/layouttest/standard.cssHabe echt keine Ahnung, was man da noch ändern könnte...
Gruß,
-- Matthias
Hallo Matthias,
Auf den ersten Blick, würde ich das
[...]
überarbeiten.
Dann würde ich float aus dem Content-Kontainer entfernen.
Padding 0 ist auch überflüssig.
Dem Navigation-Kontainer würde ich noch Position absolute nehmen und ihn im HTML vor den Content-Kontainer setzen.
Schaun wir mal wie es dann aussieht.Grüße, Matze
-
Hallo Mathias,
ich hab mir jetzt nicht viel Zeit genommen, aber willst du es so?
Die Grafik für den footer müsstest du noch anpassen.
Grüße, Matze
-
Hallo noch einmal^^,
ich frag mich die ganze Zeit wofür du Grafiken verwendest wenn deren Inhalt aus reinen ASCII-Zeichen bestehen.
Das war eigentlich auch die Ursprüngliche Idee, nur will ich das unbedingt mit diesem alten Amiga Bitmap Font angezeigt haben, den ich in den Grafiken verwendet habe - und ich fürchte, das ich (und vermutlich ca. fünf andere Menschen auf der Welt) die einzigen sind, die die Seite dann so sehen können, wie sie gedacht ist. Wie gesagt, deshalb die Grafiken.
Das ganze soll im Prinzip aussehen wie eine .nfo Datei (http://de.wikipedia.org/wiki/Nfo) - eben sehr "speziell". Eine Art Retro-Warez Romantik... mit der allerdings vermutlich auch nur die fünf Leute was anfangen können, die diesen Font kennen.
Ein weiterer Punkt der mir aufgefallen ist, ist, wie schon gesagt, das Menü.
Für Menüs solltest du Listen verwenden.Das hatte ich mir auch schonmal überlegt, nur im Moment schien es mir designtechnisch einfacher, Textabsätze und Überschriften zu verwenden. Gibt es einen besonderen Grund für Listen? Barrierefreiheit z.B.?
Dann weiß ich nicht genau wozu du die einzelnen Punkte neben <p> noch in ein <span> gesetzt hast. Dann hab ich mehrere leere <span> gefunden.
Es gibt nur zwei leere spans, die ich mir wie gesagt bei csszengarden abgeschaut habe um im Navigationscontainer oben und unten Bilder zu haben.
Die ganze span Konstruktion fand ich recht praktisch, da man für die im CSS nochmal eigene eigenschaften vergeben kann (und sie alleine normalerweise keine haben). So ist es z.B. möglich, im h1 eine Grafik als Überschrift anzuzeigen und im span dann den angezeigten Text durch "display:none" abzuschalten. Ohne span würde sowohl die Grafik als auch der text nicht angezeigt. Beim p tag ist das span allerdings tatsächlich scheinbar etwas überflüssig... allerdings hat csszengarden das auch, deshalb habe ich da erstmal kein Problem gesehen. Der Inhalt (entry, also das ganze Blindtext/lorem ipsum-gedöns) soll ja nachher sowiso von meinem Blogscript erzeugt werden, das span aus dem template zu nehmen ist dann eine Sache von Sekunden.
Insgesamt kein schöner Quelltext. Sorry, das ist nicht böse gemeint.
Ich kenne das :) . Ist wie beim Programmieren - der Stil von anderen Leuten ist fast immer schlechter als der eigene (zumal das hier mein erstes "richtig komplettes" eigenes HTML Projekt ist - schieb's auf Anfängerfehler ;-) ).
Was würdest du denn verbessern? Wie gesagt, die leeren spans kommen nur an zwei stellen (die im Moment auskommentiert sind) vor und haben von sich aus sowiso keine Eigenschaften. Von den Einrückungen her passt denke ich alles und da ich mit HTML tags sehr sparsam war ist das ganze problemlos xhtml strict kompatibel.
Das CSS muss natürlichnochmal komplett überarbeitet werden, sobald endlich alles aussieht wie es aussehen soll... z.B. ist margin-left und margin-right und nochmal ein margin direkt hintereinander tatsächlich nicht schön, da hast du auf jeden Fall recht.
Als Tipp, versuch nicht mit float:left _und_ float:right zu arbeiten, sondern z.B. nur den Content nach rechts floaten. Das Menü erscheint dadurch automatisch links. Das ist ja der Sinn von float.
Hm, also genau andersherum wie ich das gestern Abend noch gemacht habe?
Hallo Mathias,
ich hab mir jetzt nicht viel Zeit genommen, aber willst du es so?
Die Grafik für den footer müsstest du noch anpassen.
Vielen Dank für deine Hilfe, aber leider ist es das nicht ganz. ;-)
Die Breite der Hintergrundgrafik sollte so bleiben wie sie war, unterhalb der Navigationsleiste soll der Text auf der kompletten Breite angezeigt werden. Was ich versuchen wollte war, die Box mit dem Content mit der Navigationsleiste zu überdecken und den Text in der Box an der Navigationsleiste vorbeifließen zu lassen. Das ist eben das Proble, das ich dabei habe... wenn ich "float" richtig verstanden habe, sollte das aus der Tüte so funktionieren.
-
Hallo,
(..) nur will ich das unbedingt mit diesem alten Amiga Bitmap Font angezeigt haben(..)
Aha. Thx for info.
Eine Art Retro-Warez Romantik... mit der allerdings vermutlich auch nur die fünf Leute was anfangen können, die diesen Font kennen.
Diese Art des Layouts wird immernoch in z.B. *.nfo Dateien verwendet.
Allerdings ebend mittlerweile normalerweise mit Courier dargestellt.
Vielleicht wär das auch eine Alternative.Gibt es einen besonderen Grund für Listen? Barrierefreiheit z.B.?
Nein, Semantik. Ein Menü ist eine Liste von Menüpunkten.
Ein Absatz ist etwas völlig anderes.(..)allerdings hat csszengarden das auch, deshalb habe ich da erstmal kein Problem gesehen(..)
Was würdest du denn verbessern?Ich würde nicht unbedingt auf die Fähigkeiten Dritter vertrauen und die Datei einstampfen. Sorry.
Dann würde ich es selbst machen, denn dann weiß ich warum wann was nicht so funktioniert wie ich es will.
Vor allem als 'Anfänger' solltest du diesen Rat beherzigen.Als Tipp, versuch nicht mit float:left _und_ float:right zu arbeiten, sondern z.B. nur den Content nach rechts floaten. Das Menü erscheint dadurch automatisch links. Das ist ja der Sinn von float.
Hm, also genau andersherum wie ich das gestern Abend noch gemacht habe?
Im Prinzip ist es egal, aber wenn du nur 2 Kontainer nebeneinander willst, brauchst du nur 1 mal float.
Vielen Dank für deine Hilfe, aber leider ist es das nicht ganz. ;-)
Die Breite der Hintergrundgrafik sollte so bleiben wie sie war, unterhalb der Navigationsleiste soll der Text auf der kompletten Breite angezeigt werden. (..) wenn ich "float" richtig verstanden habe, sollte das aus der Tüte so funktionieren.
Dann hast du float falsch verstanden.
Nimm aus meiner Version das float und die width Angabe aus dem Content-Kontainer, dann solltest du glücklich werden oder?Grüße, Matze
-
-
-
Hallo noch einmal^^,
ich frag mich die ganze Zeit wofür du Grafiken verwendest wenn deren Inhalt aus reinen ASCII-Zeichen bestehen.
Du könntest z.B. das ganze Layout ohne Grafiken 'nachbauen' und hättest dann noch den Vorteil, dass man sich die Größe bequem einstellen kann ohne dass das Layout zerspringt.Ein weiterer Punkt der mir aufgefallen ist, ist, wie schon gesagt, das Menü.
Für Menüs solltest du Listen verwenden.Dann weiß ich nicht genau wozu du die einzelnen Punkte neben <p> noch in ein <span> gesetzt hast. Dann hab ich mehrere leere <span> gefunden.
Insgesamt kein schöner Quelltext. Sorry, das ist nicht böse gemeint.
Als Tipp, versuch nicht mit float:left _und_ float:right zu arbeiten, sondern z.B. nur den Content nach rechts floaten. Das Menü erscheint dadurch automatisch links. Das ist ja der Sinn von float.
Grüße, Matze
-
-