Eigenes Layout - Tabellen VS Divs
1 0
0 
Felix Riesterer
0 0 Smilies
0
Eigenes Layout - Tabellen VS Divs
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?
-
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?
Hast du die verschiedenen CSS display-Typen zur Kenntnis genommen?
Was das Markup betrifft, hast du meiner Meinung nach ein oder zwei Listen vorliegen. Leere Elemente haben im Markup nichts zu suchen.
mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
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?
Hast du die verschiedenen CSS display-Typen zur Kenntnis genommen?
Durchaus zur Kenntnis genommen, aber leider nicht alle in Gänze verstanden.
Was das Markup betrifft, hast du meiner Meinung nach ein oder zwei Listen vorliegen. Leere Elemente haben im Markup nichts zu suchen.
mfg Beat
Ich will ja auch keine leere Elemente im MarkUp haben... nur leider sehe ich keine andere Möglichkeit alle Höhen/Breiten der Abstände relativ zur Darstellungsfläche anzugeben.
-
Lieber XieLong,
Ich will ja [...]
hast Du meine Antwort überhaupt gelesen/wahrgenommen?
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)-
Lieber XieLong,
Ich will ja [...]
hast Du meine Antwort überhaupt gelesen/wahrgenommen?
Jop, hab nur von unten nach oben beantwortet :D
-
-
-
-
Lieber XieLong,
meinst Du sowas? Das geht sogar mit sinnbehaftetem Markup...
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)-
Moin Felix!
meinst Du sowas? Das geht sogar mit sinnbehaftetem Markup...
Fuer das Favicon 5 Sterne! Das hat meine Laune wirklich verbessert.
--
Vergesst Chuck Norris.
Sponge Bob kann unter Wasser grillen!-
meinst Du sowas? Das geht sogar mit sinnbehaftetem Markup...
Fuer das Favicon 5 Sterne! Das hat meine Laune wirklich verbessert.
Hast du was angestellt? :D
-
-
Lieber XieLong,
meinst Du sowas? Das geht sogar mit sinnbehaftetem Markup...
Liebe Grüße,
Felix Riesterer.
Wow, vielen Dank :)
Da funktioniert genau alles, was ich mir vorgestellt habe - und das MarkUp ist auch sinnvoll, super.
Jetzt versteh' ich auch, warum meine Ansätze alle beide nicht so ganz wollten :o
Kleine Anpassungen im CSS und schon sind die Felder genau so hoch, um den ganzen Bildschirm auszufüllen:
html, body { margin: 0; padding: 0; height:100%; } #felder { width: 100%; height:100%; list-style: none; margin: 0; padding: 0; } #felder li { display: inline-table; width: 33.33%; height: 50%; float: left; margin: 0; padding: 0; }-
Lieber XieLong,
Wow, vielen Dank :)
gern geschehen. Die Aufgabe hat mich gereizt, deswegen meine Lösung.
Jetzt versteh' ich auch, warum meine Ansätze alle beide nicht so ganz wollten :o
Na dann, sehr schön!
Kleine Anpassungen im CSS und schon sind die Felder genau so hoch, um den ganzen Bildschirm auszufüllen:
Wenn das so gewollt ist... dann gönne ich Dir das.
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)-
Irgendwie steh ich wieder auf dem Schlauch... meine Untermenüs tauchen jeweils immer im ersten Feld statt in ihrem Feld auf O.o
So wie es aussieht wird
position:absolutefür die Untermenüs in Bezug auf den Body ausgeführt - statt für das übergeordnete Listenelement (welches ich extra mitposition:relativeversehen habe. Trotzdem funktioniert das so nicht - warum? Bzw. wie funktionierts richtig?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <title>3x2-Layout</title> <style type="text/css">/*<![CDATA[*/ ~~~~~~css html, body { margin: 0; padding: 0; height:100%; } #tiles { width: 100%; height:100%; list-style: none; margin: 0; padding: 0; } #tiles li { display: inline-table; width: 33.33%; height: 50%; float: left; margin: 0; padding: 0; overflow: hidden; position: relative; top: 0px; left: 0px; } #tiles a { display: table-cell; width: 100%; height: 100%; text-align: center; text-decoration: none; color: inherit; vertical-align: middle; border: 5px solid black; background: #88ff88; } #tiles a:focus, #tiles a:hover, #tiles a:active { border: 1px solid black; background: #ff8888; } #tiles li ul { width:33.33%; height:50%; position: absolute; top: 0px; left: 0px; margin: 0px; padding: 0px; background-color:#000000; display:none; } #tiles li:focus ul, #tiles li:hover ul, #tiles li:active ul { display:block; } #tiles li ul li{ width: 50%; } ~~~~~~html /*]]>*/</style> </head> <body> <ul id="tiles"> <li><a href="#" title="Status anzeigen">[Status]</a> <ul> <li><a href="#" >Profil</a></li> <li><a href="#" >Bearbeiten</a></li> <li><a href="#" >Ausloggen</a></li> </ul> </li> <li><a href="#" title="Erstellen">Erstellen</a> <ul> <li><a href="#" >Öffentlich</a></li> <li><a href="#" >Privat</a></li> <li><a href="#" >Geschützt</a></li> <li><a href="#" >Temporär</a></li> </ul> </li> <li><a href="#" title="Anschauen">Anschauen</a> <ul> <li><a href="#" >Gallerie</a></li> <li><a href="#" >Eigene</a></li> <li><a href="#" >Gruppen</a></li> <li><a href="#" >Regeln</a></li> </ul> </li> <li><a href="#" title="Laden">Laden</a></li> <li><a href="#" title="Regeln">Forum</a></li> <li><a href="#" title="Hilfe">?</a> <ul> <li><a href="#" >Hilfe</a></li> <li><a href="#" >Projekt</a></li> <li><a href="#" >Mitarbeiter</a></li> </ul> </li> </ul> </body> </html>-
Okay, ich habs herausbekommen... das display:inline-table hat gestört.
So lautet die funktionierende CSS:
* { margin: 0px; padding: 0px; } html,body { height: 100%; } #tiles { width: 100%; height: 100%; list-style: none; } #tiles li { width: 33.33%; height: 50%; float: left; overflow: hidden; position: relative; top: 0px; left: 0px; } #tiles a { display:block; width: 100%; height: 100%; text-align: center; text-decoration: none; color: inherit; border: 5px solid black; background: #8B2404; padding:33.33% 0% 33.33% 0%; /* vertical alignment */ } #tiles a:focus, #tiles a:hover, #tiles a:active { border: 1px solid black; background: #ffffff; } #tiles li ul { width:100%; height:100%; position: absolute; top: 0px; left: 0px; background-color: #000000; display: none; } #tiles li:focus ul, #tiles li:hover ul, #tiles li:active ul { display: block; } #tiles li ul li { width: 50%; }
-
-
-
-