• Hallo,

    da hier einige CSS-Experten jede Verwendung einer Tabelle als Layout als "Totsünde" bezeichnen möchte ich nun mal sehen wer es schafft dieses Tabellenlayout mit CSS und DIVS umzusetzen.
    Wichtig dabei ist das die Höhe aller 3 Spalten immer gleich und abhängig vom Inhalt ist.

    Jetzt bin ich mal gespannt wer dies schafft.


  • Eine Website mit Divs zu machen ist genauso falsch wie mit Tabellen. Deshalb soll man Tabellen auch nicht mit Divs ersetzen.

    Vielmehr kommt es darauf an, eine Seite möglichst semantisch korrekt aufzubauen. Hierzu bietet HTML für fast jeden Zweck spezielle Elemente an, die man sinngerecht einsetzen sollte, siehe HTML-Elementreferenz.

    Eines dieser vielen Elemente sind Tabellen. Sie dienen der strukturierten Darstellung tabellarischen Inhalts, also z.B. eine Adressliste, ein Terminkalender o.ä.

    Ein weiteres Element ist der Div (division). Er dient dazu, größere Bereiche zu gruppieren und darzustellen.

    CSS wiederum dient der Formatierung und Positionierung aller Elemente.

    Wenn du dir dieser Logik bewusst wirst, dann wirst du auch verstehen, weshalb man eine Seite weder mit Tabellen, noch mit Divs macht.

    Und was dein Spaltenlängenproblem betrifft: Zugegeben, da gibt es keine Standardlösung. Man kann sich aber mit Faux Columns behelfen.

  • etwas XHTML und Css würde dir auch nicht schaden, das was du möchstet ist sooooo easy. Wenn du divs und css kannst dann kannst du nach dieser anleitung arbeiten :p

    Also ich habe mich natürlich vorher informiert ab zu meinen Problem konnten auch Personen die komplett auf DIVS schwören mir keine Antwort liefern.

    Klar ist es einfach mit Faux Columns schön paar Spalten zu erstellen aber ich habe keine Lösung gefunden das die Spalten zwar fest aber auch dynamisch bleiben.
    D. h. ist in einer Spalte der Inhalt zu breit dann soll die Spalte verbreitert werden ohne das sich der Rest vom Design verhaut. (siehe HTML-Tabellen Layout oben, da funktioniert dies)



    die "Wer schafft es dieses Tabellenlayout in CSS umzusetzen ?"-Spielchen von gestern. :roll:


    Tja bisher konnten mir auch Spezialisten keine richtige Lösung auf das Problem geben, deswegen bin ich einfach mal gespannt ob jemand eine Lösung hat.


    Und was dein Spaltenlängenproblem betrifft: Zugegeben, da gibt es keine Standardlösung. Man kann sich aber mit Faux Columns behelfen.

    Faux Columns ist mir bekannt nur setze ich es eben nicht ein da mir keine eine Lösung auf das Problem nennen kann (siehe oben)

  • Du hast in deinem Tabellencode drei Zellen nebeneinander:
    Zei mit fixen Breiten von 100px und 80px und mittendrin eine ohne Breitenangabe.
    Genauso funktioniert das mit drei nebeneinander angeordneten Divs auch.

    Ich hab's nicht ausprobiert und habe momentan dazu leider auch keine Zeit. Aber generell sollte das was die gleiche Spaltenlänge betrifft ähnlich wie hier funktionieren:
    http://www.ohne-css.gehts-gar.net/0031.php

  • eben höre mal drauf was sejuma schreibt...... ansonsten lässt es aber wie sejuma schon sagte...



  • Ich habe letztes Jahr angefangen, würde es sicher hinbekommen:cool:

    Du bist in dem Bereich schon viel länger tätig laut deiner Mitgliedschaft hier. In dem Zeitraum hättest du es längst erlernen können

    Mein Pc:
    Intel Core i5 i5-750 / 4x2.66 GHz
    Socket 1156 4-Core
    4096 MB/ 1333Mhz RAM DDR3
    NVIDIA GeForce 275GTX 1792MB GDDR RAM
    1TB GB SATA 7,200 U/Min

  • ich war gerade fast dabei dir das mal kurz zu bauen(dauern würde es 3-5 min), aber da du wahrscheinlich auch verstehen willst. Sieh mal hier:
    http://www.cssplay.co.uk/layouts/three-column-layouts.html
    Ist mir gerade noch ins Auge gestochen als ich meine Favoriten duchsuchte

    Hoffe du beschäftigst dich trotzdem auch mit XHTML und Css(extern).

    Übernimm mal diesen Code hier 1:1 , dann kannst du sehen was wie geht.

    index.html
    -->




    Und die untere Css datei speicherst du unter css.css ab und lädst sie ins selbe verzeichnis wie die index.html



    Auf obiger Seite gibt es verschiedene Modelle, allerdings sollte man den Doctype immer um einen aktuelleren ersetzten(wie ich in obigem Code)
    Ist zwar keine Pflicht aber es ist für zukünftigere Webseiten durchaus von Vorteil.

    Viel Glück:D:D

    Texasmutscha


    P.s Bitte den Beitrag noch zu vorigem hinzufügen, ist mir selber nicht möglich:p

    Mein Pc:
    Intel Core i5 i5-750 / 4x2.66 GHz
    Socket 1156 4-Core
    4096 MB/ 1333Mhz RAM DDR3
    NVIDIA GeForce 275GTX 1792MB GDDR RAM
    1TB GB SATA 7,200 U/Min

  • Du hast in deinem Tabellencode drei Zellen nebeneinander:
    Zei mit fixen Breiten von 100px und 80px und mittendrin eine ohne Breitenangabe.
    Genauso funktioniert das mit drei nebeneinander angeordneten Divs auch.


    Lese bitte erst mal meinen 2. Beitrag in diesem Thema.

    Texasmutscha

    Funktioniert zwar erstmal grundsätzlich wenn man solche Einstellungen setzen muss dann kann man auch gleich bei Tabellen bleiben

    Code
    #outer1, #outer2, #outer3 {padding-bottom:[B]32767px[/B]; margin-bottom:[B]-32767px[/B];}

    So eine Angabe ist für mich in keinster Weise akzeptabel.

    Es kann doch nicht sein das es in CSS keine schöne Lösung gibt :(

  • Lese bitte erst mal meinen 2. Beitrag in diesem Thema.

    Texasmutscha

    Funktioniert zwar erstmal grundsätzlich wenn man solche Einstellungen setzen muss dann kann man auch gleich bei Tabellen bleiben

    Code
    #outer1, #outer2, #outer3 {padding-bottom:[B]32767px[/B]; margin-bottom:[B]-32767px[/B];}

    So eine Angabe ist für mich in keinster Weise akzeptabel.

    Es kann doch nicht sein das es in CSS keine schöne Lösung gibt :(

    Sorry ich wollte schreiben das paar sachen ausser dem doctype zu ändern sind, ist das nicht geschehen? Aber so grob ist schon richtig wie es zu machen ist(css lösung):p

  • Dynamisch gibt es aber keine. Entweder Faux Columns oder Tabelle bei sowas.

    Solange es keine andere Möglichkeit als "float" gibt Elemente nebeneinander zu positionieren, ohne dabei feste Werte zu verwenden, wird sich das auch nicht ändern (Elemente mit Float beeinflussen die höhe eines Übergeordneten Elements nicht).

    Die Tabelle hat nunmal einzigartige eigenschaften in HTML, wie z.B. eine richtige vertikale Ausrichtung. So schnell werden diese nicht verschwinden ;) .
    Bevor jetzt wieder jemand mit Semantik anfängt - erzählt es dem W3C!

    Einmal editiert, zuletzt von Grevas (3. März 2010 um 20:31)

  • Dies sehe ich nicht wirklich wie bereits beschrieben als Lösung an (Es funktioniert zwar aber schön ist es wirklich nicht einfach mal 32767px festzulegen.

    Es muss doch wirklich eine schönere Lösung geben.



    Wie gesagt es ist auch möglich die Seite ohne die Riesen hin und her schiebung des margin bzw padding werts sematisch korrekt zu erstellen. Selber XHTML(incl. Boxmodell) und Css können;)

    Alternativ kann ich dir noch Templateseiten ans herz legen wenn du es selber nicht kannst.
    http://www.free-css-templates.com/
    http://www.freecsstemplates.org/css-templates

    Aber auch die sind nicht immer perfekt gebaut,(Quellcode perfekt) aber sie bestehen auch schon etwas länger8)


    http://www.google.de/#hl=de&source=…b0f8312a7be4d4c

    p.s Ich habe auch nur durch basteln, Quellcode überarbeiten alles gelernt.
    Und immer wieder lesen, lesen und realitätsnahes Üben am Projekt. Das hilft ungemein;);)

    Texasmutscha

    Mein Pc:
    Intel Core i5 i5-750 / 4x2.66 GHz
    Socket 1156 4-Core
    4096 MB/ 1333Mhz RAM DDR3
    NVIDIA GeForce 275GTX 1792MB GDDR RAM
    1TB GB SATA 7,200 U/Min

  • Was möchtest Du mir damit sagen?
    Das es eine Lösung gibt?




    Wenns dir bis heute abend keiner gemacht hat oder du es nicht selbst hinbekommen hast mache ich es... aber es ist echt so einfach. Wo liegt das Problem.

    Da hast du schonmal die HTML Struktur

    HTML
    <body>
            <div id="header"></div>
            <div id="links"></div>
            <div id="inhalt"></div>
            <div id="rechts"></div>
            <div id="footer"></div>
    </body>




    EDIT:

    Css Datei



    So den Rest (deine breiten und längen musst du selber anpassen, sowie die Hintergrundfarben. Ist nur der Übersicht halber. Der feste Höhenwert im Footer muss bestehen bleiben!!


    Wenns das nicht ist dann weiß ich nicht was du möchstet:-)

    Layout.rar

    Mein Pc:
    Intel Core i5 i5-750 / 4x2.66 GHz
    Socket 1156 4-Core
    4096 MB/ 1333Mhz RAM DDR3
    NVIDIA GeForce 275GTX 1792MB GDDR RAM
    1TB GB SATA 7,200 U/Min

    3 Mal editiert, zuletzt von Texasmutscha (4. März 2010 um 14:09)

  • Natürlich...


    im FF 3.5, Opera 10, Safari 4 und IE 8 perfekt angezeigt. Ist deine Frage geklärt?

    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.

    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

  • Sama...

    Lest ihr eigentlich mit?

    Spätestens als über Faux Columns geredet wurde, hättet ihr merken müssen, dass die Höhe nicht fest sein darf!

    Mit einer variablen Breite dazu bekommt man es ohne Tabelle nicht hin.


    Es gibt nur 2 Möglichkeiten Bereiche nebeneinander zu positionieren und dabei eine Variable Höhe zu lassen - ohne Tabellen.
    1. position absolute
    2. float

    Beide davon beeinflussen die Höhe ihres Elternelements nicht, somit kann man keine bündige Fläche schaffen.


  • [/code]im FF 3.5, Opera 10, Safari 4 und IE 8 perfekt angezeigt. Ist deine Frage geklärt?

    Nein, siehe Post von Grevas


    Wenns das nicht ist dann weiß ich nicht was du möchstet:-)

    Das habe ich doch beschrieben oder täusche ich mich da?


    Grevas
    Danke für die Info und das Du wenigstens alles durchgelesen hast.
    Soviel zur Behauptung mit CSS alleine ist alles möglich.

    Ich werde dadurch wohl bei den HTML Tabellen + CSS bleiben müssen da es anscheinend keine Lösung gibt die auch in jeden Browser funktioniert.

    Somit gibt es wohl keine Vorteile für CSS Tabellen.
    (Klar würde man dadurch ein bisschen Traffic sparen aber wen interessiert es bei den heutigen Traffickosten, aber es bringt nichts wenn ich nicht mal ein dynamischen Design (Breite, Höhe) erstellen kann und beim Rest dauerndzu nur CSS Fixe benötige)

  • Das heißt nicht, dass ich Tabellenlayouts befürworte - Wenn man sowas in ner Darstellung vom Content mal dringend braucht finde ich es durchaus legitim.

    Aber ein professionel aussehendes Layout würde ich nie mit Tabellen machen.

    1. Da man Grafiken so oder so nicht bei Dynamischer Breite / Höhe einsetzen kann. Zumindest nicht überall sinnvoll
    .
    2. Weil dadurch die möglichkeit besteht, dass Layout zu zerschießen. Die Möglichkeiten der Tabelle haben auch ihre Nachteile.

    3. Semantik - Geschmackssache

    4. Es die Übersicht im Code erschwerrt.

    5. Ein Tabellenlayout ist bei Änderungen oft umständlich.

    Gibt bestimmt noch ein paar Gründe dagegen sowohl aber auch dafür.