testlayout-001

Home

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.

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.

css-Codes

Text über dem Design:

<div id="Mein_Bild"></div>

<div id="header"><img src="http://i49.tinypic.com/2hdocux.jpg"></img></div>
</div>

<div id="textbox"><p class="blinggb1">Überschrift</p>
<br />
<div style="text-align: center;"><span style="font-size: x-small;"><span style="font-family: Verdana;">Hier kommten Updates, eine Shoutbox, etwas über euch, ein Willkommenstext, oder sowas hin.<br />
<br />
Ich möchte ausdücklich betonen, dass ich das Layout nicht als meines ausgebe! Ich habe es von Bling-GB genommen, einen anderen Header (auch von Bling-GB!) genommen & etwas rumexperimentiert, aber nur ein bisschen, das wars. Ich möchte keinen Ärger haben, wenn es heisst, ich gebe Layouts als meine aus, was gar nicht stimmt, und so.. xD LG</span></span></div> <br /><br />
<br />
<p class="blinggb1">Überschrift</p>
<a class="navi3" href="http://www.bling-gb.de.be">Navititel</a>
<a class="navi3" href="http://www.bling-gb.de.be">Navititel</a>
<a class="navi3" href="http://www.bling-gb.de.be">Navititel</a>

<br />
<br />
<p class="blinggb1">Überschrift</p>
<a class="navi3" href="http://www.bling-gb.de.be">Navititel</a>
<a class="navi3" href="http://www.bling-gb.de.be">Navititel</a>
<a class="navi3" href="http://www.bling-gb.de.be">Navititel</a>

<br />
<br />
<p class="blinggb1">Link me</p>
<br />
<center><img src="http://i50.tinypic.com/11boidg.jpg"></img></center></div>

<div id="credits"><a class="navi4" href="http://www.bling-gb.de.be">Layout</a>
<a class="navi4" href="http://www.shizoo-design.de/">1</a>
<a class="navi4" href="http://www.bloomotion.com/">2</a></div>

<style type="text/css">
A:hover{cursor: default;}
</style>

<style type="text/css">

</style>

<style type="text/css">

</style>

CSS-Code ohne Style Tags:

.blinggb1{
text-transform: uppercase;
font-family: arial;
font-weight: bold;
font-size: 14px;
color: #d2d2d2;
text-align: center;
margin-bottom: 6px;
margin-right: 1px;
line-height: 20 px;
letter-spacing: 0px;}

#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 {
color: #2bbdd7;
font-family: arial;
text-decoration: none;}

a:visited {
color: #2bbdd7;
font-family: arial;
text-decoration: none;}

a:hover {
color: #a3ee5b;
font-family: arial;
border-bottom: 0px dotted #bababa;}

body {
overflow-x: hidden;
background-image: url('https://img.webme.com/pic/j/just-that/blackgestreiftkleiner.jpg')
}

*{ padding: 0; margin: 0; }

#Mein_Bild {
border:0px;
background-color: #fffff;}

#content {
position: absolute;
top:623px;
border-right: 4px solid #ffffff;
background-color: #ffffff;
margin-left:361px;
width: 480px;
color: #c2c2c2;
padding-right:5px;
padding-left:11px;
padding-top:11px;
padding-bottom:60px;
text-align: justify;
background-color: #ffffff;
font-family:arial;
font-size: 10px;
word-spacing: px;
letter-spacing: 0px;
overflow:auto;}

#credits{
position: fixed;
right:10px;
top:10px;
overflow:auto;}

#navi_weiss{
position: absolute;
left:174px;
top:204px;
color: #bababa;
overflow:auto;}

#header{
position: absolute;
left:361px;
top:223px;
overflow:auto;}

#textbox{
position: absolute;
left:174px;
top:223px;
color: #c2c2c2;
-moz-border-radius-bottomleft: 25px;
padding-right:5px;
padding-left:11px;
padding-top:20px;
padding-bottom:20px;
text-align: justify;
width: 171px;
background-color: #ffffff;
font-family:arial;
font-size: 10px;
overflow:auto;}

::-moz-selection
{
color: #a7d517;
}

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 {
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
font-family: arial;
font-size:8px;
text-transform: uppercase;
letter-spacing: 7px;
background-color: #ffffff;
text-align:center;
padding-left:10px;
padding-right:6px;
padding-bottom:10px;
padding-top:10px;
color: #84c9d6;}

A.navi:hover {
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
font-family: arial;
font-size:8px;
text-transform: uppercase;
letter-spacing: 7px;
background-color: #ffffff;
text-align:center;
padding-left:10px;
padding-bottom:10px;
padding-right:6px;
height: 30px;
padding-top:10px;
color: #a7d224;}

A.navi2:link, A.navi2:active, A.navi2:visited {
display: block;
font-family: arial;
font-size:9px;
text-transform: uppercase;
letter-spacing: 6px;
padding-top: 5px;
padding-bottom: 3px;
text-align:center;
margin-left: 4px;
margin-top: 3px;
color: #b4e056;
border-bottom: 1px solid #e3e3e3;
}

A.navi2:hover {
display: block;
font-family: arial;
font-size:9px;
text-transform: uppercase;
letter-spacing: 6px;
padding-top: 5px;
padding-bottom: 3px;
text-align:center;
margin-left: 4px;
margin-top: 3px;
color: #cdcdcd;
border-bottom: 1px solid #e3e3e3;
}

A.navi3:link, A.navi3:active, A.navi3:visited {
display: block;
font-family: arial;
font-size:9px;
text-transform: uppercase;
letter-spacing: 6px;
padding-top: 5px;
padding-bottom: 3px;
text-align:center;
margin-left: 4px;
margin-top: 3px;
color: #84c9d6;
border-bottom: 1px solid #e3e3e3;
}

A.navi3:hover {
display: block;
font-family: arial;
font-size:9px;
text-transform: uppercase;
letter-spacing: 6px;
padding-top: 5px;
padding-bottom: 3px;
text-align:center;
margin-left: 4px;
margin-top: 3px;
color: #cdcdcd;
border-bottom: 1px solid #e3e3e3;
}

A.navi4:link, A.navi4:active, A.navi4:visited {
font-family: arial;
font-size:8px;
padding-left: 9px;
padding-right: 9px;
background-color: #80d4ef;
-moz-border-radius: 25px;
text-transform: uppercase;
letter-spacing: 4px;
padding-top: 5px;
padding-bottom: 3px;
text-align:center;
margin-left: 4px;
margin-top: 3px;
color: #ffffff;
border-bottom: 1px solid #e3e3e3;
}

A.navi4:hover {
font-family: arial;
font-size:8px;
padding-left: 9px;
padding-right: 9px;
background-color: #847e7b;
-moz-border-radius: 25px;
text-transform: uppercase;
letter-spacing: 4px;
padding-top: 5px;
padding-bottom: 3px;
text-align:center;
margin-left: 4px;
margin-top: 3px;
color: #ffffff;
border-bottom: 1px solid #e3e3e3;
}

Ueberschrift code:
(bei eigene Seiten editieren/Quelltext eingeben)

<p class="blinggb1">Deine Überschrift </p>

{Bling-GB.de.be