Brauche (immer noch) Hilfe beim Layout

[Sphynx]

Hallo zusammen,

ich bastel immer noch an einer Seite.
Wäre super, wenn mir jemand erklären könnte, wie ich das denn hinbekomm, dass es funktioniert.

Ich hab die Seite grad durch den Validator gejagt - der hat grünes Licht gegeben.

Die Seite um die es geht findet sich hier:
http://flightlines.eu/test/index.html

Ich hab auch noch als Beispiel eine Unterseite hochgeladen:
http://flightlines.eu/test/falknerei.html

CSS ist hier:
http://flightlines.eu/test/falknerei.css

Mir machen die verschachtelten divs Kopfschmerzen, einige habe ich gefloatet, andere musste ich mit position:relative machen (da ja sonst der z-index nicht funktioniert).

Hier mal ein paar Fragen:
Betr. index.html
1.) Warum ist im FF der Zeilenabstand der letzten Zeile größer als beim Rest?

Betr. falknerei.html
2.) Warum wird im FF ein Teil des Textes umgebrochen und die oberen 2 Abschnitte aber nicht?

3.) Warum ist die Textbox in der Mitte und die Bildbox rechts im IE nicht auf der gleichen Höhe wie die linke Box?

Danke schonmal für eure Hilfe!

[Struppi]

CSS ist hier:
http://flightlines.eu/test/falknerei.css

Ich kann dir nur dringend davon abraten, mit soviel position zu arbeiten.

position:absolute braucht man eigentlich nur in seltenen Ausnahmefällen, wenn man ein bestimmtes Element aus dem Flus nehmen möchte und an einer bestimmten Stelle positionieren will. Alles andere sollte sich so ausbreiten können, wie es Platz hat und mit padding und margin nach den Vorgaben angepaßt werden. Das ist das tolle an HTML/CSS. Das Layout paßt sich dem Browser an und muss daher nicht positioniert werden. Er ist kein Stück Papier mit einem festen Maß (daher sind die Druckgrößen pt auch nicht sinnvoll).

So wie du es jetzt machst, machst du dir mehr Probleme (wie man sieht) als es sein müßte.

Struppi.

[Sphynx]

CSS ist hier:
http://flightlines.eu/test/falknerei.css

Ich kann dir nur dringend davon abraten, mit soviel position zu arbeiten.

position:absolute braucht man eigentlich nur in seltenen Ausnahmefällen, wenn man ein bestimmtes Element aus dem Flus nehmen möchte und an einer bestimmten Stelle positionieren will. Alles andere sollte sich so ausbreiten können, wie es Platz hat und mit padding und margin nach den Vorgaben angepaßt werden. Das ist das tolle an HTML/CSS. Das Layout paßt sich dem Browser an und muss daher nicht positioniert werden. Er ist kein Stück Papier mit einem festen Maß (daher sind die Druckgrößen pt auch nicht sinnvoll).

So wie du es jetzt machst, machst du dir mehr Probleme (wie man sieht) als es sein müßte.

Struppi.

Nun ja, ich glaube nicht, dass das Format der Schriftgröße hier entscheidend ist, oder? Meinetwegen änder ich das auch gern in em. Genauso die Navigation - meinetwegen kommentier ich die aus und änder die dann anschließend, was ich ja eigentlich auch noch vorhatte - das ändert aber nichts an meinem Problem.
Wenn mir jemand da weiterhelfen könnte, wär ich sehr dankbar.

[Struppi]

Struppi.

Bitte lass nur den Text stehen, auf den du Antworten möchtest, Danke.

Nun ja, ich glaube nicht, dass das Format der Schriftgröße hier entscheidend ist, oder?

Die Bemerkung zu den Eineheiten, war lediglich ein kleiner Tipp, eine Randbemerkung, deshalb steht sie auch nur in Klammern.

.. - das ändert aber nichts an meinem Problem.

Das Problem ist die Positionierung, was ich dir aber auch gesagt hatte.

Struppi.

[Sphynx]

Das Problem ist die Positionierung, was ich dir aber auch gesagt hatte.

Ja, wie gesagt - hast du ein Lösungsvorschlag, wie ich das anders hinbekomme?

position:absolute kommt nur noch in der Navigation vor und die is von dem Ganzen eh nicht betroffen. Ich hab die mal auskommentiert, dadurch ändert sich an der Textbox und der Bildbox rechts auch nichts.

[Struppi]

position:absolute kommt nur noch in der Navigation vor und die is von dem Ganzen eh nicht betroffen. Ich hab die mal auskommentiert, dadurch ändert sich an der Textbox und der Bildbox rechts auch nichts.

Wenn ich mir die CSS Datei anschaue ist die immer noch voller position Angaben.

