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

    Beiträge:
    410
    Zustimmungen:
    1
    MacUser seit:
    08.11.2002
    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

    Beiträge:
    6.676
    Zustimmungen:
    586
    MacUser seit:
    30.01.2005
    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 [DLMURL="http://www.bluerobot.com/web/layouts/layout3.html"]jene[/DLMURL] Seite zum Vorschein. Viel Spaß beim Basteln!
     
    Zuletzt von einem Moderator bearbeitet: 10.11.2015
  3. nuz:y

    nuz:y MacUser Mitglied

    Beiträge:
    189
    Zustimmungen:
    3
    MacUser seit:
    28.01.2005
    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

    Beiträge:
    410
    Zustimmungen:
    1
    MacUser seit:
    08.11.2002
    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

    Beiträge:
    4.196
    Zustimmungen:
    269
    MacUser seit:
    26.04.2005
    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

    Beiträge:
    189
    Zustimmungen:
    3
    MacUser seit:
    28.01.2005
    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

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

    Nogger MacUser Mitglied

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

    Pixelprofi Thread Starter MacUser Mitglied

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

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

    Viele Grüße
    Pixelprofi
     
Die Seite wird geladen...
Ähnliche Themen - Verschachtelung div Containern
  1. mingorius
    Antworten:
    4
    Aufrufe:
    235
    Kirzz
    03.09.2016
  2. Isegrim242
    Antworten:
    6
    Aufrufe:
    976
    Isegrim242
    23.08.2013
  3. apstalker
    Antworten:
    8
    Aufrufe:
    896
    apstalker
    26.11.2012
  4. Triggertrix
    Antworten:
    3
    Aufrufe:
    544
    Triggertrix
    19.08.2012
  5. muplo
    Antworten:
    13
    Aufrufe:
    945
    muplo
    16.08.2011