nicht angemeldet
Hi Leute,
eins vorneweg: Mir ist durchaus bewusst, dass Tabellen nicht zum layouten gedacht sind - daher auch mein Dilemma, denn mein gewünschtes Design lässt problemlos in einer Tabelle erzeugen, aber mit Divs bekomme ich es nicht hin.
Okay, folgendes möchte ich:
Die ganze Seite besteht lediglich aus 3x2 Feldern. Alle Felder sind gleich groß. Die Felder nehmen maximale Fläche ein, ohne dass der Browser Scrollbalken anzeigt. Der Text in allen Feldern ist horizontal und vertikal zentriert.
Zusätzlich sind die Felder jeweils Links, aber das ist an sich nebensächlich.
So sieht das ganze auf Tabellenbasis aus:
<html>
<head>
<style type="text/css"><!--
body {
margin:0px;
padding:0px;
}
table {
height:98%;
width:98%;
position:fixed;
top:1%;
left:1%;
text-align:center;
}
td {
width:33.33%;
margin:50px;
color:#000000;
background-color:#0080ff;
border: 5px solid black;
}
--></style>
<title>Datenbank</title>
</head>
<body class="color1">
<table>
<tr>
<td>[Status]</td>
<td>Erstellen</td>
<td>Anschauen</td>
</tr>
<tr>
<td>Laden</td>
<td>Regeln</td>
<td>?</td>
</tr>
</table>
</body>
</html>
Nun mein Versuch, das Ganze ohne Tabellen hinzubekommen:
<html>
<head>
<style type="text/css"><!--
body {
margin:0px;
padding:0px;
height:100%;
color:#0080ff;
background-color:#000000;
}
html{
height:100%;
}
a {
float:left;
display:block;
width:32%;
height:47%;
text-align:center;
/*position:relative;*/
color:#000000;
background-color:#0080ff;
}
.h-space{
clear:both;
width:100%;
height:2%;
}
.v-space{
float:left;
width:1%;
height:47%;
}
--></style>
<title>Datenbank</title>
</head>
<body class="color1">
<div class="h-space"></div>
<div class="v-space"></div>
<a href="">[Status]</a>
<div class="v-space"></div>
<a href="">Erstellen</a>
<div class="v-space"></div>
<a href="">Anschauen</a>
<div class="h-space"></div>
<div class="v-space"></div>
<a href="">Laden</a>
<div class="v-space"></div>
<a href="">Regeln</a>
<div class="v-space"></div>
<a href="">?</a>
<div class="h-space"></div>
</body>
</html>
Dazu ein paar Worte:
Ohne "height:100%" für html und body hat sich mein Firefox strikt geweigert, die prozentuale Höhe für die anderen Elemente zu übernehmen.
Was sollen die "space"-Divs? Durch sie habe ich Abstände zwischen den Feldern relativ zur _Darstellungsfläche_ erzeugt. Wenn ich stattdessen margin/padding mit prozentualen Angaben für die Felder verwende, stehen die Abstände im Verhältnis zu... keine Ahnung. Auf jeden nicht zur Darstellungsfläche.
Okay, schon bis hier her gefällt mir das alles nicht, aber immerhin haben sie Felder alle gewünschten Eigenschaften. Abgesehen von der Text-Zentrierung... vertical-align funktioniert natürlich nicht, alle mir bekannten Ansätze (halbe Höhe als padding; ganze Höhe als Zeilenhöhe (geht nicht, weil sich die Zeilenhöhe nicht relativ zur Darstellungsfläche angeben lässt)) funktionierten ebenso wenig.
Nun also meine Frage: Wie kriege ich den CSS-Ansatz besser gelöst (inklusive Textzentrierung) oder bin ich an dieser Stelle doch mit einer Tabelle besser beraten?