tabellenlose Tabelle

**steffenk** · 14.11.2005 23:56

... oder wie man das Ding auch nennen will.

Beim Versuch, eine Tabelle durch Divs zu ersetzen stosse ich auf Probleme, sowohl im IE als auch im FF.
Es wird ein float-Problem sein, richtig gecheckt hab ich das nicht.

Bin für jede Hilfe dankbar

Hier kann mans online sehen

Hier der Source:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Filelist</title>

<style type="text/css">
* {margin:0;padding:0;}
body {background:#325421;}
#content {width:380px;margin:30px auto;background:#ffffcc;border:1px solid black;padding:0.9em;}
.left {float:left;}
.clear {clear:left;}
.csc-uploads { border: 0px; background-color : transparent; font-size: 0.8em; vertical-align : top;}
.csc-uploads .tr-even { background-color: #EFEFEF; }
.csc-uploads .tr-odd { background-color: #CCCCCC; }
.csc-uploads .csc-uploads-icon { padding-left: 6px; padding-right: 6px; width: 1%; text-align: center; vertical-align: middle; }
.csc-uploads .csc-uploads-fileName { width: 80%; padding-left: 0.3125em; }
.csc-uploads .csc-uploads-fileName P A { font-weight: bold; }
.csc-uploads .csc-uploads-fileName P.csc-uploads-description { font-style: italic; }
.csc-uploads .csc-uploads-fileSize { white-space: nowrap; padding-left: 6px; padding-right: 6px; }
.csc-uploads-1 div { border-color: #186900; }
.csc-uploads-2 div { border-color: #10007B; }
.csc-uploads-3 div { border-color: #8A0020; }
.csc-uploads-3 { vertical-align: middle; }
.csc-uploads-3 .tr-even .csc-uploads-icon IMG { border: 0.125em solid #333333; }
.csc-uploads-3 .tr-odd .csc-uploads-icon IMG { border: 0.125em solid #333333; }
.csc-header-n2 h1 {color:#990000;margin:0px;padding:0px;margin-top:0.5em;} 
</style>
</head>

<body>


<div id="content"><a name="7"></a>
	<div class="csc-header csc-header-n1">
		<h4 class="csc-firstHeader">Dokumentationen</h4>
	</div>
	
	<div class="csc-uploads">
		<div class="tr-even clear">
			<div class="csc-uploads-icon left">
				<a href="dokumentation.pdf" target="_blank"><img src="pdf.gif" width="18" height="16" border="0"  title="" /></a>
			</div>
			<div class="csc-uploads-fileName left">
				<p><a href="dokumentation.pdf" target="_blank">dokumentation.pdf</a></p>
				<p class="csc-uploads-description left">Das beste Einsteigertutorial, von Robert Meyer</p>
			</div>
			<div class="csc-uploads-fileSize left">
				<p>1.2 M</p>
			</div>
		</div>
	
		<div class="tr-odd clear">
			<div class="csc-uploads-icon left">
				<a href="T3Redakteure.ZIP" target="_blank"><img src="zip.gif" width="18" height="16" border="0"  title="" /></a>
			</div>
			<div class="csc-uploads-fileName left">
				<p><a href="T3Redakteure.ZIP" target="_blank">T3Redakteure.ZIP</a></p>
				<p class="csc-uploads-description left">Anleitung f&#252;r Redakteure</p>
			</div>
			<div class="csc-uploads-fileSize left">
				<p>2.1 M</p>
			</div>
		</div>
		
		<div class="tr-even clear">
			<div class="csc-uploads-icon left">
				<a href="adminguide-35_0.pdf" target="_blank"><img src="pdf.gif" width="18" height="16" border="0"  title="" /></a>
			</div>
			<div class="csc-uploads-fileName left">
				<p><a href="adminguide-35_0.pdf" target="_blank">adminguide-35_0.pdf</a></p>
				<p class="csc-uploads-description left">Admin-Guide (englisch)</p>
			</div>
			<div class="csc-uploads-fileSize left">
				<p>219 K</p>
			</div>
		</div>
	</div>
</div>

</html>
</body>
</html>

ingo · 15.11.2005 06:46

Zitat von St@eff.en

Es wird ein float-Problem sein, richtig gecheckt hab ich das nicht.

moin steffen,
ich check nicht, warum du dafür keine tabelle nimmst?!
wenn man die sache streng religiös betrachtet, sind das ja einwandfreie tabellarische daten.

auf der anderen seite sparst du dir das ganze codegulasch.

**December** · 15.11.2005 07:31

Also ich hab' das Ganze mit div's lösen können. Zumindest was zwei Spalten angeht:

HTML-Code:

<div id="listelinksfs1" class="listehighlight">
<a href="link" class="listelink">Text</a>
</div>
<div id="listerechtsfs2" class="listehighlight">
<a href="link" class="listelink">Bild</a>
</div>
<div id="listelinksfs1" class="listehighlight">
<a href="link" class="listelink">Text</a>
</div>
<div id="listerechtsfs2" class="listehighlight">
<a href="link" class="listelink">Bild</a>
</div>

und im CSS-File:

Code:

#listelinks {width: 395px; height:60px; float: left; margin-bottom: 5px; padding-left: 5px; padding-right: 5px; line-height: 150%; font-family: Trebuchet MS, Tahoma, Helvetica}
#listerechts {width: 55px; height: 55px; float: right; margin-bottom: 1px; padding-left:5px; padding-top: 5px}

So sieht's dann aus:

Link

Weiß nicht, ob dir das weiterhilft.

Gruß,

December

**steffenk** · 15.11.2005 09:00

@ingo - streng religiös gesehen sind Tabellen böse

Der Codegulasch ist mir egal, da diese Listen generiert werden. Auch wenn man das mit Tabellen lösen kann, möchte ich es so hinbekommen - nimms als kniffeliges Rätsel

@December - das ist eine Lösung für eine andere Tabelle. Mir geht es nicht darum, generell Spalte nebeneinander zu haben, das hat man ja in fast jedem fluid Design, sondern ich möchte mein Beispiel korrekt ausgegeben haben, aber vielen Dank.

ingo · 15.11.2005 11:34

Zitat von St@eff.en

- nimms als kniffeliges Rätsel

so richtig rätselhaft ist das nicht, mehr sinnfrei

eine tabelle ist eine tabelle ist eine tabelle

**Tobias** · 15.11.2005 13:11

Für die Darstellung von tabellarischen Daten ist doch eine html Tabelle selbst in den strict Empfehlungen des W3C zulässig. Vorausgesetzt, man hält sich an die gültigen Formatierungen.

**rewboss** · 15.11.2005 16:21

Zitat von Tobias

Für die Darstellung von tabellarischen Daten ist doch eine html Tabelle selbst in den strict Empfehlungen des W3C zulässig.

Nicht nur das, sind sind dafür geeignet. Was böse ist, ist die Verwendung von Tabellen fürs Layout.

Ganz praktisch ist es, zum Beispiel, eine (richtige) Tabelle zu kopieren und in ein Word-Dokument einzufügen -- dann ist die Tabelle schon richtig formatiert, als Tabelle. Wenn du tabellarische Daten in <div>s einpackst, gehen dann die Spalten und Zeilen verloren und du hast nur noch unsinnigen Fließtext.

**steffenk** · 15.11.2005 16:28

Stop !

Ich möchte keine Diskussion über Sinn oder Unsinn anfachen. Mir geht es einzig um die Lösung meines CSS-Problems. Es steckt ein Fehler drin und ich finde ihn nicht, daher brauche ich Hilfe.

ingo · 15.11.2005 16:29

dann schau dir doch mal die links an, die ich dir poste, hm?!

**steffenk** · 15.11.2005 19:17

völlig übersehen - danke Ingo

ingo · 15.11.2005 19:42

du solltest doch eigentlich wissen, dass ich der allerletzte bin, der predigt

zur Startseite vom TP

Thema: tabellenlose Tabelle

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

tabellenlose Tabelle

Aktive Benutzer

Aktive Benutzer