testlayout20

Home

Ueberschrift

Besonderheiten: Text ist wenn man markiert farbig. (Nur im FireFox),
endloser Content, Layout optimiert für Firefox

Fett Kursiv Underline ~~Durchgestrichen~~ Link

Wie kriege ich dieses Design von Bling-Gb?

Erstelle einen Account auf www.homepage-baukasten.de und stelle dein Design auf CSS um. Danach fügst du die darauffolgenden Codes ein.

Wie entferne ich die Baukastennavi?

Die Baukastennavigation ( im Moment nicht zu sehen ) kannst du " unsichtbar " stellen indem du deine Seiten versteckst. Auf www.Bling-gb.de.be ~ Tutorials ~ versteckte Seiten, zeigen wir euch wie man es macht.

Weitere Informationen:

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.

Text über dem Design:

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

<div id="textbox">

<p class="blinggb1">Navi</p>

<a href="http://www.bling-gb.de.be" class="navi2">Navititel</a>
<a href="http://www.bling-gb.de.be" class="navi2">Navititel</a>
<a href="http://www.bling-gb.de.be" class="navi2">Navititel</a>
<a href="http://www.bling-gb.de.be" class="navi2">Navititel</a>
<a href="http://www.bling-gb.de.be" class="navi2">Navititel</a>
<br>

<p class="blinggb1">Titel</p>

<div style="-moz-border-radius: 6px; padding: 7px; margin: 0px; border: 0px solid white; overflow: auto; font-family: tahoma, arial; font-size: 10px; width: 140px; background-color: rgb(234, 234, 234); color: rgb(186, 186, 186); text-align: center;">
Lies vorher bitte die <a href="http://www.bling-gb.de.be"> Regeln!</a></div>

<table id="table1" width="100%" border="0"><tbody>
<tr valign="top">
<td style="width: 50%">
<a href="http://www.bling-gb.de.be" class="navi">Navititel</a>
<a href="http://www.bling-gb.de.be" class="navi">Navititel</a>
<a href="http://www.bling-gb.de.be" class="navi">Navititel</a>
<a href="http://www.bling-gb.de.be" class="navi">Navititel</a>

<td style="width: 50%">
<a href="http://www.bling-gb.de.be" class="navi">Navititel</a>
<a href="http://www.bling-gb.de.be" class="navi">Navititel</a>
<a href="http://www.bling-gb.de.be" class="navi">Navititel</a>
<a href="http://www.bling-gb.de.be" class="navi">Navititel</a>
</td>
</tr>
</tbody></table>
<br>
<br>

<p class="blinggb1">Titel</p>

<table id="table1" width="100%" border="0"><tbody>
<tr valign="top">
<td style="width: 50%">
<a href="http://www.bling-gb.de.be" class="navi">Navititel</a>
<a href="http://www.bling-gb.de.be" class="navi">Navititel</a>
<a href="http://www.bling-gb.de.be" class="navi">Navititel</a>
<a href="http://www.bling-gb.de.be" class="navi">Navititel</a></td>

<td style="width: 50%">
<a href="http://www.bling-gb.de.be" class="navi">Navititel</a>
<a href="http://www.bling-gb.de.be" class="navi">Navititel</a>
<a href="http://www.bling-gb.de.be" class="navi">Navititel</a>
<a href="http://www.bling-gb.de.be" class="navi">Navititel</a>
</td>
</tr>
</tbody></table>
<br><br>

<p class="blinggb1">Credits</p>

<div style="-moz-border-radius: 6px; padding: 7px; margin: 0px; border: 0px solid white; overflow: auto; font-family: tahoma, arial; font-size: 10px; width: 140px; background-color: rgb(234, 234, 234); color: rgb(186, 186, 186); text-align: center;">
Mehr <a href="http://www.bling-gb.de.be"> Credits..</a></div>

<table id="table1" width="100%" border="0"><tbody>
<tr valign="top">
<td style="width: 50%">
<a href="http://www.bling-gb.de.be" class="navi2">Layout</a>

<td><a href="http://www.shizoo-design.de/" class="navi2">Brushes</a>

</td>
</tr>
</tbody></table>
<br>
</div>

<div id="cuties">

<a href="http://www.bling-gb.de.be"><img border="0" src="http://i48.tinypic.com/im8fw4.png" alt="cutie" /></a>

<a href="http://www.bling-gb.de.be"><img border="0" src="http://i48.tinypic.com/im8fw4.png" alt="cutie" /></a>

<a href="http://www.bling-gb.de.be"><img border="0" src="http://i48.tinypic.com/im8fw4.png" alt="cutie" /></a>

<a href="http://www.bling-gb.de.be"><img border="0" src="http://i48.tinypic.com/im8fw4.png" alt="cutie" /></a>

<a href="http://www.bling-gb.de.be"><img border="0" src="http://i48.tinypic.com/im8fw4.png" alt="cutie" /></a>
</div>

</div>

<div id="deineseitebox">
<p class="deineseite"><b>deineSeite.de.tl</b></p>
</div>

CSS-Code ohne Style Tags:

