In diesem tutorial geht es darum, den schatten, den viele Seiten haben selbst einzubinden, undzwar so, das man so viel reinschreiben kann wie man will, sich aber nichts ändert.
Hier erstmal ein beispiel(meine seite :D): klick mich!
Was man braucht, um den Code zu verstehen:
-HTML
-CSS
was man braucht, um ihn anzuwenden:
-NICHTS
Zuerst legen wir in eine Datei "grundgerüst.html" an, auf der dann später alle seiten aufbauen.
diese ist wie folgt augebaut:
<html>
<head>
<link href="sytles.css" rel="stylesheet" type="text/css" />
<!-- ##### HIER EURE HEADERINFOS ##### !>
</head>
<body>
<div id="maincontainer">
<!-- ##### HIER KÖNNT IHR DANN EUREN HEADER UND WEITERES EINFÜGEN ###### !>
<div id="content">
<!-- ## Container für den schatten ## !>
<div id="header2">
</div>
<div id="contenttext">
<!-- ## Hier kommt dan nur der Inhalts-text rein ## !>
</div>
<div id="footer">
<!-- ## HIER KOMMT EUER FOOTER, COPYRIGHT ETC ## !>
</div>
</div>
</div>
</body>
</html>
Oben seht ihr die zeile
<link href="sytles.css" rel="stylesheet" type="text/css" />
in die datei "styles.css" kommt dann unsere formatierung.
Das layout hier ist für eine breite von 800 Pixeln ausgelegt.
jetzt kommt die datei "styles.css" dran:
div#maincontainer {
margin-left: -450px;
left: 50%;
position: absolute;
height: auto !important;
height: 100%;
top: 0px;
}
// die ganze seite wird somit mittig
div#header2 {
width:822px; height:30px;
background: url(header2_bg.png) no-repeat;
color: #000000;
}
// der seitenanfang
div#content {
width:822px;
background: url(content_bg.png) repeat-y;
margin-top: 27px;
}
div#contenttext {
padding-left: 15px;
width:792px;
}
div#footer {
width:822px; height:50px;
background: url(footer_bg.png) no-repeat;
font-size:0.8em;
text-decoration: overline;
}
So weit so gut.
Nun gab es da folgende zeilen:
background: url(header2_bg.png) no-repeat;
und
background: url(content_bg.png) repeat-y;
und
background: url(footer_bg.png) no-repeat;
nun also zu den bildern
1.:
-"header2_bg.png"
Ihr macht zuerst ein leeres bild (am besten mit GIMP etc.)
mit den höhen und breiten: 822x30
darein kommt dann eine box mti gerundeten ecken.
Diese box ist 802 pixel weit(800frei, 2für den rand)
das untere ende der Box schneidet ihr ab.
dann sollte das ganze bild mit dem runden ecken obern und den geraden links und rechts sein.
Ist das so geschehen, sollte links und rechts von der box 10 Pixel abstand sein.
In diese 10pixel macht ihr NEBEN die Geraden einen Farbverlauf von schrwaz nach Weiss.
Nichts auf die Ecken!
den übertragt ihr auf die andere seite und nun kommt die schwierigkeit:
Ihr müsst nun die innere farbe um die ecke malen, hier ein beispiel
[Blockierte Grafik: http://thememania.bplaced.net/imgpreview/tut1.png]
Wenn das getan ist, dann mird das ebenfalls auf die andere seite übertragen. Das fertige Bild sollte dann ungefähr so aussehen:
[Blockierte Grafik: http://www.thememania.net/de/header2_bg.png]
und damit das ganze also mit "content_bg.png" übereinstimmt, kopieren wir den teil unter den ecken unf ügen ihn in ein neuse bild "content_bg.png" ein:
[Blockierte Grafik: http://www.thememania.net/de/content_bg.png]
und zu schluss öffnen wir wieder "header2_bg.png", spiegeln es und speichern es als "footer_bg.png" ab:
[Blockierte Grafik: http://www.thememania.net/de/footer_bg.png]
Jetzt müssen die dateien nurnoch mit styles.css in einem verzeichniss liegen.
Euren inhalt schreibt ihr in den DIV-Container "contenttext"
Und ihr werdet sehen:
Egal wie viel ihr auch schreibt, die seite bleibt flexibel.
VIEL SPASS!