am 13.01.2008 um 09:35 Uhr
Grafiken Flash HTML & CSS PHP & MySQL Javascript Fertige Skripte Anderes Statistik
|
|
Anzeigen
|
4x bewertet
Faux Columns
von
sjBlack |
13.01.2008 um 04:42 h
Typ: CSS Anwendungen
Stufe:Einfach
Stufe:Einfach
Also, Leute.
Diese Methode ist schon etwas bekannt.
Der originale Autor ist Dan Caderholm.
Aber es soll ja keiner gezwungen sein, das Tutorial
in Originafassung auf Englisch zu lesen und
vorallem länger erklärt als es braucht.
Was erreicht werden soll:
Ein Layout mit Menü-div links und einem container-div
rechts. Beide sollen von der obersten Kante der
kompletten Markupanzeige bis zur untersten reichen
und das ganze OHNE Tabellen und in xhtml 1.0 strict!
Vorschau
Mission erreicht.
Bewerkstelligt wurde das durch ein bisschen böses Geschummel.
Dem Wurzelelement html wurde eine Hintergrundgrafik
zugewiesen, die sich nur vertikal verteilt und absolut
positioniert ist. x-Koordinate entscheidet halt,
wie weit von der äußersten Kante links das Menü steht.
Und ja: Diese Hintergrundfarbe gehört zum html-Element
und ist nicht die Hintergrundfarbe des Menü-divs.
Das Menü-div ist transparent! Das Menü-div ist an der
selben x-Koordinate platziert wie die Hintergrundgrafik
vom Wurzelelement html.
Genauso ist die Hintergrundgrafik des container-divs
nicht wirklich seine Grafik, sondern die des body-
Elementes
Welche sich ebenfall nur vertikal
nachbaut und an der selben x-Koordinate positioniert
ist wie dascontainer-div.
Etwas dreckig? ja, aber effektiv.
Der größte Vorteil ist, da css anständigerweise
extern eingebunden wird, das Grundgerüst des Layouts
absolut kurz ist und den traffic des servers drastisch kürzt.
mfg
Diese Methode ist schon etwas bekannt.
Der originale Autor ist Dan Caderholm.
Aber es soll ja keiner gezwungen sein, das Tutorial
in Originafassung auf Englisch zu lesen und
vorallem länger erklärt als es braucht.
Was erreicht werden soll:
Ein Layout mit Menü-div links und einem container-div
rechts. Beide sollen von der obersten Kante der
kompletten Markupanzeige bis zur untersten reichen
und das ganze OHNE Tabellen und in xhtml 1.0 strict!
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="robots" content="no-index, no-follow, no-cache" />
<meta name="autor" content="sjBlack" />
<meta name="description" content="css Faux Columns" />
<style type="text/css">
/* universal-Prolog */
*
{
margin: 0;
border: 0;
}
html
{
background: url(bg.png) repeat-y 100px 10px;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
body
{
background: url(bg_content.png) repeat-y 350px 0;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font: 11px verdana, arial, "courier new";
color: #DDD;
}
div.menu
{
background: #000;
padding: 5px;
position: absolute;
left: 115px;
top: 50px;
}
div.menu p
{
margin: 0 0 20px;
}
div.menu a:link, div.menu a:active, div.menu a:visited
{
text-decoration: none;
color: #DDD;
}
div.menu a:hover
{
color: #FFF;
}
div.content
{
background: #000;
padding: 5px;
width: 450px;
position: absolute;
left: 370px;
top: 50px;
}
</style>
<title>FAUX COLUMNS</title>
</head>
<body>
<div class="menu">
<p>
:: [ Suchmaschinen ] ::..<br />
<a href="http://www.google.de/">Ab zu Google!</a>
</p>
<p>
:: [ Lustiges ] ::..<br />
<a href="http://www.isnichwahr.de/">Ab zu isnichwahr!</a>
</p>
</div>
<div class="content">
Hallo, ich bin Inhalt!
</div>
</body>
</html>
Vorschau
Mission erreicht.
Bewerkstelligt wurde das durch ein bisschen böses Geschummel.
Dem Wurzelelement html wurde eine Hintergrundgrafik
zugewiesen, die sich nur vertikal verteilt und absolut
positioniert ist. x-Koordinate entscheidet halt,
wie weit von der äußersten Kante links das Menü steht.
Und ja: Diese Hintergrundfarbe gehört zum html-Element
und ist nicht die Hintergrundfarbe des Menü-divs.
Das Menü-div ist transparent! Das Menü-div ist an der
selben x-Koordinate platziert wie die Hintergrundgrafik
vom Wurzelelement html.
Genauso ist die Hintergrundgrafik des container-divs
nicht wirklich seine Grafik, sondern die des body-
Elementes
Welche sich ebenfall nur vertikal
nachbaut und an der selben x-Koordinate positioniert
ist wie dascontainer-div.
Etwas dreckig? ja, aber effektiv.
Der größte Vorteil ist, da css anständigerweise
extern eingebunden wird, das Grundgerüst des Layouts
absolut kurz ist und den traffic des servers drastisch kürzt.
mfg
6 Kommentare
6/6 Punkten hammer Tut und gut erklärt ^^
DiabolicHerz
Wäre einfacher zu lesen, wenn du die Zeilenumbrüche der Seite überlassen würdest und deine Zeilen nicht in der Mitte der Seite aufhören würden...
am 13.01.2008 um 14:34 Uhr
Danke fürs Feedback.
am 13.01.2008 um 15:54 Uhr
so sieht es aber irgendwie ordentlicher aus ^^
am 13.01.2008 um 16:35 Uhr
Ne. Ich hab einfach drauf los gepostet.
Ich überarbeite das ganze, wenn euer
code-bbcode irgendwann mal richtig fuunktioniert.
Ich überarbeite das ganze, wenn euer
code-bbcode irgendwann mal richtig fuunktioniert.
am 14.01.2008 um 15:00 Uhr
Miss_Jennii
Vorschau geht nicht O:
am 07.03.2010 um 15:36 Uhr