Seite 1 von 2
[HTML/CSS] Tabellen im Vista-Look [gelöst]
Verfasst: 30.04.2009 19:25
von Programie
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
Verfasst: 30.04.2009 19:35
von TomS
Hau lieber mal nen Screenshot her, wie es aussehen soll.
Ich hab nämlich kein Vista.
Verfasst: 30.04.2009 19:49
von Programie
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.
Verfasst: 30.04.2009 19:53
von TomS
Die Gruppen auch (A-H 6 ----------)?
Verfasst: 30.04.2009 19:56
von AND51
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.
Verfasst: 30.04.2009 20:18
von Programie
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.
Verfasst: 30.04.2009 21:04
von Deluxe0321
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> </div>
<div class="files">
<table style="width: 100%">
<tr>
<td>Name</td>
<td>Size</td>
<td> Rating</td>
</tr>
<tr>
<td> c</td>
<td> a</td>
<td> b</td>
</tr>
<tr>
<td> a</td>
<td> c</td>
<td> b</td>
</tr>
</table>
</div>
</div>
<div class="folderbox">
<div class="mainbox"><div class="ubtext">Games made by me</div> </div>
<div class="files">
<table style="width: 100%">
<tr>
<td>Name</td>
<td>Size</td>
<td> Rating</td>
</tr>
<tr>
<td> c</td>
<td> a</td>
<td> b</td>
</tr>
<tr>
<td> a</td>
<td> c</td>
<td> b</td>
</tr>
</table>
</div>
</div>
<div class="folderbox">
<div class="mainbox"><div class="ubtext">software made by me</div> </div>
<div class="files">
<table style="width: 100%">
<tr>
<td>Name</td>
<td>Size</td>
<td> Rating</td>
</tr>
<tr>
<td> c</td>
<td> a</td>
<td> b</td>
</tr>
<tr>
<td> a</td>
<td> c</td>
<td> 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
Verfasst: 30.04.2009 21:07
von TomS
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.
Verfasst: 30.04.2009 21:10
von Programie
@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?
Verfasst: 30.04.2009 21:10
von Deluxe0321
schaut hübsch aus
