XieLong: Eigenes Layout - Tabellen VS Divs

SELF-Forum

Eigenes Layout - Tabellen VS Divs

XieLong
– Informationen zu den Bewertungsregeln

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?

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Eigenes Layout - Tabellen VS Divs

    Beat Homepage des Autors
    +1 Informationen zu den Bewertungsregeln

    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
    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln

    1. Eigenes Layout - Tabellen VS Divs

      XieLong
      – Informationen zu den Bewertungsregeln

      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.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Eigenes Layout - Tabellen VS Divs

        Felix Riesterer Homepage des Autors
        – Informationen zu den Bewertungsregeln

        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:)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Eigenes Layout - Tabellen VS Divs

          XieLong
          – Informationen zu den Bewertungsregeln

          Lieber XieLong,

          Ich will ja  [...]

          hast Du meine Antwort überhaupt gelesen/wahrgenommen?

          Jop, hab nur von unten nach oben beantwortet :D

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

  2. Eigenes Layout - Tabellen VS Divs

    Felix Riesterer Homepage des Autors
    – Informationen zu den Bewertungsregeln

    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:)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Eigenes Layout - Tabellen VS Divs

      Steel
      – Informationen zu den Bewertungsregeln

      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!
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Smilies

        suit Homepage des Autors
        – Informationen zu den Bewertungsregeln

        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

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

    2. Eigenes Layout - Tabellen VS Divs

      XieLong
      – Informationen zu den Bewertungsregeln

      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;  
		}
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Eigenes Layout - Tabellen VS Divs

        Felix Riesterer Homepage des Autors
        – Informationen zu den Bewertungsregeln

        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:)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Eigenes Layout - Tabellen VS Divs

          XieLong
          – Informationen zu den Bewertungsregeln

          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:absolute für die Untermenüs in Bezug auf den Body ausgeführt - statt für das übergeordnete Listenelement (welches ich extra mit position:relative versehen 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="#" >&Ouml;ffentlich</a></li>  
					<li><a href="#" >Privat</a></li>  
					<li><a href="#" >Gesch&uuml;tzt</a></li>  
					<li><a href="#" >Tempor&auml;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>
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Eigenes Layout - Tabellen VS Divs

            XieLong
            – Informationen zu den Bewertungsregeln

            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%;  
}
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln