Vorschläge für die Gestaltung

[Sphynx]

Hallo zusammen,
ich verzweifel seit geraumer Zeit an einer Website, die ich erstellen möchte.
Ich hoffe ihr könnt mir weiterhelfen.

Die Website könnt ihr euch hier anschauen:
Burgfalknerei Beilstein

eine subsite gibts hier:
Burgfalknerei Beilstein

die css befindet sich hier:
http://www.flightlines.eu/test/falknerei.css

Ich weiß position-Angaben sind nicht besonders wünschenswert - ich hab die gewünschten Effekte aber einfach nicht anders hinbekommen. Wenn jemand einen besseren Vorschlag hat, ich bin für alles offen.

Habs mit float versucht, hab aber bei überlagernden divs so meine Probleme damit.


Die Navigation (und die darin enthaltenen absolutes) ignoriert bitte einfach (kann man getrost auskommentieren).

Ich habe v.a. mal ein paar Fragen.

Bei der index.html: warum ist in der letzten Zeile des Textes der Zeilenabstand im FF größer als bei den anderen Zeilen?

Bei der falknerei.html: warum wird im FF der text in den beiden ersten Abschnitten nicht umgebrochen?

Bei beiden Seiten im IE: warum befindet sich die Textbox in der Mitte nicht auf der gleichen Höhe wie die linke Box? (Also so wie im FF)

Danke schonmal für eure Hilfe!

 

[neuroleptika]

Bei der index.html: warum ist in der letzten Zeile des Textes der Zeilenabstand im FF größer als bei den anderen Zeilen?

<a target="_self" href="mmarkt.html">[COLOR=DarkRed]>[/COLOR] mehr</a>

Die Spitzklammer (rot) schließt ein Element. Ersetze es und der Abstand ist weg.

Bei der falknerei.html: warum wird im FF der text in den beiden ersten Abschnitten nicht umgebrochen?

Er wird Umgebrochen. Nur nicht da wo du willst.
Gebe .text einen rechten margin (200px) und der text wird vor den Bildern umgebrochen:

#textbox .text {
color:#54311C;
font-family:Arial,sans-serif;
font-size:8pt;
line-height:10.5pt;
[COLOR=DarkRed]margin-right:200px;[/COLOR]
text-align:left;
}

Bei beiden Seiten im IE: warum befindet sich die Textbox in der Mitte nicht auf der gleichen Höhe wie die linke Box? (Also so wie im FF)

Die #mainbox steht unter #leftbox. Du versuchst sie mit einem negativen margin auf die gleiche Ausgangshöhe wie #leftbox zu ziehen.
Auf die Höhe von #leftbox kannst du dich aber nicht in allen Browsern Verlassen. Der IE 6 z.B vergrößert die Box wenn es der Inhalt erfordert.

Auch im Firefox würde das Konstrukt nicht mehr passen wenn die linke Box erweitert werden sollte.

Du könntest dir einen gemeinsamen Ausgangspunkt über den beiden Boxen suchen und von dort absolut positionieren.

Zu Anfang experimentieren viele mit Position-Angaben um sich ein Grundgerüst aufzubauen.
Dein Problem ist typisch für ein Grundgerüst mit position-Angaben. Wegen diesem und ähnlichen Problemen steigen die meisten später auf das Floatmodell um.

 

[Sphynx]

Aha ok, cool. Danke schonmal!

Wie gesagt, ich würds eigentlich auch ganz gerne mit float machen.
Hab das aber v.a. beim Banner mit den verschiedenen überlappenden Divs nicht hinbekommen.

Er wird Umgebrochen. Nur nicht da wo du willst.

Hehehe, ok, dann frag ich anders - warum werden die restlichen Abschnitte bei den Bildern umgebrochen? Die Formatierung ist doch genau die selbe?!
Ich kanns nicht wirklich nachvollziehen.

Die Spitzklammer (rot) schließt ein Element. Ersetze es und der Abstand ist weg.

?? Wie jetzt? Die Spitzklammer ist doch "normaler" Text, also nur ein Gestaltungselement. Die schließende Spitzklammer steht doch davor. Oder interpretiert er das in diesem Fall einfach so - wenn ja, wie krieg ich es hin, dass ich diese Spitzklammer als Gestaltungselement bei den links verwenden kann?

Danke schonmal!!

 

[neuroleptika]

...
Hehehe, ok, dann frag ich anders - warum werden die restlichen Abschnitte bei den Bildern umgebrochen? Die Formatierung ist doch genau die selbe?!
Ich kanns nicht wirklich nachvollziehen.

