Verschachtelung von div-Containern?

Dieses Thema im Forum "Web Page Design" wurde erstellt von Pixelprofi, 18.05.2005.

  1. Pixelprofi

    Pixelprofi Thread Starter MacUser Mitglied

    MacUser seit:
    08.11.2002
    Beiträge:
    410
    Zustimmungen:
    1
    Hallo werte Macuser,

    bin gerade dabei eine barrierefreie Website zu erstellen, dabei möchte/muss ich folglich komplett auf Tabellen verzichten und stattdessen div-Container verwenden. Könnt Ihr mir sagen wie ich div-Container verschachteln kann?

    Folgendes Beispiel in Tabellen (ein 3-spaltiges Layout):

    <table>
    <tr>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    </table>

    Wie erstelle ich dieses Layout mit Hife von div-Containern?

    Vielen Dank für Eure Hilfe!
    Kennt Ihr auch zufällig eine gute Website, welche sich mit der Erstellung barrierefreier Websiten befasst?

    Grüße
    Pixelprofi
     
  2. Ulfrinn

    Ulfrinn MacUser Mitglied

    MacUser seit:
    30.01.2005
    Beiträge:
    6.676
    Zustimmungen:
    586
    Ich finde es toll, daß es immer mehr Leute gibt, die sich über barrierefreie Seiten Gedanken machen und auch bereit sind, das umzusetzen. Informationen sollten schließlich für alle zugänglich sein!
    Aber ganz soll man bei barrierefreien Seiten nicht auf Tabellen verzichten – Man soll sie nur nicht für Gestaltungszwecke mißbrauchen. Tabellarische Daten sollen nachwievor in einer Tabelle untergebracht werden.
    Eine spontane Suche mit Google brachte allerdings u. a. diese und jene Seite zum Vorschein. Viel Spaß beim Basteln!
     
    Zuletzt von einem Moderator bearbeitet: 10.11.2015
  3. nuz:y

    nuz:y MacUser Mitglied

    MacUser seit:
    28.01.2005
    Beiträge:
    189
    Zustimmungen:
    3
    leider gibt es zu diesem thema viel zu wenig gute webseiten, insbesondere zu css (oder ich kenne sie leider noch nicht). wenn du dein drei spaltiges design umsetzen möchtest kommst du um css nicht herum. grundsätzlich würde dein code dann z.b. ganz vereinfacht so aussehen:

    <body>
    <div id="linkespalte">
    </div>
    <div id="mittlerespalte">
    </div>
    <div id="rechtespalte>
    </div>
    </body>

    in einer css-datei müssen dann noch die eigenschaften des div ids angegeben werden. das bsp. ist aber sehr starkt vereinfacht. vlt helfen dir folgende webseiten weiter:

    style-sheets.de/
    Einführung in CSS
    barrierefreies-webdesign

    viel erfolg
     
  4. Pixelprofi

    Pixelprofi Thread Starter MacUser Mitglied

    MacUser seit:
    08.11.2002
    Beiträge:
    410
    Zustimmungen:
    1
    Euch beiden schon einmal vielen Dank!
    Wenn ich die div-Container so umsetzte wie von Dir angegeben, dann erscheinen sie doch aber untereinander. Wie bekomme ich sie denn nebeneinander?

    Gerne auch mit CSS (geht auch schlecht ohne) ;)

    Nochmals vielen Dank!
     
  5. HäckMäc_2

    HäckMäc_2 MacUser Mitglied

    MacUser seit:
    26.04.2005
    Beiträge:
    4.195
    Zustimmungen:
    269
    Was hast Du gegen Tabellen??

    <table>
    <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
    </tr>
    </table>

    wird zu:
    <div id="Layer1" style="position: absolute; left: 12px; top: 15px; width: 7px; height: 19px; z-index: 1">a</div>
    <div id="Layer2" style="position: absolute; left: 23px; top: 15px; width: 8px; height: 19px; z-index: 2">b</div>
    <div id="Layer3" style="position: absolute; left: 35px; top: 15px; width: 7px; height: 19px; z-index: 3">c</div>

    Geht mit Dreamweaver 4 ganz einfach...
    (Modifizieren-Konvertieren-Tabelle in Ebenen)

    Aber wozu???
     
  6. nuz:y

    nuz:y MacUser Mitglied

    MacUser seit:
    28.01.2005
    Beiträge:
    189
    Zustimmungen:
    3
    die positionierung erfolgt über css. in der seite oder extern, wobei eine externe datei die schönere variante ist. die css datei könnte dann z.b. wie folgt aussehen:

    #linkespalte {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 200px;
    }
    #rechtespalte {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 200px;
    }
    #mittlerespalte {
    margin-left: 220px;
    margin-right: 220px;
    }

    für weitere fragen würde ich dir dann dringend entsprechende literaur empfehlen ;-)
     
  7. Nogger

    Nogger MacUser Mitglied

    MacUser seit:
    03.08.2004
    Beiträge:
    367
    Zustimmungen:
    0
    *Hualp* Super Teil, dieses Dreamweaver.
     
  8. Nogger

    Nogger MacUser Mitglied

    MacUser seit:
    03.08.2004
    Beiträge:
    367
    Zustimmungen:
    0
  9. Pixelprofi

    Pixelprofi Thread Starter MacUser Mitglied

    MacUser seit:
    08.11.2002
    Beiträge:
    410
    Zustimmungen:
    1
    Vielen Dank an Euch allen!

    Ihr konntet mir weiterhelfen und ich habe keine weiteren Fragen :)

    Viele Grüße
    Pixelprofi
     
Die Seite wird geladen...

Diese Seite empfehlen