12x bewertet

Border Layouts

von Fr34k  |  19.04.2009 um 17:23 h
Layout
Typ: Layout
Stufe:Einfach
Hallo :)
Viele von euch fragen sich sicher, wie man es hinkriegt, dass ein Hintergrundborder nach rechts verläuft und nicht irgendwann abrupt aufhört, wenn die header.png zu Ende ist. SO WIE HIER (BEISPIEL LAYOUT) Dazu heute ein kleines Tutorial!

Es gibt zwei Möglichkeiten dies zu realisieren... Doch zunächst müsst ihr natürlich eine border.png/jpg/gif whatever haben. Dazu schneidet ihr euch einfach den Teil aus, den ihr nach rechts wiederholt haben wollt. BEISPIEL BORDER PNG

1. Möglichkeit: im Body CSS Tag
Verwendet man in seinem Layout keine weitere Hintergrundgrafik als die Border-Grafik, so kann man dies mittels CSS im body {} Bereich realisieren:

body
{
background-image: url(BORDER.png);
background-repeat: repeat-x;
background-color: #FFFFFF;
color: #666666;
font-family: 'Verdana', Tahoma, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
font-weight: normal;
text-decoration: none;
text-transform: none;
text-align: left;
}


Ganz einfach: background-image gibt die Border Grafik an und mit background-repeat: repeat-x; wird diese auf der X-Achse widerholt, sprich nach rechts. Gibt man repeat-y an, wird die Grafik nach unten wiederholt, auf der Y-Achse. Zusaätzlich kann man background-color angeben, die Farbe die sozusagen unter der Border Datei zu sehen ist.

2. Möglichkeit: Mittels einer CSS ID
Wenn man nun aber beides hat, nach unten eine Grafik und zur Seite eine Grafik, kann man das nicht in body{} unterbringen. Also erstellen wir eine CSS ID


#border
{
background-image: url(BORDER.png);
background-repeat: repeat-x;
vertical-align: top;
width: 100%;
height: 70px;
}


Wieder legen wir eine Border Grafik fest, diese wiederholt sich an der X-Achse und wird oben am DIV ausgerichtet. Zusätzlich habe ich noch width:100%; hingeschrieben, denn derdiedas DIV soll ja über die ganze Breite des Bildschirmes gehen und mit 100% Weite kann man sich sicher sein, dass dies bei jeder Bildschirmgröße passt ;) und dann halt noch eine Höhenangabe vom DIV... Im body{} Bereich kann nun ohne Probleme ein weiteres Hintergrundbild festgelegt werden.

Im HTML Code wird dies dann folgendermaßen eingebunden:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Your Title</title>
</head>

<body>

<div id="border">

<!-- Hier kommt der restliche Layout Code hin, Table oder DIV egal -->

</div>

</body>
</html>

Ich hoffe, ich konnte euch helfen und ich hoffe, dass das alles einigermaßen valid ist :P
CiAO Fr34k :)



6 Kommentare




Isa_G

Darauf werd ich auch dauernd angequatscht, gute Idee daraus ein Tut zu machen und auch die Umsetzung ist super :)
am 20.04.2009 um 10:23 Uhr


Fr34k

Nicht wahr? Ich werde das auch total oft gefragt, daher dachte ich, ich schreibs einfach mal auf Smilie
am 20.04.2009 um 11:16 Uhr


Echt Klasse! Bei mir war es immer so das ich immer nur ne Line nach rechts machen konnte. Somit geht nun auch beides xD Echt klasse!
am 24.04.2009 um 11:55 Uhr


Mauri

Coole Idee, ein Tut darüber zu schreiben Smilie
am 30.04.2009 um 00:16 Uhr


alexx <3

Also ich habs mal ausprobiert.. und ich bin bei myblog.
Aber das sieht bei mir jetzt so aus:
http://testitmyownhell.myblog.de/
also der balken ist bisschen runtergerutscht..
weißt du vielleicht woren das liegen könnte?
Hoffe du verstehst was ich meine xDD

lg.
am 05.02.2010 um 16:19 Uhr


Fr34k

Ja, das liegt daran, dass im style vom body margin nicht auf 0 gesetzt wurde... füg einfach das in dein css ein:
* { margin: 0; padding: 0; }
am 05.02.2010 um 17:41 Uhr