[HTML/CSS] Tabellen im Vista-Look [gelöst]

Programie · Beitrag von **Programie** » 30.04.2009 19:25

Hi,

Ich habe letztens mal angefangen, meine Homepage neu zu designen. Ich habe mich für Vista Style entschieden und möchte nun auch Tabellen im Vista-Design haben.
Also ich möchte, dass eine Tabelle mit Linien so wie im Windows Explorer bei Vista (Detailsansicht) aussieht. Wie könnte man das mit Html und CSS lösen?

Wenn mir jemand Google vorschlägt: Ich habe gerade ein paar Stunden lange danach gesucht, aber nichts gefunden.

Wer sehen will, wie die Seite bis jetzt aussieht: Hier ist der Link

TomS · Beitrag von **TomS** » 30.04.2009 19:35

Hau lieber mal nen Screenshot her, wie es aussehen soll.

Ich hab nämlich kein Vista.

Programie · Beitrag von **Programie** » 30.04.2009 19:49

TomS hat geschrieben:Hau lieber mal nen Screenshot her, wie es aussehen soll.

Also mir geht es um das Design wie die Linien, Spaltentitel, etc. dargestellt werden.

TomS · Beitrag von **TomS** » 30.04.2009 19:53

Die Gruppen auch (A-H 6 ----------)?

AND51 · Beitrag von **AND51** » 30.04.2009 19:56

Wenn du einen Vista-Look willst, solltest du auch den IE 7 und IE 8 unterstützen.
Deine Webseite ist im IE 8 weder mit noch ohne Kompatiblitätsansicht korrekt darstellbar.

Sonst eine originelle Idee.

Programie · Beitrag von **Programie** » 30.04.2009 20:18

AND51 hat geschrieben:Wenn du einen Vista-Look willst, solltest du auch den IE 7 und IE 8 unterstützen.
Deine Webseite ist im IE 8 weder mit noch ohne Kompatiblitätsansicht korrekt darstellbar.

Das habe ich irgendwie noch nicht hinbekommen.

Weicht zwar vom Thementitel ab, aber egal: Weiß jemand, wie man das beheben kann?

TomS hat geschrieben:Die Gruppen auch (A-H 6 ----------)?

Ja.

Deluxe0321 · Beitrag von **Deluxe0321** » 30.04.2009 21:04

Mal einen Rohling dafür.. den Rest (styling) solltest du selbst schaffen

Code: Alles auswählen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ohne_Titel_1</title>
<style type="text/css">
.mainbox {
	background-image: url('1.png');
	background-repeat: repeat-x;
	background-position: 20px;
}
.ubtext {
	padding-right:5px;
    float:left;
    background-color:white;

}
.folderbox {
	width:80%
}
.files {
	padding-left:20px;
}
</style>
</head>

<body>
<div class="folderbox">
<div class="mainbox"><div class="ubtext">lueberschrift</div>&nbsp;</div>
<div class="files">
	<table style="width: 100%">
		<tr>
			<td>Name</td>
			<td>Size</td>
			<td>&nbsp; Rating</td>
		</tr>
		<tr>
			<td>&nbsp;c</td>
			<td>&nbsp;a</td>
			<td>&nbsp;b</td>
		</tr>
		<tr>
			<td>&nbsp;a</td>
			<td>&nbsp;c</td>
			<td>&nbsp;b</td>
		</tr>
	</table>
</div>
</div>
<div class="folderbox">
<div class="mainbox"><div class="ubtext">Games made by me</div>&nbsp;</div>
<div class="files">
	<table style="width: 100%">
		<tr>
			<td>Name</td>
			<td>Size</td>
			<td>&nbsp; Rating</td>
		</tr>
		<tr>
			<td>&nbsp;c</td>
			<td>&nbsp;a</td>
			<td>&nbsp;b</td>
		</tr>
		<tr>
			<td>&nbsp;a</td>
			<td>&nbsp;c</td>
			<td>&nbsp;b</td>
		</tr>
	</table>
</div>
</div>
<div class="folderbox">
<div class="mainbox"><div class="ubtext">software made by me</div>&nbsp;</div>
<div class="files">
	<table style="width: 100%">
		<tr>
			<td>Name</td>
			<td>Size</td>
			<td>&nbsp; Rating</td>
		</tr>
		<tr>
			<td>&nbsp;c</td>
			<td>&nbsp;a</td>
			<td>&nbsp;b</td>
		</tr>
		<tr>
			<td>&nbsp;a</td>
			<td>&nbsp;c</td>
			<td>&nbsp;b</td>
		</tr>
	</table>
</div>
</div>

</body>

</html>

Das Bild dazu: http://marv.sceneproject.org/1.png

Edit: UPS!!! bin wohl ein wenig verstrahlt.. bei mir ist die tabelle ja genau falsch rum ^^

Grüße Marv

TomS · Beitrag von **TomS** » 30.04.2009 21:07

Die Farben von Rand und Gruppenüberschrift stimmen nicht, is aber auch kein Wunder, bei der miesen JPEG-Qualität

http://toms.rshost.de/vistatable/

Schriftwart hab ich jetzt mal Arial Fett verwendet, sieht nicht aus, wie Vista, hab aber keine Ahnung, was das auf dem Bild ist. Tahoma oder so?

Auch die Hintergrundgrafiken für den Header musst du neu machen. Nach der 3. Jpeg-Kompression schauen die schon ziemlich bescheuert aus.

Programie · Beitrag von **Programie** » 30.04.2009 21:10

@Deluxe0321: Ja das könnte vielleicht nach dem aussehen, was ich suche.
Ich muss ja jetzt nur noch das Bild mit dem richtigen Bild von Vista ersetzen und es sieht (fast) genau so aus.

Thx.

Jetzt bleibt aber noch das Problem mit der Kompatiblität beim IE.
Muss man dafür einen anderen Doctype verwenden?

Deluxe0321 · Beitrag von **Deluxe0321** » 30.04.2009 21:10

schaut hübsch aus