Tabelle ersetzen durch css

Status
Nicht offen für weitere Antworten.

marlone_de

Grünschnabel
Hallo

Ich habe ein Problem. Ich möchte eine Tabelle mit css darstellen, doch leider verschieben sich die Zeilen so komisch. Ich gebe euch mal den Quelltext und vielleicht sieht einer ja so den Fehler.
Als Ergebnis sollte eine Zeile Überschrift sein, die nebeneinander in Kästen dargestellt wird, und keinen Zeilenumbruch hat. Die anderen Zeilen sollen dann der Tabelleninhalt sein.

HTML:
<html>

<head>
<title>FahrzeugID</title>
<style>
<!--
.Style1 {position:absolute; width:1950; top:10 }
.Style2 {position:absolute; width:1950; top:30 }

.ÜberschriftStyle { font-family: Tahoma; font-size: 10pt; color: #FFFFFF; font-weight: bold; 
               position: relative; width: 120; 
               border: 1px solid #000080; padding-left: 4px; padding-right: 
               4px; padding-top: 1px; padding-bottom: 1px; background-color: 
               #0099FF; float:left; }
               
.ElementStyle { font-family: Tahoma; font-size: 10pt; color: #000000; 
				position: relative;  width: 120; 
               padding-left: 4px; padding-right: 
               4px; padding-top: 1px; padding-bottom: 1px; float:left }
               
}

                              

-->
</style>
</head>

<body>
<div class="Style1">
<p class="ÜberschriftStyle">FahrzeugID</p>
<p class="ÜberschriftStyle">Standort</p>
<p class="ÜberschriftStyle">Art</p>
<p class="ÜberschriftStyle">Klasse</p>
<p class="ÜberschriftStyle">Marke</p>
<p class="ÜberschriftStyle">Modell</p>
<p class="ÜberschriftStyle">Erstzulassung</p>
<p class="ÜberschriftStyle">Kennzeichen</p>
<p class="ÜberschriftStyle">Fahrgestellnummer</p>
<p class="ÜberschriftStyle">Leistung</p>
<p class="ÜberschriftStyle">MaxKilometer</p>
<p class="ÜberschriftStyle">Türen</p>
<p class="ÜberschriftStyle">Farbe</p>
<p class="ÜberschriftStyle">Sonderausstattung</p><br />
</div>
<div class="Style2">
<p class="ElementStyle">1</p>
<p class="ElementStyle">Polen</p>
<p class="ElementStyle">Kauf</p>
<p class="ElementStyle">Oberklasse</p>
<p class="ElementStyle">BMW</p>
<p class="ElementStyle">7er</p>
<p class="ElementStyle">01.01.2006</p>
<p class="ElementStyle">AB-CD-123</p>
<p class="ElementStyle">231242134</p>
<p class="ElementStyle">101 PS</p>
<p class="ElementStyle">20.000 km</p>
<p class="ElementStyle">5</p>
<p class="ElementStyle">schwarz-perleffekt</p>
<p class="ElementStyle">Navigation</p>

</div>
</body>

</html>
 
Das liegt daran das du bei den Überschriften-Style noch einen Rahmen von 1px hast. Im Inhalt hast du den nicht mehr. Der addiert sich dann zu Ende hin auf und deshalb kommt die Verschiebung.
 
Hier der erweiterte Quellcode:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>FahrzeugID</title>
<style>
<!--
.Style1 {position:absolute; width:1950px; top:10px; }
.Style2 {position:absolute; width:1950px; top:30px; }

.ÜberschriftStyle {
font-family: Tahoma;
font-size: 10pt;
color: #FFFFFF;
font-weight: bold;
position: relative;
width: 120px;
border: 1px solid #000080;
padding-left: 4px;
padding-right:4px;
padding-top: 1px;
padding-bottom: 1px;
background-color: #0099FF;
float:left;
}

.ElementStyle {
font-family: Tahoma;
font-size: 10pt;
color: #000000;
position: relative;
width: 120px;
border: 1px solid #fff;
padding-left: 4px;
padding-right:4px;
padding-top: 1px;
padding-bottom: 1px;
float:left; 
}
-->
</style>
</head>

<body>
<div class="Style1">
<p class="ÜberschriftStyle">FahrzeugID</p>
<p class="ÜberschriftStyle">Standort</p>
<p class="ÜberschriftStyle">Art</p>
<p class="ÜberschriftStyle">Klasse</p>
<p class="ÜberschriftStyle">Marke</p>
<p class="ÜberschriftStyle">Modell</p>
<p class="ÜberschriftStyle">Erstzulassung</p>
<p class="ÜberschriftStyle">Kennzeichen</p>
<p class="ÜberschriftStyle">Fahrgestellnummer</p>
<p class="ÜberschriftStyle">Leistung</p>
<p class="ÜberschriftStyle">MaxKilometer</p>
<p class="ÜberschriftStyle">Türen</p>
<p class="ÜberschriftStyle">Farbe</p>
<p class="ÜberschriftStyle">Sonderausstattung</p><br />
</div>
<div class="Style2">
<p class="ElementStyle">1</p>
<p class="ElementStyle">Polen</p>
<p class="ElementStyle">Kauf</p>
<p class="ElementStyle">Oberklasse</p>
<p class="ElementStyle">BMW</p>
<p class="ElementStyle">7er</p>
<p class="ElementStyle">01.01.2006</p>
<p class="ElementStyle">AB-CD-123</p>
<p class="ElementStyle">231242134</p>
<p class="ElementStyle">101 PS</p>
<p class="ElementStyle">20.000 km</p>
<p class="ElementStyle">5</p>
<p class="ElementStyle">schwarz-perleffekt</p>
<p class="ElementStyle">Navigation</p>
</div>

</body>
</html>
Aber warum verwendest Du in diesem Fall nicht direkt eine Tabelle?
 
Unser Prof. findet css schöner. Ich hätte auch lieber eine Tabelle genommen, vor allem, weil ich jetzt Darstellungsprobleme mit dem Firefox habe.
 
Dann erkläre ihm mal, dass auch wenn CSS noch so schön ist, Tabellen für tabellarische Daten gedacht sind und daher auch genutzt werden sollen.

Was unterrichtet der denn?
 
Status
Nicht offen für weitere Antworten.
Zurück