[CSS] Design ohen table-tags?

[MarcDK]

Hi Leute!

Ich möchte ab jetzt table-tags so weit wie möglich umgehen.
Aber wie baue ich denn si ein Gebilde (siehe anhang) mit CSS2 ohn Table-Tags?

Oder komme ich nicht drum rum so etwas zu machen:

 <table>
    <tr>
  	<td>
  	  bild
  	</td>
  	<td>
  	  <b>
  		HEAD
  		</b>
  	  <p>
  		TEXT
  	  </p>
  	</td>
    </tr>
    <tr>
  	<td>
  	  bild
  	</td>
  	<td>
  	  <b>
  		HEAD
  		</b>
  	  <p>
  		TEXT
  	  </p>
  	</td>
    </tr>
  </table>

Und dann mit CSS2-Stylen?

Oder geht es auch schöner?

 

[FH16]

Das funktioniert mit den "float" und "clear"-Attributen. Ich habs mal gebastelt, allerdings ohne grossartige Formatierungen:

<style>
	div { padding:2px; }
	div.container {float:left; clear:both; margin-bottom:12px; border:1px solid red; }
	div.spalte { float:left; }
	div.bild { float:left; }
	div.titel { font-size:14pt; }
	div.text {  }
</style>


<div class="container">
	<div class="bild"><img src="bild.gif" width="50" height="50"></div>
	<div class="spalte">
		<div class="titel">Titel</div>
		<div class="text">Text<br>hallo</div>
	</div>
</div>

<div class="container">
	<div class="bild"><img src="bild.gif" width="50" height="50"></div>
	<div class="spalte">
		<div class="titel">Titel</div>
		<div class="text">Text<br>hallo</div>
	</div>
</div>

Für Formatierungen kannst natürlich alle gängigen CSS-Tags benützen (font-family, font-size, border, background-color, color...). Eine tolle Übersicht dazu gibts auf http://de.selfhtml.org/

 

[MarcDK]

Geil! Genau so etwas habe ich gesucht!


Danke!

 

[Loopo]

warum willst du auf Tabellen verzichten?

 

[</Life>]

Nett das Teil... nur gehe ich wohl rcht in der Annahme, dass wenn sich einerder Absätz verlängert der andere sich nicht vergrössert, oder?
Schade, dann muss ich erstmal bei Tabellen bleiben
(wobei imo http://trashbin.dangerouscat.net/ vom Tabellenkram noch erträglich ist )

 

[Stewi]

Hier mal meine Seiten, auf denen ich gerne mal nachschaue.

http://css.fractatulum.net/index.htm
http://www.css-technik.de/
http://einfachfueralle.de/links/tutorials/css/
http://www.wiedow.de/Index.aspx

Tabellen haben durchaus ihren Sinn, jedoch werden sie zu oft als Layouthilfe missbraucht. Hierfür eignet sich CSS aber wesentlich besser. Mal ganz davon abgesehen, daß Änderungen ohne grossen Aufwand durchzuführen sind.

 

[MarcDK]

Re: [CSS] Design ohne table-tags?

Stimmt. Bei mehr Text macht er irgendwie das Layout kaputt.

Warum keine Tabellen? Weil ich das einfach mal ausprobieren wollte.

=)

 

[value]

warum willst du auf Tabellen verzichten?

Weil Tabellen für Tabellen gemacht wurden, nicht für die Positionierung von Elementen
Einfach um Inhalt und Präsentation zu trennen.

 

[</Life>]

Also... für mich ist das Hauptmerkmal einer Tabelle, dass die Elemente darin tabellentypisch positioniert sind...

 

[Stewi]

Also... für mich ist das Hauptmerkmal einer Tabelle, dass die Elemente darin tabellentypisch positioniert sind...

Genau, und deshalb sind sie designtechnisch völlig fehl am Platze.
Tabellen sind, wer hättes es gedacht, dazu da, um Daten tabellenförmig darzustellen. Leider werden sie oft für Layout und Design missbraucht. Mal ganz davon abgesehen das mit CSS erstellte Seiten wesentlich schlanker sind, und damit auch schneller geladen, gibt es Menschen die sich Internetseiten vorlesen lassen, Stichwort Barrierefreiheit. Auch dazu sind Tabellen gänzlich ungeeignet.

 

[</Life>]

Stichwort Barrierefreiheit. Auch dazu sind Tabellen gänzlich ungeeignet.

Öhm... O_o
Also... die Barrierefreiheitsvalidierungsdingsda haben mir auf meine Tabellen eine vernünftige Leserichtung ausgegeben...

Meine ALT-Tags sind gesetzt, mein einziges DHTML-Script ist erstmal ein Link auf eine Alternativseite, der bei Aktivierung des DHTML-Codes abgebrochen wird, usw...

Das einzige was mir nicht gefällt sind die Valid xy-Icons, die momentan inSachen Leserichtung noch mitten im Content stehen... aber dafür muss ich mir nacher mal 3 Minuten Zeit nehmen und das kurz ändern, das ist nicht das Problem.

Noch irgendwas vergessen?