CSS-layout geht nicht so wie ich will

  1. beebop69

    beebop69 Thread Starter MacUser Mitglied

    Mitglied seit:
    23.08.2004
    Beiträge:
    457
    Zustimmungen:
    0
    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)
     
    beebop69, 20.09.2004
    #1
  2. lengsel

    lengsel MacUser Mitglied

    Mitglied seit:
    25.11.2003
    Beiträge:
    4.553
    Zustimmungen:
    53
    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
     
    lengsel, 20.09.2004
    #2
  3. beebop69

    beebop69 Thread Starter MacUser Mitglied

    Mitglied seit:
    23.08.2004
    Beiträge:
    457
    Zustimmungen:
    0
    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...
     
    beebop69, 20.09.2004
    #3
  4. lengsel

    lengsel MacUser Mitglied

    Mitglied seit:
    25.11.2003
    Beiträge:
    4.553
    Zustimmungen:
    53
    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
     
    lengsel, 20.09.2004
    #4
  5. beebop69

    beebop69 Thread Starter MacUser Mitglied

    Mitglied seit:
    23.08.2004
    Beiträge:
    457
    Zustimmungen:
    0
    Also ich habe es jetzt hinbekommen.
    Ohne irgendeine float-angabe.
    Aber ganz kapiert habe ich es immer noch nicht... :rolleyes:
     
    beebop69, 21.09.2004
    #5
  6. mec

    mec MacUser Mitglied

    Mitglied seit:
    17.12.2003
    Beiträge:
    369
    Zustimmungen:
    1
    Verrätst du uns auch wie? Wäre ja vielleicht ganz interessant...
     
    mec, 24.09.2004
    #6
  7. beebop69

    beebop69 Thread Starter MacUser Mitglied

    Mitglied seit:
    23.08.2004
    Beiträge:
    457
    Zustimmungen:
    0
    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;
    }
     
    beebop69, 25.09.2004
    #7
  8. travel

    travel MacUser Mitglied

    Mitglied seit:
    21.09.2004
    Beiträge:
    419
    Zustimmungen:
    1
    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)
     
    travel, 29.09.2004
    #8
  9. beebop69

    beebop69 Thread Starter MacUser Mitglied

    Mitglied seit:
    23.08.2004
    Beiträge:
    457
    Zustimmungen:
    0
    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... :rolleyes:
     
    beebop69, 29.09.2004
    #9
Die Seite wird geladen...
Ähnliche Themen - CSS layout geht
  1. mingorius
    Antworten:
    1
    Aufrufe:
    786
    Chuonrad
    22.01.2014
  2. Altair
    Antworten:
    6
    Aufrufe:
    755
    starknights
    12.10.2008
  3. ben-pen
    Antworten:
    3
    Aufrufe:
    583
    ben-pen
    15.05.2008
  4. sir.hacks.alot
    Antworten:
    8
    Aufrufe:
    610
    sir.hacks.alot
    21.11.2007
  5. Oliver23
    Antworten:
    2
    Aufrufe:
    447
    Oliver23
    13.10.2007