HTML/CSS| Drei-Spalten Layout mit “gefakter table”- Inhalte der Spalten beeinflussen sich oO. why?

...komplette Frage anzeigen

4 Antworten

display: table-cell - in einer Tabelle ist der Inhalt immer vertikal zentriert, daran liegt das. vertical-align:top schafft Abhilfe.

(Und die h1 hat ein margin, der p nicht, deshalb sind die Abstände nach oben bei den beiden unterschiedlich.)

Ohh, da war einer schneller :)

0
@Babelfish

Jop dass margin den abstand bestimmt hab ich gemerkt :D

Aber jetzt klappts!

Vielen Dank euch beiden! :)

0

Tabellen sind für tabellarische Inhalte da und nicht für Layoutzwecke.

Lass die Tabellen weg und du hast das Problem nicht mehr. Wenn du nicht weisst wie man ein 3-Spalten-Layout sauber mit CSS umsetzt kannst du gerne bei html.de nachfragen.

doch es klappt ja jetzt.

Und ich hab doch extra erklärt wieso ich das tabellen layout verwende.

Soweit ich weiß komm ich da gar nicht drum rum bei dem was ich vor hab.

0
@dasAsdf

Natürlich kommt man da drum rum. Dazu gibt es genug Tutorials wie man das umsetzt.

Einfach mal ein bisschen mit CSS vertraut machen. Das was du da gemacht hast ist Murks

0
@Elroy7000

"Murks" also... kay...

Was spricht dagegen es so umzusetzen... ich hab mir nun angeschaut wie ich es ausschließlich mit divs löse.... Was daran besser sein soll ist mir bis jetzt immer noch ein Rätsel. Es kommt das gleiche bei raus aber man braucht bestimmt doppelt so viel Code.

Begründungen wie "tabellen sind nicht dazu gemacht."/ "Das ist so nicht vorgesehen etc" finde ich eher schwach.... Bis jetzt konnte mir keiner verraten was WIRKLICH die Nachteile sind.

0
@dasAsdf

ok. hab nun doch ne Lösung ohne table und mit weniger code ;)

0
@dasAsdf

Bis jetzt konnte mir keiner verraten was WIRKLICH die Nachteile sind.

Dann schliesse mal die Augen und surfe so wie es blinde Menschen tun und du wirst ganz schnell die Nachteile merken.

ich hab mir nun angeschaut wie ich es ausschließlich mit divs löse

Wer sein Layout mit Divs gestaltet kann auch gleich wieder Tabellen nehmen.

Mann, HTML ist eine Auszeichnungssprachen und nicht für das ausehen einer Webseite zuständig. Wann werdet ihr das endlich mal lernen.

0

Hallo dasAsdf,

dein Problem lässt sich relativ simpel mit floating lösen. Ohne jetzt viel erklären zu wollen hier einfach mal ein Link der die ganze Thematik gut erklärt:

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

hey. danke für die antwort ;)

Ich habs mir mal angeschaut. Das wäre natürlich auch eine Lösung.

Aber was spricht dagegen die von mir angwendete Möglichkeit zu nutzen? Das einzige Problem was ich damit hatte konnte ich ja nun lösen.

So wie ich es vorher gemacht habe finde ich es schon deutlich übersichtlicher und Code spare ich auch noch.

Ober gibt es ansonsten noch irgendwelche Nachteile eine Tabelle zu "simulieren"? (Ich benutze ja keine wirkliche Tabelle)

0
@dasAsdf

Hallo nochmal,

Nein, Nachteile wirst du kaum haben. Welche Technik man nun verwendet liegt ja im Endeffekt am Entwickler, und auch wenn Tabellen zum Layouten verschrien sind. =)

Dennoch ist es ratsam dass du dich an Standards hälst, denn solltest du mal ein Problem haben wirst du so schneller Hilfe durch die Community erfahren!

Viel Spaß mit deinen Projekten!

0

Einfach vertical-align:top mit angeben:

#leftrow
{
  vertical-align: top;
…
}

Gruß

Was möchtest Du wissen?