Einzelnen Beitrag anzeigen
  #4 (permalink)  
Alt 21.04.2009, 09:59
andir andir ist offline
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.042
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Hatte gerade ein bisschen Zeit. Alle Infos sind im Text enthalten. Getestet mit IE 6 und FF 3.x

HTML-Code:
<!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" xml:lang="de" lang="de">

<head>
    <title>Ohne Tabellen gehts auch</title>

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />

<style type="text/css">

* {
    margin: 0;
    padding: 0;
}



#seite {
	position:relative;
	text-align: center;
	width: 754px;
	margin: 0 auto;

	height:auto !important; /* moderne Browser */
	height:100%; /* IE */
	border: 1px ridge silver;
	}

#title{
	width: 754px;
	height:146px;
	text-align: center;
	background: #000 url(../bilder/title.gif);
	background-repeat:no-repeat;
	background-position:center;
	border-bottom: 0px solid silver;
	color: white;
	}

#navi{
	width:754px;
	height:1.8em;
	list-style-type: none;
	background: #aaa;
	}
	#navi li {
     float: left;
     width: 150px;
     color: white;
     font-weight: bold;
     background-color: #abc;
     margin: 0 0.5em 0 0.5em;
     line-height: 1.8em;
 }
 #navi li a {
     color: white;
     display: block;
     width: 100%;
     background-color: #abc;
 }
 #navi li a:hover {
     color: white;
     background-color: black;
 }


#inhalt{
  	width: 754px;	/* 430*/
	height: 366px;
	text-align: left;
	color: #000;
	overflow: auto;
	border-top: 0px solid silver;
	border-bottom: 1px solid silver;
	}

#footer{
	width:754px;
	height:30px;
	text-align: center;
	color: #fff;
	background-color: #000;
	}
	.testbild {
     margin: 1em;
     padding: 1em;
     border: 1px solid #ccc;
     float: right;
 }
 #inhalt p, #inhalt ul {
     margin: 2em 250px 1em 1em;

 }
 em {
     font-weight: bold;
     font-style: italic;
 }
</style>
</head>
<body>
<div id="seite">
<div id="title">Ohne Tabellen gehts auch (Mein Beispiel)</div>
<ul id="navi"><li><a href="#">Eins</a></li><li><a href="#">Zwei</a></li><li><a href="#">Drei</a></li><li><a href="#">Vier</a></li></ul>
<div id="inhalt">
  <img class="testbild" src="cambria.gif" alt="testbild" title="testbild" />
 			<p>Dies ist eine Lösung mit einem rechts floatierenden Bild, die float-Eigenschaft ist wesentlich beim Layouten mit CSS, also <a href="http://jendryschik.de/wsdev/einfuehrung/">informieren</a>. Sofern das Bild nur als Dekoration dient, kann es auch als Hintergrundbild von #inhalt eingebunden werden, mehr zur Hintergrundpositionierung: http://www.css4you.de. Hier noch ein neuer Test mit einer Liste (square)</p>
 <ul style="list-style-type:square;">
 <li>Date 1</li>
 <li>Date 2</li>
</ul>

<p> Alle Texte (Absätze) sind über #inhalt p mit einem rechten margin von 250px ausgestattet (abhängig von der Bildbreite), so dass der Eindruck von zwei Spalten entsteht. Dieser margin muss für alle Elemente angegeben werden, die visuell neben dem Bild liegen sollen, z.B. für Listen, Zitate und so weiter, siehe Quelltext. Elemente <em>innerhalb</em> von p brauchen diesen großen margin natürlich nicht, da p bereits diesen margin hat. Der große margin muss auch bei der Verwendung eines Hintergrundbildes anstelle des gefloateten Bildes angegeben werden.</p>

<p>Schwierige Sache: Die grundlegenden Layout-Container sollten, <em>wenn vermeidbar</em>, niemals eigene paddings oder margins erhalten. Die visuelle Steuerung man besser dadurch lösen, dass man den Elementen <em>innerhalb</em> dieser Container entsprechende paddings oder margins mitgibt. So kann man hässliche Browserunterschiede vermeiden bzw. minimieren. Deshalb auch der globale CSS-Reset am Anfang der Styles. Wenn Du des Englischen mächtig bist, hier weitere <a href="http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/"> Info</a>.</p>

<p>Verwende eine <a href="http://de.selfhtml.org/html/allgemein/grundgeruest.htm">Dokumenttyp-Deklaration</a>, das erleichtert die Arbeit ungemein und die Browser müssen nicht rumraten was sie wie interpretieren sollen. Hier kommt XHTML 1.0 Transitional, vor, strict geht auch. Fehlt eine solche, können sich scheinbar unerklärliche Unterschiede in der Darstellung zwischen verschiedenen Browsern, bzw. Browsergenerationen ergeben. Im Übrigen ist die Forum-FaQ sehr hilfreich.</p>
  <p>Und nun viel Spass.</p>

</div>

<div id="footer">
</div>
</div>

</body>
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte

Geändert von andir (22.04.2009 um 09:43 Uhr)
Mit Zitat antworten