Ergebnis 1 bis 9 von 9

Thema: CSS: Drei Spalten mit <div> (px,%,px) oder Alternative <table>?

  1. #1

    Standard CSS: Drei Spalten mit <div> (px,%,px) oder Alternative <table>?

    Ich versuche bereits seit einem Tag, drei <div>-Elemente nebeneinander zu platzieren. Das linke und das rechte Element soll 250 Pixel breit sein und das mittlere soll die Lücke zwischen den beiden dynamisch füllen. Ich habe bereits Versuche mit margin, float, position und width:auto/100% gemacht, diese scheiterten jedoch.
    Wie kann ich nun so etwas definieren?

    Das geplante Layout ist für mich mit Tabellen lösbar, aber ich lese öfters, dass Tabellen nicht als Layout missbraucht werden sollen. Aus welchem Grund eigentlich? Sind Tabellen-Tags "deprecated"-gefährdet?
    Kann man mit <div>s auch Layoutstrukturen erstellen, die genau so wie (zum Teil dynamische) Tabellen, die auf rowspan und colspan basieren, aussehen, erstellen? Oder sollte ich lieber die Tabellen-Variante benutzen?

  2. #2

    Standard AW: CSS: Drei Spalten mit <div> (px,%,px) oder Alternative <table>?

    Zitat Zitat von Joker Beitrag anzeigen
    Ich versuche bereits seit einem Tag, drei <div>-Elemente nebeneinander zu platzieren. Das linke und das rechte Element soll 250 Pixel breit sein und das mittlere soll die Lücke zwischen den beiden dynamisch füllen. Ich habe bereits Versuche mit margin, float, position und width:auto/100% gemacht, diese scheiterten jedoch.
    Wie kann ich nun so etwas definieren?

    Das geplante Layout ist für mich mit Tabellen lösbar, aber ich lese öfters, dass Tabellen nicht als Layout missbraucht werden sollen. Aus welchem Grund eigentlich? Sind Tabellen-Tags "deprecated"-gefährdet?
    Kann man mit <div>s auch Layoutstrukturen erstellen, die genau so wie (zum Teil dynamische) Tabellen, die auf rowspan und colspan basieren, aussehen, erstellen? Oder sollte ich lieber die Tabellen-Variante benutzen?
    Mit Tabellen wäre dies zwar lösbar, es besteht jedoch das Problem, dass Tabellen (wenn du sie mit % machst), je nach Auflösung variieren (wenn nicht, bitte verbessern. Bin mir aber sicher).

    Du könntest das ganze mit CSS (Cascading Style Sheets) lösen (wenn das in Counter Strike möglich ist).

    Viel Spaß
    5 Kills in Folge heißen bei Quake "Excellent", bei UT "Monsterkill" und bei CS "Kicked by console".

  3. #3
    Avatar von CamperFake
    Registriert seit
    12.01.2008
    Ort
    nicht Main-Spessart

    Standard AW: CSS: Drei Spalten mit <div> (px,%,px) oder Alternative <table>?

    Zitat Zitat von Raiden Beitrag anzeigen
    Mit Tabellen wäre dies zwar lösbar, es besteht jedoch das Problem, dass Tabellen (wenn du sie mit % machst), je nach Auflösung variieren (wenn nicht, bitte verbessern. Bin mir aber sicher).

    Du könntest das ganze mit CSS (Cascading Style Sheets) lösen (wenn das in Counter Strike möglich ist).

    Viel Spaß
    Ich glaub er meint damit nicht Counter Strike: Source.
    Oder doch?
    KÄSE!

  4. #4

    Standard AW: CSS: Drei Spalten mit <div> (px,%,px) oder Alternative <table>?

    Zitat Zitat von Raiden Beitrag anzeigen
    Mit Tabellen wäre dies zwar lösbar, es besteht jedoch das Problem, dass Tabellen (wenn du sie mit % machst), je nach Auflösung variieren (wenn nicht, bitte verbessern. Bin mir aber sicher).
    Gerade das meine ich mit dynamisch. Es ist geplant, dass sich das Layout nach der Auflösung des Fensters anpasst. Doch gerade das verursacht mein Problem, denn 100% bezieht sich im style-Tag auf die Fensterbreite und nicht auf die Lückenbreite.

    Zitat Zitat von Raiden Beitrag anzeigen
    Du könntest das ganze mit CSS (Cascading Style Sheets) lösen (wenn das in Counter Strike möglich ist).
    Lolwut. Von CS:S ist hier nicht die Rede. Und gerade, wie man es in CSS lösen kann, ist die Frage.

    Ich würde es bevorzugen, es mit Tabellen zu machen, jedoch bin ich mir nicht mit dessen Nachteilen bewusst. Da es anscheinend auch mit <div> lösbar ist, vermute ich, dass Tabellen deprecated-gefährdet sind. Deshalb die zweite Frage.

  5. #5

    Standard AW: CSS: Drei Spalten mit <div> (px,%,px) oder Alternative <table>?

    Zitat Zitat von Joker Beitrag anzeigen
    Lolwut. Von CS:S ist hier nicht die Rede. Und gerade, wie man es in CSS lösen kann, ist die Frage.
    Uhm... sorry, hab mich verlesen.
    5 Kills in Folge heißen bei Quake "Excellent", bei UT "Monsterkill" und bei CS "Kicked by console".

  6. #6

    Standard AW: CSS: Drei Spalten mit <div> (px,%,px) oder Alternative <table>?

    Tabellen werden natürlich nicht plötzlich aus dem HTML Standard verschwinden. Es geht bei dem Thema darum, dass Tabellen möglichst für tabellarische Inhalte genutzt werden sollen und nicht für das Layout.

    Bei deinem spezifischen Problem, denke ich dass du die Sache einfach falsch angegangen bist. Das ganze ist nicht kompliziert zu lösen. Du brauchst eigentlich nur drei <div> Elemente, wobei den beiden an der linken und rechten Seite jeweils die feste Breite von 250px und float left bzw right übergibst. Das <div> Element in der Mitte braucht keine Breite, es reicht aus, diesem links und rechts einen entsprechenden Außenabstand (margin) von mehr als 250px zu geben. Sollte so eigentlich hinhauen.

  7. #7

    Standard AW: CSS: Drei Spalten mit <div> (px,%,px) oder Alternative <table>?

    Danke, aber mit folgendem Code:
    HTML-Code:
    <html>
    <body style="margin:0">
    <div style="width:250px; height:250px; background-color:red; float:left"></div>
    <div style="margin-left:250px; margin-right:250px; height:250px; background-color:green"></div>
    <div style="width:250px; height:250px; background-color:blue; float:right"></div>
    </body>
    </html>
    erhalte ich links eine 250px breite rote Box, in der Mitte eine grüne dynamische Box und rechts, aber erst in der nächsten "Zeile", die grüne Box. Kurz: Alles funktioniert bis auf die rechte Box, die exakt unter ihrem geplanten Platz liegt.

    ASCII-Bild zur Veranschaulichung:
    Code:
    |¯¯|¯¯¯¯¯|
    |__|_____|
             |¯¯|
             |__|
    EDIT: Mit margin-top:-250px lässt sich das lösen. Ich weiß aber nicht, ob es die geeignete Lösung ist.
    Geändert von Joker (08.03.2010 um 18:42 Uhr)

  8. #8

    Standard AW: CSS: Drei Spalten mit <div> (px,%,px) oder Alternative <table>?

    Das float Attribut bezieht sich auf das oder die nachfolgenden <div> Element(e). Daher musst du den Container mit dem "float:right" im Code weiter vorne platzieren:
    HTML-Code:
    <html>
    <body style="margin:0">
    <div style="width:250px; height:250px; background-color:red; float:left"></div>
    <div style="width:250px; height:250px; background-color:blue; float:right"></div>
    <div style="margin-left:250px; margin-right:250px; height:250px; background-color:green"></div>
    </body>
    </html>

  9. Folgende 2 Benutzer sagen Danke zu LoC für den nützlichen Beitrag:


  10. #9

    Standard AW: CSS: Drei Spalten mit <div> (px,%,px) oder Alternative <table>?

    Das hat geholfen, vielen Dank.

    Wie kann ich dasselbe nun senkrecht machen? Also den oberen und den unteren Block 250px hoch und das mittlere dynamisch hoch?
    Ich habe es auf die Schnelle selbst versucht. Kam aber zu keinem erfolgreichen Ergebnis, da float nur horizontal beeinflussen und position anscheinend die %-Größe nicht beeinflusst. Das Block, in dem sich die senkrechten Blöcke befinden, ist 700px hoch, aber das dynamische Block selbst (100%) ist auch 700px hoch, trotz eigener Versuche mit position oder float.

    EDIT: Funktioniert alles. Danke.
    Geändert von Joker (09.03.2010 um 17:05 Uhr)

Ähnliche Themen

  1. [LUA] Table mit leerzeichen?
    Von 4ndy im Forum Lua
    Antworten: 4
    Letzter Beitrag: 04.01.2010, 21:57
  2. Die Drei
    Von !Xirteg! im Forum Bildbearbeitung
    Antworten: 10
    Letzter Beitrag: 30.03.2009, 03:07
  3. Antworten: 8
    Letzter Beitrag: 05.08.2008, 16:33
  4. Namen mit table vergleichen
    Von Stoned im Forum Lua
    Antworten: 5
    Letzter Beitrag: 27.07.2008, 17:43
  5. Tomb Raider Anniversary: Out of Table Range
    Von N4pst3R #1 im Forum Computer & Konsolen Spiele
    Antworten: 14
    Letzter Beitrag: 08.06.2007, 22:01

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •