CSS-layout geht nicht so wie ich will

Diskutiere mit über: CSS-layout geht nicht so wie ich will im Web-Editoren Forum

  1. beebop69

    beebop69 Thread Starter MacUser Mitglied

    Beiträge:
    457
    Zustimmungen:
    0
    Registriert seit:
    23.08.2004
    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:
    www.malteserorden.com/index02.htm
    CSS-Datei: maltistyle.css

    (NEIN, es ist keine offizielle Seite der Malteser)
     
  2. lengsel

    lengsel MacUser Mitglied

    Beiträge:
    4.627
    Zustimmungen:
    53
    Registriert seit:
    25.11.2003
    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
     
  3. beebop69

    beebop69 Thread Starter MacUser Mitglied

    Beiträge:
    457
    Zustimmungen:
    0
    Registriert seit:
    23.08.2004
    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...
     
  4. lengsel

    lengsel MacUser Mitglied

    Beiträge:
    4.627
    Zustimmungen:
    53
    Registriert seit:
    25.11.2003
    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
     
    Zuletzt von einem Moderator bearbeitet: 24.10.2015
  5. beebop69

    beebop69 Thread Starter MacUser Mitglied

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

    mec MacUser Mitglied

    Beiträge:
    384
    Zustimmungen:
    1
    Registriert seit:
    17.12.2003
    Verrätst du uns auch wie? Wäre ja vielleicht ganz interessant...
     
  7. beebop69

    beebop69 Thread Starter MacUser Mitglied

    Beiträge:
    457
    Zustimmungen:
    0
    Registriert seit:
    23.08.2004
    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;
    }
     
  8. travel

    travel MacUser Mitglied

    Beiträge:
    419
    Zustimmungen:
    1
    Registriert seit:
    21.09.2004
    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)
     
  9. beebop69

    beebop69 Thread Starter MacUser Mitglied

    Beiträge:
    457
    Zustimmungen:
    0
    Registriert seit:
    23.08.2004
    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:
     
Die Seite wird geladen...
Ähnliche Themen - CSS layout geht Forum Datum
CSS Layouter Web-Editoren 24.08.2011
Dreamweaver + CSS Datei Web-Editoren 11.11.2010
CSS: Schrift schwarz, Hintergrund transparent Web-Editoren 16.06.2010
Suche CSS-Editor mit Live-Preview Funktion Web-Editoren 29.09.2009
Für Fireworks Profis: Wie wiederholbaren Hintergund erstellen?(CSS-Export) Web-Editoren 08.04.2009

Diese Seite empfehlen

Benutzerdefinierte Suche