GoLive - Weg von Frames zu CSS, wie ?

Dieses Thema im Forum "Software" wurde erstellt von skydiver, 8. Dezember 2004.

  1. skydiver

    skydiver New Member

    Hallo,

    also ich möchte mir meine Webseite mit CSS anstatt mit Frames erstellen, nur klappt das nicht so wie ich es haben möchte (siehe Bild, Frames I rot = navi; gelb = Logo; grau = Inhalt).

    Also der rote (200px breit, 100% hoch) und gelbe (100px hoch, 100% breit) Bereich (beide sollen fest verankert sein) soll immer das kpl. Browserfenster ausfüllen ohne das dadurch eine Scrolleiste aktiviert wird.

    Der graue Bereich soll ebenfalls das Browserfenster max. Ausfüllen (den Rest, der von den zwei anderen Rahmen noch übrig ist). Sollte der Inhalt im grauen Bereich zu groß fürs fenster sein, soll die Scrolleiste aktiviert werden (der Inhalt vom grauen Bereich soll unter dem roten/gelben Bereich verschwinden).

    Ich habe es jetzt mal probiert, aber es bleibt immer ein Rand zum Browserfenster und das Design sieht in Safari, Firefox, Opera, Mozilla, Netscape und IE immer anders aus (Rand zum Browserfenster, Abstand zwischen den Rahmen, ...).

    Wie löst man so etwas mit CSS oder geht das gar nicht ?

    Für eventuelle Lösungen und Ratschläge, sage ich schon mal recht herzlichen Dank.

    Gruß tom
     
  2. JörgT

    JörgT New Member

    Tom, kannst Du das auf einen Server laden und die URL posten? So ist schwer zu sagen, was Du meinst mit "Abstand zwischen den Rahmen" (meinst Du Zellen?) oder "Rand zum Browserfenster" (erscheinen die Scrollbalken immer?).
     
  3. kawi

    kawi Revolution 666

    ähem. Frames und CSS haben aber nur bedingt etwas miteinander zu tun.
    Was du willst ist warscheinlich die Seite mit Tabellen anstatt frames zu schreiben.

    CSS tut doch nix weiter als zu bestimmen wie was aussieht, wie breit was ist, welche farbe es hat, ect. es *beschreibt* doch nur Objekte, schriften und elemente und weist ihnen eigenschaften zu.
    Du kannst auch deine ganze seite mit CSS *und* Frames machen. bzw nur weil du keine Frames mehr verwendest musst du auf der seite kein CSS verwenden.
    das ist als wenn du fragst : ich will mein auto zukünftig mit einem Duftbaum ausstatten anstatt es mit benzin zu betanken.

    Was du tun willst:
    => Baue eine Tabelle
    das kann eine Tabelle mit 3 Zellen sein so wie auf dem Bild. diesen 3 Zellen kannst du die gewünschte Hintergrundfarbe zu weisen.

    Du kannst aber auch eine tabelle bauen und in diese nur 2 zellen (spalten) einfügen und in die rechte dann eine weitere tabelle die aus 2 zeilen besteht.
    Welches Tabellen für dich am sinnvollsten ist kommt auf die menge des Inhaltes einer jeden zelle an.

    wenn kein Rand zum Broserfenster sein soll musst du als in der seite definieren. Und zwar im <Body> tag
    leftmargin="0" topmargin="0" bottommargin="0" marginwidth="0" marginheight="0"

    du kannst den Inhalt des Body tags direkt in die seite schreiben oder aber den inhalt des body Tags in einem CSS definieren. kommt beides aufs selbe raus (außer das man es einfach hat indem es z.B. nur eine einzige CSS Datei gibt die die darstellung von 20 seiten und unterseiten steuert.
     
  4. graphitto

    graphitto Wanderer

    Hallo skydiver,
    die Lösung heißt natürlich CSS, es kommt nur darauf an, wie die Ebenen positioniert sind. Wenn dein gelber Bereich z.B. mit position:absolute; left:200px; top:0px; ausgerichtet ist, wird es schwierig mit der Breitenangabe. Die 100% rechnet jeder Browser anders, daher wirst du desöfteren quer scrollen müssen. Und das ist nicht schön. ;-)

    Mein Vorschlag:
    Setze eine Ebene (div) als Basis, welche alle anderen Ebenen enthält.
    Der Basisebene gibst du eine Breite von 100%. Die Breitenangaben der Unterebenen gibst du ebenfalls in % an. So richten sie sich immer am Browserfenster aus.

    Mit den Höhenangaben ist es schwieriger, da sich die Höhen der Elemente immer nach ihrem Inhalt richten. Eine %-Angabe bringt hier gar nichts, da diese sich immer auf die Höhe des Inhaltes bezieht. Du kannst natürlich absolute angaben in px oder em machen, dann hast du aber wieder dein Scroll-Problem. Eine wirkliche Lösung gibt es m.W. hier nicht, außer das du dafür sorgst, das der Inhaltsbereich immer länger als deine linksseitige Navigation ist. Dann wächst die Navi-Ebene sozusagen mit und wenn du ihr z.B. eine Hintergrundfarbe zugewiesen hast, ist das dann auch zu sehen.

    Grundsätzliches zu CSS findest du auch in selfhtml und hier eine Einführung zur Arbeit mit Ebenen: http://www.webwriting-magazin.de/sogehts/csstutorial/tut1.html

    Hoffe, das hilft erst mal weiter.

    gruß
     
  5. graphitto

    graphitto Wanderer

    Nun ja kawi, CSS ist weit mehr als das. Zum Beispiel kannst du mit CSS komplette tabellenlose Layouts gestalten, die kann auch ein Screenreader verstehen und vorlesen.

    gruß
     
  6. Walter Mehl

    Walter Mehl New Member

    Seufz. Ich konnte das mal auswendig. Lang, lang, ist es her.

    Hier die groben Rahmendaten:
    Du brauchst 3 DIVs im HTML-Code plus Style-Anweisungen im CSS.
    Im CSS definierst Du dann die üblichen Box-Margins (siehe Kawi) und damit der blöde IE das auch kapiert, verwendest Du Tantek Çelik Box Model Hack

    Viele Tipps dazu gibt es unter http://www.alistapart.com/

    Cheers,
    Walter Mehl, Macwelt
     
  7. graphitto

    graphitto Wanderer

    Anmerkung: Der Box-Model-Hack ist nur bis IE 5.5 nötig. IE 6 interpretiert margin/padding richtig, vorausgesetzt es gibt keine xml-Declaration am Anfang des Codes, welche den IE 6 in den Quirks-Mode versetzt. dann ist er wieder genauso doof wie sein Vorgänger.

    gruß
     
  8. Macci

    Macci ausgewandert.

    Ja, das klingt wirklich doof :D
     
  9. graphitto

    graphitto Wanderer

    Ist es auch. Ich hab wie ein Blöder gerätselt, warum dieser dämliche IE6 sich genauso dumm stellt wie der 5.5er. Bis ich dann draufgekommen bin, die (überflüssige) xml-Declaration rauszuschmeißen. Da hat er das Quirksen verlernt. :cool:

    gruß
     
  10. skydiver

    skydiver New Member

  11. ab

    ab New Member

  12. thosiw

    thosiw New Member

    Schreib mal deinen CSS Code in den Head, sonst kann man hier nicht viel dazu sagen, aber ich würde schon mal sagen, dass der body Rand nicht null ist. Dazu hast du wahrscheinlich die gelbe und die rote DIV auf "fixed" gesetzt. Das funktioniert leider nur über ein Hintertürchen im IE.

    Thosi
     
  13. JörgT

    JörgT New Member

    Die Ränder wegzubekommen, ist noch das Einfachste: Aus <body> im Quellcode musst Du <body leftmargin="0" topmargin="0" bottommargin="0" marginwidth="0" marginheight="0"> machen. Der Rest dauert länger ...
     
  14. graphitto

    graphitto Wanderer

    Zum CSS:

    An den Anfang des CSS (bei externem CSS) setze erst mal folgendes:

    html, body {
    margin: 0;
    padding: 0;
    }

    Damit werden die allgemeinen Browserränder auf 0 gesetzt.

    In den Unterebenen ebenfalls ein padding (Innenabstand) definieren, damit der Text nicht am Rand klebt. Geht am einfachsten mit padding: 10 0 0 10; Das bedeutet 10 px Abstand oben und links, kein Abstand rechts und unten. Kannst du dir natürlich anpassen.

    Sollte der Stylesheet inline definiert werden, gelten die entsprechenden Schreibweisen. macht man aber eigentlich nicht mehr.

    gruß
     
  15. graphitto

    graphitto Wanderer

    Nachtrag:
    GoLive hat in deinem CSS die Position der Kopf- und der Navi-Ebene mit position:fixed; angegeben. Das funktioniert im IE 6 nicht. Dieser kann mit der fixed-Eigenschaft nicht umgehen und schmeißt das Layout komplett durcheinander. Hier besser position:absolute angeben. Dann scrollt allerdings die ganze Seite und nicht nur der Inhaltsbereich.

    gruß
     
  16. graphitto

    graphitto Wanderer

Diese Seite empfehlen