so oder so ist es schwierig in einem fertigen Layout mit einer CSS Datei die anscheinend viele unnötige Angaben enthält rauszufinden was das Problem ist. sinvoller wäre es, wenn du ein minimal Beispiel bust wo man sieht was falsch ist und welche CSS Angaben zum tragen kommen.

Struppi.

[Sphynx]

Wenn ich mir die CSS Datei anschaue ist die immer noch voller position Angaben.

Ich dachte, das Problem sei die position:absolute?
Die position:relative brauch ich, damit die Sache mit dem z-index funktioniert, da sich viele divs bei mir überlagern, ist das die einzige Möglichkeit, die ich kenne, um die Reihenfolge der Anordnung zu bestimmen.

sinvoller wäre es, wenn du ein minimal Beispiel bust wo man sieht was falsch ist und welche CSS Angaben zum tragen kommen.

Wie gesagt, ich wüsste nicht, was ich irgendwie anders machen sollte.
Deswegen bin ich hier.

[Struppi]

sinvoller wäre es, wenn du ein minimal Beispiel baust wo man sieht was falsch ist und welche CSS Angaben zum tragen kommen.

Wie gesagt, ich wüsste nicht, was ich irgendwie anders machen sollte.
Deswegen bin ich hier.

Naja, wie gesagt bei einem soweit fortgeschrittenem Layout, das zudem eine DIV-Suppe ist, ist es schwierig zu sagen wo konkret das Problem ist und wie du es umgehst.

Wenn ich versuche dein Problem nachzubauen, gelingt mir das erst, wenn ich das äußere Element (in deinem Fall #content) absolut positioniere und dann wird das Bild durch den negativen margin Wert unter den Text geschoben.

Ich halte auch die vielen position:relative für überflüssig, aber ich überblick in deinem Code nicht, für was du welches Element wirklich brauchst oder wo du dir es unnötig schwer gemacht hast. Aber das hast du zweifelsohne, wie schon gesagt, sinnvoller ist es ein Layout schrittweise zu enwickeln und dann auch zu testen, damit du siehst ab welchne Punkt die Probleme auftauchen. Und vor allem nicht bei jedem Darstellungsfehler, mit heißgestrickten "Lösungen" zu arbeiten, sondern den Ursachen auf den Grund zu gehen.

Struppi.

[Sphynx]

Wenn ich versuche dein Problem nachzubauen, gelingt mir das erst, wenn ich das äußere Element (in deinem Fall #content) absolut positioniere und dann wird das Bild durch den negativen margin Wert unter den Text geschoben.

Ja eben, genau das Problem hab ich auch. Wenn du ne andere Möglichkeit siehst, wie man das sonst machen könnte, bin ich für jede Lösung dankbar...

[Struppi]

Wenn ich versuche dein Problem nachzubauen, gelingt mir das erst, wenn ich das äußere Element (in deinem Fall #content) absolut positioniere und dann wird das Bild durch den negativen margin Wert unter den Text geschoben.

Ja eben, genau das Problem hab ich auch. Wenn du ne andere Möglichkeit siehst, wie man das sonst machen könnte, bin ich für jede Lösung dankbar...

Wie gesagt, das Problem hängt mit vielen Faktoren zusammen, da dir aber anscheinend an einer Quick and Dirty Lösung mehr liegt als an einem sauberen Schnitt, der sowohl dein CSS als auch dein HTML entrümpeln könnte, würde ich sagen, du musst den negativen margin Wert rausschmeissen. Dann ist zumindest das Bild nicht mehr unter dem Text.

Struppi.

[Sphynx]

Wie gesagt, das Problem hängt mit vielen Faktoren zusammen, da dir aber anscheinend an einer Quick and Dirty Lösung mehr liegt als an einem sauberen Schnitt, der sowohl dein CSS als auch dein HTML entrümpeln könnte, würde ich sagen, du musst den negativen margin Wert rausschmeissen. Dann ist zumindest das Bild nicht mehr unter dem Text.

Ja nee, wenn du mir behilflich bist, würd ich das schon ganz gern richtig machen. Wie gesagt, ich weiß es halt einfach nicht besser...

[LX]

Mir machen die verschachtelten divs Kopfschmerzen, einige habe ich gefloatet, andere musste ich mit position:relative machen (da ja sonst der z-index nicht funktioniert).

An sich ist es kein Problem, divs zu verschachteln, solange man den Fehler meidet, Markup zu Layout-Zwecken einzusetzen.

Ich würde Dir vorschlagen, das vorhandene Layout lediglich als Designvorlage zu verwenden und erst mal ein semantisches Markup zu schreiben (ein content-div, das ein header-div, ein navi-div und ein main-div enthält).

Gruß, LX

[Sphynx]

Ähh.. ich dachte, das hätte ich gemacht?
Es gibt doch ein content div, mit einem banner-div, (das die Navigation enthält), und ein main-div.