Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 15 von 20
  1. #1
    Audi ist offline Grünschnabel
    registriert
    10-08-2004
    Beiträge
    5

    3-Spaltiges Layout oder Wo sind die Grenzen von XHTML/CSS?

    Hallo,
    habe ein riesen CSS-Problem, welches ich nicht gelöst bekomme! Vielleicht ist es für Euch auch interessant, also bitte nicht an der Länge meine Beschreibung verzweifeln- es geht mir um u.a. die grundsätlziche Frage, ob ich alles, was ich mit Tabellendesign auch mit tabellenlosem XHTML/CSS darstellen kann?

    Ich möchte ein 3-spaltiges Design entwickeln welches folgende Anforderungen erfüllt:

    ein erstes div (wrapper, ca. 700px breit) welches alle weiteren divs umschliesst und das ganz mittig darstellt (soweit kein Problem)

    ein Header-div (z.B. Höhe 80px) in dem sich irgendein Headerinhalt befindet (auch kein Problem)

    in dem wrapper-div befinden sich zudem 3 nebeneinenderliegende Spalten (über divs realisiert, unterhalb des header-divs ). Jede Spalte hat eine eigene Farbe! (kann ggf. gerne über Hintergrundbild in Wrapper realisiert werden).


    Variante 1: die Spalten werden so dargestellt (zumindest soll es so aussehen, kann also geschummetl sein), dass sie bis zum Ende der Seite (Ende des Browserfensters) laufen.
    Wichtig: was in diesem Falle nicht geht, ist ein Hintergrundbild für den Bodybereich, welches mittig platziert wird! Bitte also so nicht einbinden. Das aussehen der 3-spaltigkeit bis zum Seitenende müsste schon irgendwie durch das wrapper-div oder die darin enthaltenen divs realisiert werden!

    Variante 2:
    die 3 Spalten müssen nicht zwingend bis zum Ende der Seite (Browserfenster) laufen, sollen aber immer alle auf einer Höhe miteinander abschliessen und zwar egal (und das ist hier mein wesentliches Probelm!!), in welcher der 3 Spalten sich der längste Inhalt befindet!

    Das ganze sollte ohne Javascript o.ä. laufen, also rein über XHTML/CSS.

    Zusatzanforderung, die aber auch weggelassen werden könnte: (am Ende der ganzen Geschichte sollte noch ein Footer auftauchen).

    Ist das möglich?!?

    Tausend Dank für Eure Hilfe und Kommentare
    Audi

  2. #2
    Avatar von RoyalKnight
    RoyalKnight ist offline Foren-Gott
    registriert
    14-02-2003
    Ort
    Austria
    Beiträge
    3.270

    AW: 3-Spaltiges Layout oder Wo sind die Grenzen von XHTML/CSS?

    Nur mal so eine Frage, aber warum müssen die drei Spalten alle die selbe Länge haben? Was hat das für einen Grund?



    Only two things are infinite, the universe and human stupidity, and I'm not sure about the former.

  3. #3
    Avatar von ZeitGeist
    ZeitGeist ist offline Lounge-Member
    registriert
    26-04-2003
    Ort
    Outa Space
    Beiträge
    4.125

    AW: 3-Spaltiges Layout oder Wo sind die Grenzen von XHTML/CSS?

    wenn die drei Spalten unterschiedliche hintergrund farben haben macht das durchaus sinn. Ich hatte mal ein ähnliches Problem, allerdings nur mit 2 Spalten. muss mal gucken wie ich das gelöst habe

  4. #4
    Avatar von RoyalKnight
    RoyalKnight ist offline Foren-Gott
    registriert
    14-02-2003
    Ort
    Austria
    Beiträge
    3.270

    AW: 3-Spaltiges Layout oder Wo sind die Grenzen von XHTML/CSS?

    Zitat Zitat von ZeitGeist
    wenn die drei Spalten unterschiedliche hintergrund farben haben macht das durchaus sinn.
    Das macht keinen Sinn, dann legt man einen Hintergrund hinter die drei Divs.

    P.S.: Deine Tastatur ist kaputt!



    Only two things are infinite, the universe and human stupidity, and I'm not sure about the former.

  5. #5
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: 3-Spaltiges Layout oder Wo sind die Grenzen von XHTML/CSS?

    Du denkst in Spalten, CSS arbeitet mit Boxen. Insofern ist das eine "Grenze" von CSS.

  6. #6
    Avatar von ZeitGeist
    ZeitGeist ist offline Lounge-Member
    registriert
    26-04-2003
    Ort
    Outa Space
    Beiträge
    4.125

    AW: 3-Spaltiges Layout oder Wo sind die Grenzen von XHTML/CSS?

    sorry ich habs doch mit js gemacht.
    @rk, warum kaputt? weil alles klein war?

  7. #7
    Avatar von dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

    AW: 3-Spaltiges Layout oder Wo sind die Grenzen von XHTML/CSS?

    Ich denke hier
    http://forum.jswelt.de/tutorials-css-xhtml/
    findest Du das meißte das Du dazu brauchst.

  8. #8
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: 3-Spaltiges Layout oder Wo sind die Grenzen von XHTML/CSS?

    Das Problem ist und bleibt der farbige Hintergrund der Spalten. Wie gesagt CSS denkt nicht in Spalten, dazu brauchst du eine Tabelle..

  9. #9
    Avatar von RoyalKnight
    RoyalKnight ist offline Foren-Gott
    registriert
    14-02-2003
    Ort
    Austria
    Beiträge
    3.270

    AW: 3-Spaltiges Layout oder Wo sind die Grenzen von XHTML/CSS?

    Zitat Zitat von ein schlauer
    Das Problem ist und bleibt der farbige Hintergrund der Spalten. Wie gesagt CSS denkt nicht in Spalten, dazu brauchst du eine Tabelle..
    Hallo-ho - du brauchst nur den entsprechenden Hintergrund.



    Only two things are infinite, the universe and human stupidity, and I'm not sure about the former.

  10. #10
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: 3-Spaltiges Layout oder Wo sind die Grenzen von XHTML/CSS?

    Du meinst Hintergrundgrafik?
    Und das geht dann aber wiederum nur wenn man weiß wie breit #centercolumn ist.

  11. #11
    Avatar von RoyalKnight
    RoyalKnight ist offline Foren-Gott
    registriert
    14-02-2003
    Ort
    Austria
    Beiträge
    3.270

    AW: 3-Spaltiges Layout oder Wo sind die Grenzen von XHTML/CSS?

    Zitat Zitat von ein schlauer
    Und das geht dann aber wiederum nur wenn man weiß wie breit #centercolumn ist.
    Genau, er weiß es ja, ca. 700px



    Only two things are infinite, the universe and human stupidity, and I'm not sure about the former.

  12. #12
    Avatar von dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

    AW: 3-Spaltiges Layout oder Wo sind die Grenzen von XHTML/CSS?

    Habe mal etwas rumgebastelt und muss sagen,
    es war doch sehr trickey...

    http://dkmd.de/tests/3div.html

    Das Hintergrundbild sollte natürlich exakter gearbeitet sein,
    aber dazu hatte ich jetzt auch keinen Bock mehr.

    http://www.validome.org/lang/ge/get/...ests/3div.html
    HTML-Code:
    <?xml version="1.0" encoding="iso-8859-1"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
      <head>
      <title>Dokumenttitel</title>
      <style type="text/css">
    /*<![CDATA[*/
    html, body, div, span, p, h1, h2, h3, ul, li, a, acronym, cite, table, td, th, form, label, input, img {
      font-family: 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
      font-size:16px;
      line-height:18px;
      color:#2c2c2c;
      margin:0px;
      padding:0px;
      border:0px;
    }
    body {
      text-align:center;
    }
    #wrapper {
      text-align:left;
      margin:0px auto;
      width:700px;
      border:1px solid #ccc;
      background:url(bg.jpg) repeat-y;
    }
    #header {
      width:100%;
      height:80px;
      border-bottom:1px solid #ccc;
      background:#fff;
    }
    #left {
      width:233px;
      float:left;
    }
    #center {
      width:234px;
      float:left;
    }
    #right {
      width:233px;  
      float:left;
    }
    #footer {
      width:100%;
      height:40px;
      border-top:1px solid #ccc;
      background:#fff;
    }
    /*]]>*/
    </style>
      </head>
      <body>
    <div id="wrapper">
    <div id="header">header</div>
    
    <div id="left">ich<br />bin<br />blindtext</div>
    <div id="center">ich<br />bin<br />auch<br />blindtext</div>
    <div id="right">ich<br />bin<br />auch<br />blindtext<br />und<br />was<br />f&uuml;r<br />einer<br />ich<br />bin<br />auch<br />blindtext<br />und<br />was<br />f&uuml;r<br />einer</div>
    
    <br style="clear:both;" />
    <div id="footer">footer</div>
    </div>
    </body>
    </html>

  13. #13
    Avatar von RoyalKnight
    RoyalKnight ist offline Foren-Gott
    registriert
    14-02-2003
    Ort
    Austria
    Beiträge
    3.270

    AW: 3-Spaltiges Layout oder Wo sind die Grenzen von XHTML/CSS?

    Zitat Zitat von dkdenz
    Habe mal etwas rumgebastelt und muss sagen,
    es war doch sehr trickey...
    Hey, das ist doch Standard. Wenns das nicht wär, hätt ich oben auf nicht auf anhieb sagen können wie mans macht...



    Only two things are infinite, the universe and human stupidity, and I'm not sure about the former.

  14. #14
    Avatar von dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

    AW: 3-Spaltiges Layout oder Wo sind die Grenzen von XHTML/CSS?

    Zitat Zitat von RoyalKnight
    Hey, das ist doch Standard. Wenns das nicht wär, hätt ich oben auf nicht auf anhieb sagen können wie mans macht...
    Ich korrigiere mich:
    'es war doch etwas trickey',

  15. #15
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: 3-Spaltiges Layout oder Wo sind die Grenzen von XHTML/CSS?

    Und wie man schön an dem Beispiel sieht, es ist eine Tabelle. Warum mit CSS rummurksen wenn man doch eine Tabelle will?

    Aber so hast du ein statisches Layout, dass sich nicht mehr besonders gut anpassen läßt.
    Diese dreispaltigen Layouts stammen meiner Meinung aus internet prähistorischen Zeiten und sollten langsam abgeschafft werden. Wer sowas benutzt zeigt lediglich das sein Wissenstand nicht aktuell ist.

Seite 1 von 2 12 LetzteLetzte

Ähnliche Themen

  1. Disclaimer gesucht
    Von butch im Forum Internet & Recht
    Antworten: 15
    Letzter Beitrag: 23-03-2006, 18:55
  2. Funny Clips
    Von Freelancer im Forum Fun
    Antworten: 16
    Letzter Beitrag: 20-06-2005, 11:42
  3. Help Me!!!
    Von islaam im Forum Smalltalk
    Antworten: 77
    Letzter Beitrag: 10-09-2003, 21:35
  4. Antworten: 6
    Letzter Beitrag: 05-12-2002, 01:07

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •