Welche Container benutzen(div,span,tabelle?!)

    hallo,
    wie kann ich nebeneinander 3 Container(also leere Platzhalter verwenden).
    Ich hab ein Bild mitgepostet,ursprünglich wurde das Layout mit Tabellen erstellt.
    Das Bild zeigt lediglich leere Felder, weiter unten hab ich versucht sowas mit ASCII zu zeichnen :P:

    Wie kann ich nun diese 3 Felder mit anderen Elementen ersetzen? :?:
    "div" funktioniert nebeneinander nicht da immer ein Zeilenumbruch miterstellt wird und mit "span"(span war eigentlich CSSmäßig für sowas gedacht oder?) funktioniert rein gar nichts. Mit span konnte ich bis jetzt absolut noch nix anfangen :evil:

    mfg und danke für die Hilfe :)


    ___________________________
    |''''''''''''''''|'''''''''''''''''''''''''''''''''''|''''''''''''''''|
    |''''''''''''''''|'''''''''''''''''''''''''''''''''''|''''''''''''''''|
    |''''''''''''''''|'''''''''''''''''''''''''''''''''''|''''''''''''''''|
    |''''''''''''''''|'''''''''''''''''''''''''''''''''''|''''''''''''''''|
    |''''''''''''''''|'''''''''''''''''''''''''''''''''''|''''''''''''''''|
    |______|_____________|______|

    Was spricht dagegen das Layout mit den Tabellen zu behalten?

    Ja, tut mir leid, ich weiß dass man eine Frage eigentlich nicht mit einer Gegenfrage beantwortet :roll: aber ich würde gerne was über die Gründe erfahren

    Man muss nicht verrückt sein um mit mir befreundet zu sein...
    ABER es hilft!!!

    Ho,

    Zitat

    Was spricht dagegen das Layout mit den Tabellen zu behalten?

    Tabellen sind langsamer und nicht dafür geschaffen Layouts zu erstellen (klar es geht, aber man hämmert doch auch nicht mit 'ner rohrzange nur weils geht oder?) sondern Daten tabellarisch darzustellen ;)
    Von daher ist es löblich, wenn ein "Tabellen-Mensch" auf div's umsteigen will.

    mit dem span-tag kann man inline formate (üblicherweise text oder innerhalb von p-Tags, etc.) per css formatieren. Wenn du ein <span> in ein p-Tag oder über Text legst und span nicht per css formatierst, passiert erstmal gar nichts. Der span-tag erzeugt keinen Textumbruch.

    div-container werden dazu verwendet um layouts zu erstellen. Der div-Tag erzeugt einen Container um die eingeschlossenen Inhalte & Formate (listen, absätze, etc.) und einen Zeilenumbruch.

    Wenn du ein layout wie bei dem Bild oben erstellen möchtest, brauchst du 3 div's:

    linke spalte - im quelltext das erste div bekommt "float:left;" zugewisen und sagen wir mal "width:150px;".

    rechte spalte - im quelltext das zweite div - bekommt "float:right;" und "width:150px;".

    inhalt (mittlere spalte) - im quelltext das LETZTE div - bekommt kein float, nur ein "width:600px".

    Um die drei divs könntest du noch ein viertes legen (wäre im quelltext dann das allererste, vor dem div für die linke spalte) und dem ding dann so formatieren:
    margin: 40px auto 10px auto; width:900px;

    dann wär die seite schön mittig. Das ergebnis ist dann ein dreispaltiges layout mit einer fixen breite von 900px (angaben sind richtwerte, für 1280x1024 und 1024&768 aber nahezu perfekt).

    Du hast übrigens Glück, ich hab hier noch eine kleine Vorlage von mir gefunden:

    Vielleicht blickst du mit diesem konkreten (einfachen) Beispiel besser durch (es lässt sich sehr leicht so umbauen, dass du nur mehr die drei spalten hast - einfach header- und footer-div entfernen). Wenn du deine Seite mit CSS gestalltest, solltest du den CSS Quelltext allerdings in eine seperate *.css datei auslagern (schneller und einfacher handhabbar).

    Ich hoffe ich konnte damit ein bisschen helfen ;)

    mfg
    Stefan

    Zitat von GreatStuff

    <span> um ein p-Tag

    Wenn du einen Span-Tag um ein P-Tag legst, hast du allerdings schon einen Fehler Produziert. Block-Elemente dürfen nicht von Inline-Elementen umschlossen werden. Genauso wenig wie du eine Ul in ein P packen darfst, oder ein a um ein Div.
    Du stülpst ja auch keinen Luftballon um nen Karton, sondern legst den Luftballon in den Karton ;)

    Sometimes you have a programming problem and it seems like the best solution is to use regular expressions; now you have two problems.

    danke für die vielen Tipps und Hinweise! :daumenhoch:

    GreatStuff : Hab deine Vorlage getestet... Genau sowas in der Art hab ich gesucht, allerdings sind jetzt weitere Fragen aufgetaucht und zwar gibts ja per float eben left, "middle" und right. Kann ich dann nur 3 nebeneinander haben oder auch mehrere?

    Und wie bekomm ich das dann hin dass ich mehrere divs nebeneinander habe?

    mfg :) [/b]

    hallo,
    also irgendwie hab ich einige Probleme und blick mich nicht ganz durch!

    Probiert mal folgenden Code aus und schaut ihn euch(ich verwende Firefox) in einem Browser an!


    Man sieht dass das linke und das rechte div-Tag funktionieren aber das mittlere nicht, wenn das mittlere div-Tag länger(nach unten) wird dann schiebt es sich in die anderen divs rein, ich will aber dass die 3divs alle eigenständige Container sind!

    mfg :)

    PS: Lasst euch nicht durch die vielen
    s verwirren, das soll nur zur Veranschaulichung dienen!

    ok danke,das hat wunderbar funktioniert aber wieder ist eine Frage aufgetaucht!
    Wenn ich beim rechten div einen Abstand vom linken Rand will, also vom eigenen div-Rand(padding) dann vergrößert sich das gesamte rechte div-Tag Richtung Mitte. :(

    Zum Testen, einfach meinen Code hernehmen und im div Tag noch ein padding-left anhängen dann sieht man was ich meine...

    Code
    <div style="padding-left:20px; padding-top:14px; background-color:#00FF00; float:right; width:172px;">DIV rechts
DIV rechts
DIV rechts
DIV rechts
DIV rechts
DIV rechts
DIV rechts
</div>

    Schon langsam verzweifle ich mit diesen div Tags :/
    Ich find das wirklich sehr sehr sehr umständlich, außerdem hab ich ganze Zeit das Gefühl dass dieses gesamte rumgecode irgendwie zusammengepfuscht, also nicht wirklich stabil ist. Kann mich auch täuschen weil ich noch unerfahren bin! :oops:

    Aber vielen Dank für die Antworten und Hilfe bis jetzt! :)
    mfg

    Das sieht nur am Anfang etwas umständlich aus. Mit der Zeit denkst du dir dabei gar nichts mehr :lol:
    Zum Verständnis sieh dir mal das CSS-Boxmodell an.
    Zur eigentlichen Breitenangabe (width) musst du noch die Innenabstände und sofern vorhanden die Rahmenstärken hinzuzählen und berücksichtigen. Je größer der Innenabstand, je kleiner musst du die Breite wählen.

    Damit ich nicht immer rechnen muss, arbeite ich mit einem flexiblen Layout:
    Definiere die Breiten statt in Pixeln in Prozentwerten. Zusammen mit padding- und margin-Angaben sollten dann nicht mehr als 100% in der Summe herauskommen damit man nicht scrollen muss.
    Hierzu folgendes Beispiel
    Diese Methode hat ausßerdem den Vorteil, dass sich die Breite einer Seite immer auch der jeweiligen Bildschirmauflösung anpasst.