Tabellen-Layout in DIV-Layout umändern...

    Folgendes Layout wollte ich in eines mit DIVs abändern, doch dies gelingt nicht so richtig


    Das dazugehörige CSS-File


    Hier mein Versuch mit DIVs


    Wieder das dazugehörige CSS-File


    Wäre schön wenn ihr mir dabei weiterhelfen könnten!


    PS:Wie kann ich zentrierte Blockschrift bewekstelligen, ohne dafür zwei Tags zu benutzen?[/code]

    Online stellen ist grad nicht so gut...

    Also es soll einfach ein Rahmen aus Grafiken um den Inhalt sein, also die 4 Ecken des Rahmen sind jeweils eine Grafik. Und die 4 Außenkanten sind jeweils eine 1 Pixel-Dicke Grafik, welche sich dann wiederholt.


    Ja, dass ich mit DIVs noch nicht richtig umzugehen weiß ist mir klar, allerdings hab ich nirgends ne gute Erklärung / Anleitung dazu gefunden. Wäre gut wenn mir dies jemand anhand des Beispiels mal vorstellen könnte.

    wenn das div sich nicht stark in der höhe ändern soll, könntest du es so machen wie im anhang dargestellt.

    für div#top machst du dann

    Code
    height: Xpx; /* X = höhe des bildstücks */
background-position: top;


    (+ alles weitere notwendige)

    bei div#content schaust du was die minimale grösse, bzw. die maximale grösse des containers sein wird, dann machst du das bild so lang wie die maximale grösse.

    dann beim css:

    Code
    height: auto;
background-position: bottom;


    (+ alles weitere notwendige)

    so wird vom unteren stück genauso viel angezeigt wie nötig, der rest bleibt versteckt.


    je nach layout empfielt sich aber evtl. eine andere variante. diese ist eher für kleine content containers oder menüs mit runden ecken gedacht.

    so long

    driver
    Du hast mich falsch verstanden, die Grafik ist z.B. 50x1px also z.B. ein Farbverlauf welchen es dann z.B. auf der linken Seite bis nach unten durchzieht, also immer wiederholt...

    Es soll halt alles möglichst dynamisch sein, also egal ob ich z.B. nur "Hallo" in den Inhalt-DIV oder 100 Bilder reinmach. Dass sich das design daran anpasst...

    wenn die breite fix ist kannst du bei meinem beispiel einfach wie das obere div ein unteres machen. dann hast du div#oben, div#foot und div#content. die packst du dann noch in einen "obercontainer". also:

    Code
    <div id="main">
  <div id="top"></div>
  <div id="content"></div>
  <div id="foot"></div>
</div>

    wenn "top" und "foot" keinen inhalt haben kannst du auch ein <span> verwenden.

    so long

    Hab's nun ein ewnig anders versucht, aber ich komm einfach nicht drauf!!

    Und versteh auch nicht 100%ig eure Tipps, leider.

    Allerdings wollte ich es so machen wie mit der Tabelle auch, da dies am dynamischsten ist und die kleinsten Bilder hat. Die Frage ist nur "Wie mache ich das mit DIVs?"

    So wie ichs nun hab ist's ja fast OK es fehlt halt noch der linke und rechte Rahmen. Dieser sollte dann allerdings bis zur unteren Kante angezeigt werden. Das sollte doch nicht so schwer sein, ich könnt echt noch verzweifeln!


    Du bekommst den linken und rechten Rahmen nur verlängert, wenn du ihn in einen div packst, dessen Länge durch seinen Inhalt bestimmt wird oder der eine vorgegebene Pixelhöhe hat. Das ist bei dir der Inhalt.
    Also musst du für den Inhalt eine Background-Grafik erstellen, bei der in einem gif links und rechts der Rand und un der Mitte ein neutraler Balken ist (siehe "faux-columns")

    Aber dadurch würde ich eine fixe Breite bekommen, was ich nicht möchte.

    Es soll einfach nur eine 9x9 Felder große DIV-Struktur werden.

    Wobei das mittlere den Inhalt darstellt und die Breite und Höhe variabel sind. Ist das denn so schwer mittels DIVs umsetzbar, wenn "Ja" wieso sollte man denn von Tabelle auf DIV wechseln??

    Sorry nicht 9x9 sondern 3x3 was 9 Felder ergibt!!

    Ich versuch es mal zu visualisieren:


    Code
    ----------------------------
|eck_1|  o b e n   |eck_2 |
|links| - INHALT - |rechts|
|links| - INHALT - |rechts|
|links| - INHALT - |rechts|
|eck_3|  u n t e n |eck_4 |
----------------------------

    Also wie ein TicTacToe-Speilfeld, wobei das mittlere-Feld den Inhalt darstellt, welcher eine variable größe annehmen kann, wodurch die oben/unten-Felder bzw. die links/rechts-Felder sich verlänger/verkürzen!

    Da das obig genannte wohl nicht so einfach umsetzbar ist eine andere Frage:

    Ist es OK wenn man eine ID am anfang der Seite hat, innen verschachtelt dann nochmal ein ID-Tag welches dann so im CSS z.B. so aussieht:

    #id_name1 #id_name2 a {text-decoration: none;color:#000000;}

    Und wie gehe ich vor, wenn ich eine Zelle in welcher ich lediglich eine Hintergrundgrafik habe mit einer festen Breite erstellen will?

    also so:

    Code
    (...)
<td style="background:url(bilder/eck_1.gif);height:60px;width:50px">
(...)

    Das funktioniert ja auch. Nur wenn ich die Fensterbreite verkleinere verschwindet diese Grafik irgendwann, was dann für Leute mit geringeren Auflösungen ziemlich schlecht aussieht...

    Hab's mit min-width versucht, funktioniert aber nicht!