.deineseite{
display: block;
font-family: georgia;
font-weight: bold;
font-style: italic;
font-size: 15pt;
color: #70bcb8;
text-align: center;
padding-top: 3px;
letter-spacing: -1px;
border-bottom: 0px solid #d0d0d0;}

.blinggb1{
display: block;
font-family: georgia;
font-weight: bold;
font-style: italic;
text-shadow: 1px 1px #ffffff;
font-size: 13pt;
padding-left: 5px;
color: #70bcb8;
background-image: url('http://i48.tinypic.com/o56uq1.jpg');
-moz-border-radius: 3px;
text-decoration: bold;
text-align: left;
margin-bottom: 6px;
margin-right: 1px;
line-height: 4 px;
letter-spacing: -1px;
border-left: 6px solid #7fc8c7;
border-bottom: 1px solid #90dad9;}

#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;}
#pre_content {display: none;}
#bling-gb_content {display: none;}
div.header{display: none;}

h2#title{display: none;}
a:link {
color: #bababa;
font-family: tahoma, arial;

text-decoration: none;}

a:visited {
color: #bababa;
font-family: tahoma, arial;
text-decoration: none;}

a:hover {
color: #75ced1;
font-family: tahoma, arial;
border-bottom: 0px dotted #bababa;}

body {
overflow-x: hidden;
background-color: #ffffff;

}

*{ padding: 0; margin: 0; }

#Mein_Bild {
margin: 0px;
margin-top: -110px;
width: 978px;
height:730px;
border:0px;
background-image:url(http://i48.tinypic.com/be7cch.png);}

#content {
position: absolute;
top:583px;
margin-left:375px;
width: 407px;
padding: 8px;
color:#b6b6b6;
font-family: tahoma,arial;
font-size: 11px;
text-align: justify;
word-spacing: px;
letter-spacing: 0px;
overflow:auto;}

#textbox{
position: absolute;
left:206px;
top:582px;
-moz-border-radius: 5px;
padding: 8px;
width: 155px;
background-image:url;
border:0px solid #FFFFFF;
color: #bababa;
font-family: verdana;
font-size: 11px;
word-spacing: 0px;
letter-spacing: 0px;
overflow:auto;}

#deineseitebox{
position: absolute;
left:385px;
top:522px;
-moz-border-radius: 6px;
width: 211px;
height: 18px;
padding: 7px;
border:0px solid #FFFFFF;
color:#939393;
font-family: tahoma,arial;
font-size: 10px;
word-spacing: 0px;
letter-spacing: 1px;
overflow:auto;}

#cuties{
position: absolute;
left:670px;
top:490px;
-moz-border-radius: 6px;
width: 220px;
padding: 12px;
background-image:url;
border:0px solid #FFFFFF;
color:#939393;
font-family: tahoma,arial;
font-size: 10px;
word-spacing: 0px;
letter-spacing: 1px;
overflow:auto;}

#nav_container{
position: absolute;

top:516px;
margin-left: 50px;
high: 100px;
width: 121px;
font-family: Verdana;

border:0px solid #333333;}

::-moz-selection
{
background: #ffe8a2;
color: #afafaf;
}

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;
-moz-border-radius: 3px;
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:#ececec;
background-image:url(xx);
border-bottom: 0px solid color:#ffffff; }

li.nav_element a:hover{
color: #75ced1;
background-color:#ececec;
background-image:url(xx);}

A.navi:link, A.navi:active, A.navi:visited {
display: block;
-moz-border-radius: 3px;
padding-left: 2px;
padding-bottom: 3px;
font-family: tahoma, arial;
font-size: 11px;
height: 10px;
margin-bottom: 2px;
border-bottom: 1px solid #ffdf7c;
border-left: 0px solid #ffc9d5;
border-right: 0px dotted #7C757B;
border-top: 0px dotted #7C757B;
letter-spacing: 1px;
margin-right: 3px;
color: #bababa;
padding-top: 5px;
background-color: #ffffff;
text-align: left;
margin-top: 7px;
line-height: 10px;}

A.navi:hover {
display: block;
-moz-border-radius: 3px;
padding-left: 2px;
padding-bottom: 3px;
font-family: tahoma, arial;
font-size: 11px;
height: 10px;
margin-bottom: 2px;
border-bottom: 1px solid #9afffb;
border-left: 0px solid #ffc9d5;
border-right: 0px dotted #7C757B;
border-top: 0px dotted #7C757B;
letter-spacing: 1px;
margin-right: 3px;
color: #afafaf;
text-shadow: #ffffff 0px 0px 4px;
background-color:#ffffff;
text-align: left;
line-height: 10px;}

A.navi2:link, A.navi2:active, A.navi2:visited {
display: block;
padding-top: 7px;
padding-left: 5px;
-moz-border-radius: 3px;
font-family: Arial;
margin-left: 2px;
margin-top: 2px;
font-size: 10px;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 1px;
border-bottom: 1px solid #f2e2b3;
border-left: 0px solid #DAE2E8;
border-right: 0px solid #C8CFD5;
background-color: #fff3d1;
height: 15px;
border-top: 0px solid #DAE2E8;
color: #b6b6b6;
}

A.navi2:hover {
display: block;
padding-top: 7px;
padding-left: 5px;
-moz-border-radius: 3px;
font-family: Arial;
margin-left: 2px;
margin-top: 2px;
font-size: 10px;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 1px;
border-bottom: 1px solid #e6e6e6;
border-left: 0px solid #DAE2E8;
border-right: 0px solid #C8CFD5;
height: 15px;
background-color:#fff2cd;
border-top: 0px solid #DAE2E8;
color: #79d0da;
}

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

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

Deine Überschrift

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. 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.