[CSS] Design ohen table-tags?

MarcDK

Banned

Registriert

Mai 2001

Beiträge

3.559

• 8. Juli 2004

• #1

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:

Code:

 <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?

 

Anhänge

• 
  css.gif

  5,9 KB · Aufrufe: 428

FH16

Lieutenant

Registriert

Dez. 2003

Beiträge

688

• 8. Juli 2004

• #2

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

HTML:

<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/

 

Zuletzt bearbeitet: 8. Juli 2004

MarcDK

Banned

Ersteller dieses Themas

Registriert

Mai 2001

Beiträge

3.559

• 8. Juli 2004

• #3

Geil! Genau so etwas habe ich gesucht!


Danke!

 

Loopo

Admiral

Registriert

Juli 2002

Beiträge

7.617

• 8. Juli 2004

• #4

warum willst du auf Tabellen verzichten?

 

L

</Life>

Lt. Junior Grade

Registriert

Apr. 2004

Beiträge

341

• 8. Juli 2004

• #5

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

Space Cowboy

Registriert

März 2001

Beiträge

6.985

• 8. Juli 2004

• #6

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

Banned

Ersteller dieses Themas

Registriert

Mai 2001

Beiträge

3.559

• 8. Juli 2004

• #7

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.

=)

 

Anhänge

• css_no_tables.zip

  580 Bytes · Aufrufe: 419

value

Commander

Registriert

Dez. 2003

Beiträge

2.120

• 8. Juli 2004

• #8

Loopo schrieb:

warum willst du auf Tabellen verzichten?

Zum Vergrößern anklicken....

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

 

L

</Life>

Lt. Junior Grade

Registriert

Apr. 2004

Beiträge

341

• 8. Juli 2004

• #9

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

 

Stewi

Space Cowboy

Registriert

März 2001

Beiträge

6.985

• 8. Juli 2004

• #10

</Life> schrieb:

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

Zum Vergrößern anklicken....

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.

 

L

</Life>

Lt. Junior Grade

Registriert

Apr. 2004

Beiträge

341

• 8. Juli 2004

• #11

Stewi schrieb:

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

Zum Vergrößern anklicken....

Ö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?