Kinast: Schwierige Tabelle in CSS umwandeln

Beitrag lesen

(NNNN) NNNNN)      JNNNNNN  (NNNN)                                                               _____ NNNNN)     NNNNNNF    (NNNN)                                                               NNNNN NNNNN)   .NNNNNNF                                                                          NNNNN NNNNN)  .NNNNNN      ..    .NNNN        JNNNNNN          .JNNNNNL.   NNNNN___ NNNNN) (NNNNNN       (NNNN)    (NNNNLNNNNNNNNN.      NNNNNNNNNNNNL      .NNNNNNNNNNNN)  NNNNNNNNNNNN NNNNN)JNNNNNF         (NNNN)    (NNNNNNNNNNNNNNN      NNNNNNNNNNNNNL    (NNNNNNNNNNNNN)  NNNNNNNNNNNN NNNNNNNNNNNF          (NNNN)    (NNNNN"   "NNNNN)     "       NNNNN    NNNNN)      4)    NNNNN NNNNNNNNNNNN.         (NNNN)    (NNNN)     (NNNN)        ___NNNNNNNN    NNNNNNNL__.        NNNNN NNNNNNNNNNNNN)        (NNNN)    (NNNN)     (NNNN)     JNNNNNNNNNNNNN    (NNNNNNNNNNNN.     NNNNN NNNNNF (NNNNNNL       (NNNN)    (NNNN)     (NNNN)    NNNNNNNF""NNNNN     NNNNNNNNNNNN)    NNNNN NNN                                                                                         NNNN NNN +->> (CSS) Schwierige Tabelle in CSS umwandeln <<-------------------------------------+ NNNN. NNN |                                                                                     | NNNNNNNN NNN |  Also, man schaue sich folgendes Tabellenmodell an:                                 | NNNNNNNN """ |                                                                                     | "4NNNNN"     |  +---------------+-----------------------------------------------+---------------+  |     |  | 1             |  2                                                            |  |     |  +---------------+-----------------------------------------------+---------------+  |     |  | 3             |  4                                            | 5             |  |     |  |               |                                               |               |  |     |  |               |                                               |               |  |     |  |               |                                               |               |  |     |  |               |                                               |               |  |     |  |               |                                               |               |  |     |  |               |                                               |               |  |     |  |               |                                               |               |  |     |  +---------------+-----------------------------------------------+---------------+  |     |  | 6             |  7                                                            |  |     |  +---------------+-----------------------------------------------+---------------+  |     |                                                                                     |     |  und mache sich dann zum Plan, diese Tabelle in CSS umzuwandeln. Schwierig, gell ?  |     |  Hier haben wir ein vielleicht nicht allzu klassisches Seitenlayout mit 2 Navigat-  |     |  ionsleisten, unten und oben (7 und 2) noch mal 2 Colspans -  wer mir das einwand-  |     |  frei in ein <div>-Gewurschtel ohne Tabellen umwandeln kann - wunderbar.            |     |                                                                                     |     |  Nun, so ist das ganze noch ziemlich einfach.  Zu bedenken ist noch,  dass ich die  |     |  ganze Tabelle lokal unabhängig haben möchte -  also von wegen absolutes position-  |     |  ieren.  Tja,  und dann wäre da noch das Problem,  dass ich eine Hintergrundgrafik  |     |  aus 3 Teilen quer über die 3 Spalten habe.  Klingt kompliziert, ist aber megaein-  |     |  fach,  doch beim CSS-Layout wieder schwierig:  Man  merke  sich "helle Farbe" und  |     |  "dunkle Farbe". Nun ist also Hintergrundfarbe von allem "dunkle Farbe", und links  |     |  und rechts  gibt  es  einen  Hintergrundverlauf zu "helle Farbe".  Bei 1, 3, 5, 6  |     |  lassen sich  hier wunderbar die Hintergrundgrafiken einbinden,  4 benötigt keine,  |     |  da der Hintergrund dort  "dunkle Farbe" ist,  und 2 und 7 bekommen eine,  die per  |     |  CSS an die rechte Seite gesetzt ist. Ach ja, wir hätten da noch das Problem, dass  |     |  in 2 und 7 die Inhalte per "vertical-align: middle;" positioniert sind - in einem  |     |  <div> ist das nicht möglich 8[.                                                    |     |                                                                                     |     |  Schon  hart,  gé?   Ich habe die ganze Tabelle schon fertig (mein CSS ist 16,4 KB  |     |  groß!!!!!!!!! - alle, die meine Seite benutzt [sonderstyles...], sind 71KB groß),  |     |  ich scheitere lediglich am Hintergrund.                                            |     |  Ich habe es auch schon  mit  2 Divs links und rechts gefloatet ausprobiert,  habe  |     |  sie auf 30000Pixel Höhe gesetzt  (das wäre glaube ich die Längste Seite,  die ich  |     |  momentan in meinem Webangebot finden kann),  und die <div>, die das Gesamtgebilde  |     |  umschließt, auf "overflow:hidden;" gesetzt, aber es hat keinen Sinn - er schneid-  |     |  et es natürlich nicht ab.                                                          |     |                                                                                     |     |  So bin ich absolut ratlos. wer kann mir helfen?                                    |     |  Vielen Dank,                                                                       | NNN |                                                                                     | NNN |  euer Kinast                                                                        | NNNN NNN |  PS:  Wer eine Beispieldatei braucht - wenn's umbedingt sein muss...                | NNNN NNN |  PS2: Mein Blocksatz ist doch wirklich genial, nicht wahr?                          | NNNN_____ NNN |  PS3: Mein Seitenlayout auch, stimmt's?                                             | NNNNNNNNN NNN |                                                                                     | NNNNNNNNN NNN +-------------------------------------------------------------------------------------+ NNNN NNNNNNNNNNNN.         (NNNN)    (NNNN)     (NNNN)        NNNNNNNN    NNNNNNNL.        NNNNN NNNNNNNNNNNNN)        (NNNN)    (NNNN)     (NNNN)     JNNNNNNNNNNNNN    (NNNNNNNNNNNN.     NNNNN NNNNNF (NKHUNNL       (NNNN)    (NNNN)     (NNNN)    NNNNNNNF""NNNNN     `NNNNNNNNNNNN)    NNNNN NNNNN)  `NNJETZT      (NNNN)    (NNNN)     (NNNN)   (NNNNF     NNNNN        `""NNNNNNNN    NNNNN NNNNN)   `NNNURNN     (NNNN)    (NNNN)     (NNNN)   (NNNNL    .NNNNN    NL      (NNNNN    NNNNN. NNNNN)    `NN3099N.   (NNNN)    (NNNN)     (NNNN)   `NKINAST-DESIGNN    NNNNNNNNNNNNNN)    4NNNNNNNNN NNNNN)      NNEUR!N.  (NNNN)    (NNNN)     (NNNN)    (NN(C)N2004NNNN    NNNNNNNNNNNNN`     `NNNNNNNNN """""`       """""""  `""""`    `""""`     `""""`      "NNNF"  """""     `"4NNNNNF"`         "4NNNNN"