layout entweder mit divs oder tabelle

Status
Nicht offen für weitere Antworten.
N

nobaschwa

Mitglied
Hi!

Ich werde noch wahnsinnig! Ich versuche seit einiger Zeit das Layout einer Seite mit Hilfe von divs zu machen. Irgenwann hatte ich es fertig und es wurde im Safari und Firefox richtig dargestellt...endlich! Aber natürlich nicht im IE. jetzt hab ich die letzten beiden Tage drangesessen, aber ich kriegs einfach nicht hin! Es wird immer wieder was abgeschnitten, der hintergrund geht nicht über die ganze Höhe oder der IE zeigt einfach nur murks an!
So jetzt meine Bitte: Könnte mir jemand dabei helfen das Layout hinzubekommen? , aber halt mitscrollen (z.B. bei Stamm/Ämter steht noch was drunter) und auch im Firefox,Safari und natürlich dem "wunderbaren" IE (zumindest 6) ordentlich angezeigt werden.
Ich habe das jetzt so versucht: Ich habe oben (84px) und links (80px) die navs einfach mit dem gelben Hitergrund hinterlegt und dann oben links ein Bild absolut positioniert, wegen der Rundung. Die beiden Navs sollen die Breite beibehalten und der Inhaltsteil sol die restliche Breite des Fensters einnehmen. (Leider klappt das nicht so wie ich will...entweder ist der Inhaltsteil dan grüßer als 100% oder der Hintergrund geht zwar über die 100% aber danach kommt dann nur noch weiß, wenn der Text länger ist)
Wär echt nett, wenn mir da jemand helfen oder wenigstens nen Tipp geben könnte, bin am verzweifeln!

Danke schonmal

PS: Die Seite bitte im Firefox oder Safari anschauen im IE wird si nicht richtig dargestellt :-(
 
Zuletzt bearbeitet:
Hi,

ich habe mir das Ganze mal angesehen und überarbeitet. Leider konnte ich meine Version nicht
im Safari testen. Sie funktioniert aber im IE 5.0, 5.5 und 6 sowie im Firefox 1.0, im Netscape 7.1
und im Opera 7.44. Kannst mir ja mitteilen, ob sie im Safari ebenfalls korrekt angezeigt wird.

Zu beachten ist, dass der DocType wie im Dokument enthalten beibehalten wird!
HTML: 
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Ich hoffe, das bringt dich weiter.

Ciao
Quaese
 

Anhänge

Super vielen vielen dank! überarbeitet ist gut :-)
Da sind sachen drin da wär ich nie draufgekommen! woher weißt du das denn alles? gibts irgendwo ne Anleitung oder irgendwas wo steht was nicht im IE geht und wie man es umgehen kann?

Es läuft, auch im Safari...
Ich habs schon hochgeladen,
Ich habe aber noch nen paar Probleme:

1. Im IE wird keine Scrollleiste angezeigt (es ist die version 5.2 für den mac) ist das im IE 6 auch noch so?

2. Im Safari kann ich nicht mit der Maus scrollen nur mit der Scrollleiste selbst (aber das ist nicht wirklich schlimm)

3. Ich habe für das rechte Div im inhaltdiv nen margin von 100px (rechts) angegeben damit der Text da umgebrochen wird...im FF und Safari klappt das auch, wo stehen die margin Eigenschaften für den IE?

4. Die obere Nav wird im IE, wenn man auf einen Link klickt, vertikal angezeigt (d.h. ein gelber Bereich schwappt in den Blauen). Die Nav wird richtig angezeigt sobald man über einen Link fährt.

dankeschön nochmal
bis denn
norman
 
Hi,

viel der angewendeten Kniffe sind Erfahrungen. Ein ähnliches Layout habe ich mal bei Stu Nicolls
gefunden. Das habe ich als Grundlage genommen und angepasst.

Nun zu den Fragen:

Zu 1:
Ob die Mac-IEs scrollbare DIVs beherrschen, kann ich nicht mit Gewissheit sagen. Der 6er
sollte es können und die overflow-Eigenschaft ist seit Version 5.0 bekannt.
Vielleicht ist es mit der MS-IE-eigenen CSS-Eigenschaft overflow-y möglich, die vertikale
Scrollbar dauerhaft einzublenden. Dazu musst Du im Selektor * html #rightDiv folgende
Zeile ergänzen.
Code: 
* html #rightDiv{ /* bisherige Definitionen */
                  ovreflow-y: scroll;}
