CSS-layout geht nicht so wie ich will

[beebop69]

Habe heute anscheinend ein Brett vor'm Kopp.
Ich habe ein ganz einfachers CSS-Layout in Dreamweaver MX 2004 gebaut;
Header, Navi links, Content rechts. Diese 3 teile per div's gebaut und mit einem ID-Selektor definiert. ok soweit.
habe alle 3en je eine Hintergrundgrafik eingestellt, aber ich bekomme es nicht hin, dass die Grafiken bündig sitzen, sprich das layout sieht im browser total verschoben aus. Weiss jemand Rat?

Hier kann man das chaos anschauen:
malteserorden.com/index02.htm
CSS-Datei: maltistyle.css

(NEIN, es ist keine offizielle Seite der Malteser)

 

[lengsel]

Also wenn ich das richtig sehe und verstehe wird die Grafik im Bereich "content" vom Rest verdeckt, und das soll wohl so nicht sein. Solange das content-div aber aus dem Seitenflow genommen ist (float: none) weiss es nicht wohin und bleibt per Browserdefault links oben im Eck liegen. Probier doch mal dem Ding eine Positionierung zuzuweisen.
Ausserdem ist es unschön von DW im Header der Seite nochmal CSS unterzubringen. Das könnte durchaus auch in die maltistyle.css ausgelagert werden.

EDIT: Sehe gerade dass es sich bei dem verdeckten Bild um das "navi-div" handelt und nicht wie zuerst vermutet um content. Ändert aber nichts am Tip: probier mal was passiert wenn Du die Zeile mit der floating-Information löscht (und evtl. noch an der Positionierung rumspielst).

Grüße,
Flo

 

[beebop69]

Also ich habe diverse Dinge jetzt ausprobiert,.
navi und content mit float:left -> keine änderung
navi und contnet mit top:113px -> keine änderung
position mal auf "absolute", dann wieder auf "relative" gesetzt, aber bringt auch nicht wirklich was.

Ich will ja von den tabellen weg, aber ich bekomme hier echt graue haare...
habe die momentane version noch mal hochgeladen...

 

[lengsel]

Hast Du mal mit den "background-attachment"-Attributen rumgespielt?

Ach ja: Praktische Ausgangsbasis für eigene Layoutversuche:
http://www.csscreator.com/version2/pagelayout.php

Grüße,
Flo

 

[beebop69]

Also ich habe es jetzt hinbekommen.
Ohne irgendeine float-angabe.
Aber ganz kapiert habe ich es immer noch nicht...

 

[mec]

Verrätst du uns auch wie? Wäre ja vielleicht ganz interessant...

 

[beebop69]

ich habe wie gesagt eine kopfleiste, eine navi vertikal links, einen contentbereich und einen container, der das ganze zentriert.
So sieht das in meinem externen stylesheet aus:

div#navi {
height: 655px;
width: 186px;
background-position: top left;
background-image: url(images/navi.jpg);
background-repeat: no-repeat;
padding-top: 13px;
position: absolute;
left: 0px;
top: 113px;
}
div#content {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
width: 838px;
background-position: top left;
background-image: url(images/hg-content.jpg);
background-repeat: no-repeat;
position: absolute;
left: 186px;
top: 113px;
height: 655px;
line-height: 14px;
}
div#header {
background-position: top left;
background-image: url(images/header.jpg);
background-repeat: no-repeat;
height: 113px;
width: 1024px;
position: absolute;
left: 0px;
top: 0px;
}

body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
div#container {
position:relative;
margin:0px auto;
width:1024px;
}

 

[travel]

Also ich würde eher auf Tabellen bauen - da kann man auch nette Seiten machen. Die Seite ist gerade im Aufbau - funzt aber jetzt schon auf allen Browsern (zumindest den gängigsten)

 

[beebop69]

Klar gehts auch mit Tabellen, habe ich ja selber lange genug verwendet.
Aber wenn man etwas in die Zukunft schaut und den Content im besten falle streng vom Design trennen will, gehts am besten mit CSS.
Zudem ist der Code deutlich schlanker als mit verschachtelten Tabellenstrukturen. Jeder, der mal ein "zerschossenes" Tabellenlayout hatte, weiss wovon ich spreche...