Home
Welcome
Besonderheiten: Text ist wenn man markiert farbig. (Nur im FireFox),
endloser Content, Layout optimiert für Firefox!
Link Link Link Link
Informationen:
Erstelle einen Account auf www.homepage-baukasten.de und stelle dein Design auf CSS um. Danach fügst du die darauffolgenden Codes ein.
In die Navibox passen maximal 9 Links!
Ihr solltet euch in CSS etwas auskennen um dieses Layout zu benutzen. Die Navigation ändert ihr bei " Text über dem Design ". Ihr könnt das CSS-Design gerne umstellen, jedoch solltet ihr euch damit auskennen und die Creditlinks müssen bleiben.
1 Icon, 1 Banner, 1 Button
Css-Codes
Text über dem Design:
<div id="Mein_Bild"></div>
<div id="CREDITS">
<a href="http://www.bling-gb.de.be/" class="navi">1</a>
<a href="http://www.shizoo-design.de/" class="navi">2</a>
<a href="http://www.bloomotion.com/" class="navi">3</a></div>
<div id="header"><img src="http://i34.tinypic.com/2uqevif.jpg"></img></div>
</div>
<div id="navibox">
<a href="http://bling-gb.de.be/" class="navi2">Navititel</a>
<a href="http://bling-gb.de.be/" class="navi2">Navititel</a>
<a href="http://bling-gb.de.be/" class="navi2">Navititel</a>
<a href="http://bling-gb.de.be/" class="navi2">Navititel</a>
<a href="http://bling-gb.de.be/" class="navi2">Navititel</a>
<a href="http://bling-gb.de.be/" class="navi2">Navititel</a>
<a href="http://bling-gb.de.be/" class="navi2">Navititel</a>
<a href="http://bling-gb.de.be/" class="navi2">Navititel</a>
<a href="http://bling-gb.de.be/" class="navi2">Navititel</a>
</div>
<div id="CREDITS">
<a href="http://www.bling-gb.de.be/" class="navi">1</a>
<a href="http://www.shizoo-design.de/" class="navi">2</a>
<a href="http://www.bloomotion.com/" class="navi">3</a></div>
<div id="header"><img src="http://i34.tinypic.com/2uqevif.jpg"></img></div>
</div>
<div id="navibox">
<a href="http://bling-gb.de.be/" class="navi2">Navititel</a>
<a href="http://bling-gb.de.be/" class="navi2">Navititel</a>
<a href="http://bling-gb.de.be/" class="navi2">Navititel</a>
<a href="http://bling-gb.de.be/" class="navi2">Navititel</a>
<a href="http://bling-gb.de.be/" class="navi2">Navititel</a>
<a href="http://bling-gb.de.be/" class="navi2">Navititel</a>
<a href="http://bling-gb.de.be/" class="navi2">Navititel</a>
<a href="http://bling-gb.de.be/" class="navi2">Navititel</a>
<a href="http://bling-gb.de.be/" class="navi2">Navititel</a>
</div>
CSS-Code ohne Style Tags:
.blinggb1{
text-transform: uppercase;
font-family: georgia, arial;
font-weight: bold;
margin-top: 3px;
font-size: 17px;
color: #939393;
margin-bottom: 6px;
margin-right: 1px;
padding-left: 10px;
line-height: 10 px;
border-left: 20px solid #d9d9d9;
letter-spacing: -1px;}
#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;}
#blinggb_content {display: none;}
#nav{display: none;}
div.header{display: none;}
h2#title{display: none;}
a:link {
font-style: italic;
color: #777777;
text-decoration: none;}
a:visited {
color: #777777;
text-decoration: none;}
a:hover {
color: #cd3c3c;}
body {
overflow-x: hidden;
background-image: url('http://i34.tinypic.com/244wufs.jpg');
}
*{ padding: 0; margin: 0; }
#Mein_Bild {
margin: 0px;
margin-top: -106px;
width: 1600px;
height:500px;
border:0px;}
#content {
position: absolute;
top:450px;
border-bottom: 40px solid #bc3f43;
background-color: #ffffff;
margin-left: 120px;
width: 537px;
color: #919191;
padding-right:14px;
padding-left:14px;
padding-top:11px;
padding-bottom:30px;
text-align: justify;
background-color: #ffffff;
font-family:georgia,arial;
font-size: 11px;
word-spacing: px;
letter-spacing: 1px;
overflow:auto;}
#CREDITS{
position: absolute;
left:91px;
top:123px;
color: #bababa;
overflow:auto;}
#header{
position: absolute;
left:120px;
top:123px;
border: 5px solid #ffffff;
overflow:auto;}
#navibox{
position: absolute;
left:570px;
top:220px;
color: #ffffff;
text-shadow: 1px 1px #b0333a;
padding-right:5px;
padding-left:5px;
padding-top:5px;
padding-bottom:5px;
width: 80px;
background-image: url('http://i36.tinypic.com/w8rxcg.jpg');
font-family:arial;
font-size: 10px;
overflow:auto;}
::-moz-selection
{
color: #ffffff;
background-color: #b4cade;
text-shadow: 1px 1px #da3f31;
}
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: georgia,arial;
font-size:18px;
font-style: italic;
font-weight: bold;
padding-bottom: 6px;
padding-left: 5px;
padding-right: 5px;
letter-spacing: 2px;
text-align:center;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
background-color: #ffffff;
margin-bottom: 4px;
color: #9d9d9d;}
A.navi:hover {
display: block;
font-family: georgia,arial;
font-size:18px;
font-style: italic;
font-weight: bold;
padding-bottom: 6px;
padding-left: 5px;
padding-right: 5px;
letter-spacing: 2px;
text-align:center;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
background-color: #dde7f5;
margin-bottom: 4px;
color: #9d9d9d;}
A.navi2:link, A.navi2:visited {
display: block;
font-family: georgia,arial;
font-size: 10px;
font-style: italic;
height: 17px;
letter-spacing: px;
margin-top: 2px;
color: #ffffff;
text-shadow: 1px 1px #b53b3f;
text-align: center;
}
A.navi2:active {
display: block;
font-family: georgia,arial;
font-size: 10px;
font-style: italic;
height: 17px;
margin-top: 2px;
color: #ffffff;
text-shadow: 1px 1px #b53b3f;
text-align: center;
}
A.navi2:hover {
display: block;
font-family: georgia,arial;
font-size: 10px;
font-style: italic;
font-weight: bold;
height: 17px;
margin-top: 2px;
color: #ffffff;
text-shadow: 1px 1px #b53b3f;
text-align: center;
}
text-transform: uppercase;
font-family: georgia, arial;
font-weight: bold;
margin-top: 3px;
font-size: 17px;
color: #939393;
margin-bottom: 6px;
margin-right: 1px;
padding-left: 10px;
line-height: 10 px;
border-left: 20px solid #d9d9d9;
letter-spacing: -1px;}
#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;}
#blinggb_content {display: none;}
#nav{display: none;}
div.header{display: none;}
h2#title{display: none;}
a:link {
font-style: italic;
color: #777777;
text-decoration: none;}
a:visited {
color: #777777;
text-decoration: none;}
a:hover {
color: #cd3c3c;}
body {
overflow-x: hidden;
background-image: url('http://i34.tinypic.com/244wufs.jpg');
}
*{ padding: 0; margin: 0; }
#Mein_Bild {
margin: 0px;
margin-top: -106px;
width: 1600px;
height:500px;
border:0px;}
#content {
position: absolute;
top:450px;
border-bottom: 40px solid #bc3f43;
background-color: #ffffff;
margin-left: 120px;
width: 537px;
color: #919191;
padding-right:14px;
padding-left:14px;
padding-top:11px;
padding-bottom:30px;
text-align: justify;
background-color: #ffffff;
font-family:georgia,arial;
font-size: 11px;
word-spacing: px;
letter-spacing: 1px;
overflow:auto;}
#CREDITS{
position: absolute;
left:91px;
top:123px;
color: #bababa;
overflow:auto;}
#header{
position: absolute;
left:120px;
top:123px;
border: 5px solid #ffffff;
overflow:auto;}
#navibox{
position: absolute;
left:570px;
top:220px;
color: #ffffff;
text-shadow: 1px 1px #b0333a;
padding-right:5px;
padding-left:5px;
padding-top:5px;
padding-bottom:5px;
width: 80px;
background-image: url('http://i36.tinypic.com/w8rxcg.jpg');
font-family:arial;
font-size: 10px;
overflow:auto;}
::-moz-selection
{
color: #ffffff;
background-color: #b4cade;
text-shadow: 1px 1px #da3f31;
}
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: georgia,arial;
font-size:18px;
font-style: italic;
font-weight: bold;
padding-bottom: 6px;
padding-left: 5px;
padding-right: 5px;
letter-spacing: 2px;
text-align:center;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
background-color: #ffffff;
margin-bottom: 4px;
color: #9d9d9d;}
A.navi:hover {
display: block;
font-family: georgia,arial;
font-size:18px;
font-style: italic;
font-weight: bold;
padding-bottom: 6px;
padding-left: 5px;
padding-right: 5px;
letter-spacing: 2px;
text-align:center;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
background-color: #dde7f5;
margin-bottom: 4px;
color: #9d9d9d;}
A.navi2:link, A.navi2:visited {
display: block;
font-family: georgia,arial;
font-size: 10px;
font-style: italic;
height: 17px;
letter-spacing: px;
margin-top: 2px;
color: #ffffff;
text-shadow: 1px 1px #b53b3f;
text-align: center;
}
A.navi2:active {
display: block;
font-family: georgia,arial;
font-size: 10px;
font-style: italic;
height: 17px;
margin-top: 2px;
color: #ffffff;
text-shadow: 1px 1px #b53b3f;
text-align: center;
}
A.navi2:hover {
display: block;
font-family: georgia,arial;
font-size: 10px;
font-style: italic;
font-weight: bold;
height: 17px;
margin-top: 2px;
color: #ffffff;
text-shadow: 1px 1px #b53b3f;
text-align: center;
}
Ueberschrift code:
(bei eigene Seiten editieren/Quelltext eingeben)
<p class="blinggb1">Deine Überschrift </p>
Deine Ueberschrift
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas feugiat consequat diam. Maecenas metus. Vivamus diam purus, cursus a, commodo non, facilisis vitae, nulla. Aenean dictum lacinia tortor. Nunc iaculis, nibh non iaculis aliquam, orci felis euismod neque, sed ornare massa mauris sed velit. Nulla pretium mi et risus. Fusce mi pede, tempor id, cursus ac, ullamcorper nec, enim. Sed tortor. Curabitur molestie. Duis velit augue, condimentum at, ultrices a, luctus ut, orci. Donec pellentesque egestas eros. Integer cursus, augue in cursus faucibus, eros pede bibendum sem, in tempus tellus justo quis ligula. Etiam eget tortor. Vestibulum rutrum, est ut placerat elementum, lectus nisl aliquam velit, tempor aliquam eros nunc nonummy metus. In eros metus, gravida a, gravida sed, lobortis id, turpis. Ut ultrices, ipsum at venenatis fringilla, sem nulla lacinia tellus, eget aliquet turpis mauris non enim. Nam turpis. Suspendisse lacinia. Curabitur ac tortor ut ipsum egestas elementum. Nunc imperdiet gravida mauris. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas feugiat consequat diam. Maecenas metus. Vivamus diam purus, cursus a, commodo non, facilisis vitae, nulla. Aenean dictum lacinia tortor. Nunc iaculis, nibh non iaculis aliquam, orci felis euismod neque, sed ornare massa mauris sed velit. Nulla pretium mi et risus. Fusce mi pede, tempor id, cursus ac, ullamcorper nec, enim. Sed tortor. Curabitur molestie. Duis velit augue, condimentum at, ultrices a, luctus ut, orci. Donec pellentesque egestas eros. Integer cursus, augue in cursus faucibus, eros pede bibendum sem, in tempus tellus justo quis ligula. Etiam eget tortor. Vestibulum rutrum, est ut placerat elementum, lectus nisl aliquam velit, tempor aliquam eros nunc nonummy metus. In eros metus, gravida a, gravida sed, lobortis id, turpis. Ut ultrices, ipsum at venenatis fringilla, sem nulla lacinia tellus, eget aliquet turpis mauris non enim. Nam turpis. Suspendisse lacinia. Curabitur ac tortor ut ipsum egestas elementum. Nunc imperdiet gravida mauris. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas feugiat consequat diam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas feugiat consequat diam. Maecenas metus. Vivamus diam purus, cursus a, commodo non, facilisis vitae, nulla. Aenean dictum lacinia tortor. Nunc iaculis, nibh non iaculis aliquam, orci felis euismod neque, sed ornare massa mauris sed velit. Nulla pretium mi et risus. Fusce mi pede, tempor id, cursus ac, ullamcorper nec, enim. Sed tortor. Curabitur molestie. Duis velit augue, condimentum at, ultrices a, luctus ut, orci. Donec pellentesque egestas eros. Integer cursus, augue in cursus faucibus, eros pede bibendum sem, in tempus tellus justo quis ligula. Etiam eget tortor. Vestibulum rutrum, est ut placerat elementum, lectus nisl aliquam velit, tempor aliquam eros nunc nonummy metus. In eros metus, gravida a, gravida sed, lobortis id, turpis. Ut ultrices, ipsum at venenatis fringilla, sem nulla lacinia tellus, eget aliquet turpis mauris non enim. Nam turpis. Suspendisse lacinia. Curabitur ac tortor ut ipsum egestas elementum. Nunc imperdiet gravida mauris. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas feugiat consequat diam. Maecenas metus. Vivamus diam purus, cursus a, commodo non, facilisis vitae, nulla. Aenean dictum lacinia tortor. Nunc iaculis, nibh non iaculis aliquam, orci felis euismod neque, sed ornare massa mauris sed velit. Nulla pretium mi et risus. Fusce mi pede, tempor id, cursus ac, ullamcorper nec, enim. Sed tortor. Curabitur molestie. Duis velit augue, condimentum at, ultrices a, luctus ut, orci. Donec pellentesque egestas eros. Integer cursus, augue in cursus faucibus, eros pede bibendum sem, in tempus tellus justo quis ligula. Etiam eget tortor. Vestibulum rutrum, est ut placerat elementum, lectus nisl aliquam velit, tempor aliquam eros nunc nonummy metus. In eros metus, gravida a, gravida sed, lobortis id, turpis. Ut ultrices, ipsum at venenatis fringilla, sem nulla lacinia tellus, eget aliquet turpis mauris non enim. Nam turpis. Suspendisse lacinia. Curabitur ac tortor ut ipsum egestas elementum. Nunc imperdiet gravida mauris. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas feugiat consequat diam.