Zu 2:
Scrollbare DIVs lassen sich meiner Erkenntnis nach nur im IE mit dem Scrollrad bewegen
(zumindest unter Windows).

Zu 3:
Die 100px rechter Randabstand werden auch im IE angezeigt. Allerdings hat der IE Probleme
mit der Anzeige bzw. mit der Grössenberechnung. So überschreitet die Breite bis zu einer recht
hohen Auflösung den Anzeigebereich (es werden 90% der Tabellenbreite genommen und dazu
noch die 100px Randabstand). Ich würde deshalb auf den Rand im IE verzichten. Willst Du den
Rand dennoch in Nicht-IE-Browsern haben, so musst Du einen CSS-Filter verwenden.
Füge hierzu nach dem Selektor #rightDiv .inhaltDiv folgende Ergänzung ein:
Code: 
#rightDiv .inhaltDiv{ /* CSS-Definitionen wie bisher belassen */}
* html #rightDiv .inhaltDiv{ margin: 60px 0 55px 0;}
Zu 4:
Beschriebenes Problem kann ich in keinem IE (5.01, 5.5 und 6) nachvollziehen.

Weiteres Problem:
Durch die Formatierung der Navigationsliste auf der linken Seite um 10 Pixel nach oben, werden
diese 10 Pixel im IE abgeschnitten. Damit ist zumindest der oberste Navigationspunkt im IE
nicht erreichbar.
Um Abhilfe zu schaffen, solltest Du nach der CSS-Klasse #leftDiv .inhaltDiv folgendes hinzufügen:
Code: 
#leftDiv .inhaltDiv{  /* CSS-Definitionen wie bisher belassen */}
* html #leftDiv .inhaltDiv{ margin: 0 0 0 -35px;}
Solltest Du mit den Erklärungen nicht zurecht kommen, kann ich Dir die geänderte Datei zukommen
lassen.

Ciao
Quaese
 
dankeschön.

-Das mit dem Scrollen klappt in meinem ie leider trotzdem nicht.
-Scrollen klappt bei mir im FF auch mit Rad.
-Und die Nav wird auch so bei mir richtig angezeigt.
-Mit dem Margin as ist schlecht! Jetzt brauch ich am Ende doch wieder Tabellen um den ganzen kram richtig zu legen. Z.B. die news werden bei mir abgeschnitten (aber da diese eh durch eine Tabelle angezeigt werden ist das nicht so schlimm) Aber wie krieg ich es bei den Texten z.B. unter Stamm/Sippen/Wulf hin? (der FF und Safari machen das ja mit dem margin) ahhh ich hasse den Internet Explorer!

mmmhhhh....vieleicht sollte man das komplette Design doch noch mit Tabellen machen (ja ich weiß das ist blöd, aber es wird wenigstens auch vom IE richtig angezeigt oder?)

bis denn
 
Hi,

ich habe die News-Tabelle jetzt durch DIVs ersetzt. Der rechte Abstand von 100 Pixeln sollte
nun in allen gängigen Browsern eingehalten werden.
Weiterhin habe ich den Abstand vom Content-Teil zum unteren Rand durch ein Distanz-Div
geregelt (bottomDistance). Damit sollte der Abstand in allen Browsern eingehalten werden - vorher
hat der FF Probleme gemacht.

Ich habe auch den Ausschnitt eines Screenshots angefügt, damit Du sehen kannst, wie die
Navigation ohne die Nachbesserung in meinem IE 6 aussieht (ebenfalls im Anhang).

Die geänderte Datei habe ich Dir in den Anhang gepackt.

Ciao
Quaese
 

Anhänge

OK...ist auf dem Server.

Die Seite ist sonst in PHP und die News werden aus ner Tabelle gelesen...deshalb hats nen bißchen länger gedauert. Ich habe dich in den News erwähnt...hoffe das ist dir recht.
Also nochmal ein riesen Dankeschön an dich!
Hast du irgendwelche Vorschläge für die Seite, irgendwas was noch fehlt oder nicht besonders schön aussieht etc.

bis denn
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück