layout-121 - Home

Home

deine ueberschrift

Besonderheiten: Textmakierung farbig (nur im firefox)
Fett Kursiv Unterstrichen Link

Layout optimiert fuer Mozilla Firefox !

Du moechtest dieses Layout ?
1. Melde dich bei Homepage-Baukasten.de an.
2. Geh auf Design einstellen.
3. Stelle dein design auf CSS-Design um.
4. Fuege die Codes in die entsprechenden felder ein
5. Abspeichern & fertig.

Da dies ein CSS-Layout ist solltest du etwas erfahrung mitbringen. Du kannst dich jedoch jeder Zeit an mich wenden wenn fragen bestehen (: Die Navi wuerde ich an eurer stelle so lassen. Ist halt ein Layout fuer kleine Seiten (:

BiTTE CREDiTLiNK SETZEN !

Layout + Coding: Glamorous-arts.de.be & Delightfularts.de.be

Extras: - Infobox.
Diese koennt ihr in die verschiedenen seiten im SeitenQuellcode einfuegen um eure regeln fuer die grafiken oder aehnliches reinzuschreiben (:

deine info // Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Text ueber dem design

<div id="navibox">
<p class="h1">Willkommen</p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
<br/>
<p class="h1">Ueberschrift</p>

<a href="http://www.delightfularts.de.be" class="navi">navititel</a>
<a href="http://www.delightfularts.de.be" class="navi">navititel</a>
<a href="http://www.delightfularts.de.be" class="navi">navititel</a>
<a href="http://www.delightfularts.de.be" class="navi">navititel</a>
<a href="http://www.delightfularts.de.be" class="navi">navititel</a>
</div>

<div id="navibox2">
<a href="http://www.glamorous-arts.de.be/" class="navi2">Home</a>
<a href="http://www.glamorous-arts.de.be/" class="navi2">About</a>
<a href="http://www.glamorous-arts.de.be/" class="navi2">Site</a>
<a href="http://www.glamorous-arts.de.be/" class="navi2">guestbook</a>
<a href="http://www.glamorous-arts.de.be/" class="navi2">Stuff</a>
<a href="http://www.glamorous-arts.de.be/" class="navi2">Exit</a>
</div>

css code ohne style tags

.h1 {
font-family: Georgia;
font-size: 14px;
font-style: italic;
font-weight:bold;
display: block;
line-height: 17px;
margin-bottom: 5px;
margin-top: 2px;
text-align: left;
letter-spacing: 1px;
padding-left: 2px;
color: #000000;
background: transparenz;
border-bottom: 1px solid #e3e3e3;
background-color: #;
padding-top: 2px;
}

#extraDiv1 {display: none;}
 #extraDiv2 {display: none;}
 #extraDiv3 {display: none;}
 #extraDiv4 {display: none;}
 #extraDiv5 {display: none;}
 #extraDiv6 {display: none;}
 #pre_header {display: none;}
 #post_header {display: none;}
 #delightful_content {display: none;}
 #nav{display: none;}
 div.header{display: none;}
 h2#title{display: none;}

a:link {
color: #8d1d2d;
background-color: #;
text-decoration: none;}

a:visited {
color: #8d1d2d;
background-color: #;
text-decoration: none;
}

a:hover {
color: #c65e6c;
background-color: #;
}

b, strong{
color:#1a1a1a;
font-weight: bold;
}

body {
overflow-x: hidden;
background-image: url('http://i52.tinypic.com/149pjr7.jpg');
}

*{ padding: 0; margin: 0; }

#Mein_Bild {
margin: 0px;
margin-top: -106px;
width: 1600px;
height:500px;
border:0px;}

#content {
position: absolute;
top:620px;
background-color: #eaeaea;
margin-left: 120px;
width: 480px;
left: 80px;
color: #4b4b4b;
text-shadow: #f2f2f2 1px 1px;
padding-right:10px;
padding-left:10px;
padding-top:25px;
padding-bottom:30px;
text-align: justify;
font-family: Calibri, arial;
font-size: 12px;
overflow:auto;}

.infobox {
padding: 7px;
-moz-border-radius: 15px;
text-shadow: 1px 1px #d5d5d5;
border: 1px solid #8c8c8c;
background-color: #c9c9c9;
text-align: left;
widht: 150px;
}

#header{
position: absolute;
left:200px;
top:153px;
border-top: 20px solid #000000;
overflow:auto;}

#navibox{
position: absolute;
left:700px;
top:153px;
color: #444444;
text-shadow: #ffffff 1px 1px;
border-top: 20px solid #000000;
padding-right:5px;
padding-left:5px;
padding-top:5px;
padding-bottom:30px;
width: 160px;
background-color: #eaeaea;
font-family:arial;
font-size:  11px;
overflow:auto;}

#navibox2{
position: absolute;
padding-left: 3px;
left:200px;
top:580px;
width: 497px;
background-color: #93676d;
overflow:auto;}

::-moz-selection
{
color: #ffffff;
background-color: #505050;
text-shadow: #000000 1px 1px;
}

ul#nav{
width: 20px;
padding: 5px;
margin: 5px;}

li.nav_element{
list-style-type: none;
position: relative;
padding:1px;
width: 100px;}

li.nav_element a{
display: block;
width: 100px;
height: 15px;
padding: -2px;
font-weight:;
text-decoration:;
text-align: justify;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
text-align: right;
word-spacing: 0px;
letter-spacing: 0px;
color: #bababa;
background-color:#272e55;
background-image:url(xx); 
border-bottom: 0px solid color:#ffffff; }

li.nav_element a:hover{
color: #ffffff;
background-color:#272e55;
background-image:url(xx);}

A.navi:link, A.navi:active, A.navi:visited {
display: block;
font-family: Verdana,arial;
font-size:12px;
letter-spacing: 1px;
padding-top: 5px;
padding-bottom: 3px;
text-align:left;
margin-left: 4px;
margin-top: 3px;
color: #9a5962;
border-bottom: 1px solid #e3e3e3;
}

A.navi:hover {
display: block;
font-family: Verdana,arial;
font-size:12px;
letter-spacing: 1px;
padding-top: 5px;
padding-bottom: 3px;
text-align:left;
margin-left: 4px;
margin-top: 3px;
color: #763740;
border-bottom: 1px solid #e3e3e3;
}

A.navi2:link, A.navi2:active, A.navi2:visited {
font-family: tahoma,arial;
font-size:10px;
text-transform: uppercase;
letter-spacing: 1px;
color: #381016;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 12px;
padding-right: 12px;
line-height: 40px;
background-color: #93676d;
text-shadow: 1px 1px #a5a5a5;}

A.navi2:hover {
font-family: tahoma,arial;
font-size:10px;
text-transform: uppercase;
letter-spacing: 1px;
color: #f0f0f0;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 12px;
padding-right: 12px;
line-height: 40px;
background-color: #713840;
text-shadow: 1px 1px #000000;}

ueberschriftencode

code infobox (im seitenquellcode einfuegen)