Kann ich auch nicht nachvollziehen.
Ich habe keine Begrenzung nach rechts gefunden. Deshalb habe ich einfach eine eingefügt. Im ff wird es so richtig dargestellt.

..wenn ja, wie krieg ich es hin, dass ich diese Spitzklammer als Gestaltungselement bei den links verwenden kann?

Mit html-Entitys
Eine schließende Spitzklammer währe Dieser: & #062; (ohne Leerzeichen).
Es gibt aber viel schöner Zeichen, die du verwenden könntest:
mediaevent.de :: Sonderzeichen, HTML-Entities, Hex und Dezimal

 

[prm]

Du tust dir mit deinen vielen absoluten und relativen Positionierungen wriklich keinen Gefallen. Ich würde darauf komplett verzichten, weil es unnötig ist. Das kannst du mit float und margin viel eifacher lösen.
Im Prinzip brauchst du ein dreispaltiges Layout, in das du die entsprechenden Inhalte setzt.
Als Basis könnstest du dich an diesem Beispiel orientieren: Dreispaltiges Layout, zentriert mit fixen Breiten

 

[Sphynx]

Ja, hmm... dann wär ich dir dankbar, wenn du mir erklärst, wie das funktionieren soll. Ich habs versucht und nicht hinbekommen.
Ich krieg hier aber eh demnächst einen Vogel... ;ugl

Ich hab das jetzt mal ein wenig zusammengestampft:

Burgfalknerei Beilstein

http://www.flightlines.eu/test2/falknerei.css

Ich hab versucht, dass rechte Ende vom Banner (div id="ende") irgendwie mit float:right dahin zubekommen, wo ich es jetzt mit position:absolut hingetackert hab. Keine Chance, bzw. ich bin einfach zu blöd dazu.
Kann mir jemand verraten wie das gehen soll? Mein Problem ist v.a. dass es ja über dem div="bgd" schweben soll. Das hab ich nur mit z-index hinbekommen und der funktioniert ja bekanntlich nicht bei float.

Ok - und jetzt verzweifel ich so langsam vollends. Wenn ich die Datei offline im FF anschaue, dann sieht die genau so aus wie im IE7, wenn ich mir meinen link im FF anschaue, sind die beiden Flächen rechten Flächen der Navigation verschoben... :?: WTF :?::?::?:

Was macht es denn für einen Unterschied ob ich die Datei offline oder online anschaue... HILFE!!! :sad:

EDIT:

Als Basis könnstest du dich an diesem Beispiel orientieren: Dreispaltiges Layout, zentriert mit fixen Breiten

Ja das funktioniert nur leider nicht wenn ich überlappende divs habe...

EDIT2:
Ok, hab jetzt bis auf das content-div alles floatend - die Navigation hab ich in einen wrapper gepackt, jetzt passt das auch.
Kann mir jemand erklären, was ich machen müsste, damit das auch im IE6 funktioniert?
Ach und vielleicht weiß ja auch jemand, warum die subnavigation (das was beim mouseover erscheint) im Safari und Opera um 1px nach oben verschoben ist.

links siehe 2 posts weiter oben

Tausend Dank.

 

[ingoS]

links siehe 2 posts weiter oben

Den Hinweis hätte es nicht gebraucht, wenn du statt eines Dreifachposts einfach die neuen Hinweise und Erkenntnisse in deinen letzten Post hineineditiert hättest. :roll:

Zum Problem: Viel Schaden lässt sich schon beheben, wenn du den gefloateten Elementen display: inline; gibst. Das ist zwar eigentlich Quatsch, aber beim Internet Explorer hilft es aus irgendwelchen Gründen.

 

[Sphynx]

Okok... sorry - werd ich in Zukunft so machen.

Zum Problem: Viel Schaden lässt sich schon beheben, wenn du den gefloateten Elementen display: inline; gibst. Das ist zwar eigentlich Quatsch, aber beim Internet Explorer hilft es aus irgendwelchen Gründen.

Welchen Schaden meinst du?
Ich hab versucht den Navigations-divs den Wert zu geben - hat beim IE6 aber so gut wie keinen Unterschied gemacht.

EDIT: Ich habs jetzt (wie ich finde) ganz passabel hinbekommen - im IE7 ist das submenü jetzt halt 1px nach unten verschoben. Das fällt aber weniger auf, als wenn in allen anderen Browsern das menü 1px zu hoch sitzt.