Home
- -Überschrift
Das ist mein 2. Layout, das ich selbst gecodet hab. (;Mir gefällt es gut; ich find den Header sehr schön.. xD
ich hab wieder ein Lay von Bling-GB genommen & es
verändert. ;D Ich hoffe, es gefällt jemandem,
& jemand nimmt es her. (:
Viel Spaß mit dem Layout; Helie. <3
Ihr könnt es hernehmen, wenn ihr wenigstens ein bisschen Ahnung vom
CSS-Design & vom Coden habt. (;
Wie bekomme ich deieses Lay ?
Text Über dem Design:
<div id="Mein_Bild"></div>
<div id="textbox">
<p class="ueberschrift">Titel</p>
<a href="http://www.particularlie.de.tl" class="navi2">Navititel</a>
<a href="http://www.particularlie.de.tl" class="navi2">Navititel</a>
<a href="http://www.particularlie.de.tl" class="navi2">Navititel</a>
<a href="http://www.particularlie.de.tl" class="navi2">Navititel</a>
<a href="http://www.particularlie.de.tl" class="navi2">Navititel</a>
<br>
<p class="ueberschrift">Titel</p>
<table id="table1" width="100%" border="0"><tbody>
<tr valign="top">
<td style="width: 50%">
<a href="http://www.particularlie.de.tl" class="navi">Navititel</a>
<a href="http://www.particularlie.de.tl" class="navi">Navititel</a>
<a href="http://www.particularlie.de.tl" class="navi">Navititel</a>
<a href="http://www.particularlie.de.tl" class="navi">Navititel</a>
<td style="width: 50%">
<a href="http://www.particularlie.de.tl" class="navi">Navititel</a>
<a href="http://www.particularlie.de.tl" class="navi">Navititel</a>
<a href="http://www.particularlie.de.tl" class="navi">Navititel</a>
<a href="http://www.particularlie.de.tl" class="navi">Navititel</a>
</td>
</tr>
</tbody></table>
<br>
<br>
<p class="ueberschrift">Titel</p>
<table id="table1" width="100%" border="0"><tbody>
<tr valign="top">
<td style="width: 50%">
<a href="http://www.particularlie.de.tl" class="navi">Navititel</a>
<a href="http://www.particularlie.de.tl" class="navi">Navititel</a>
<a href="http://www.particularlie.de.tl" class="navi">Navititel</a>
<a href="http://www.particularlie.de.tl" class="navi">Navititel</a></td>
<td style="width: 50%">
<a href="http://www.particularlie.de.tl" class="navi">Navititel</a>
<a href="http://www.particularlie.de.tl" class="navi">Navititel</a>
<a href="http://www.particularlie.de.tl" class="navi">Navititel</a>
<a href="http://www.particularlie.de.tl" class="navi">Navititel</a>
</td>
</tr>
</tbody></table>
<br><br>
<p class="ueberschrift">Credits</p>
<table id="table1" width="100%" border="0"><tbody>
<tr valign="top">
<td style="width: 50%">
<a href="http://www.particularlie.de.tl" class="navi2">Layout</a>
<td><a href="http://www.bling-gb.de.be/" class="navi2">Header</a>
</td>
</tr>
</tbody></table>
<br>
</div>
<div id="hptitel">
<p class="titel">Homepagetitel</p>
</div>
<div id="textbox">
<p class="ueberschrift">Titel</p>
<a href="http://www.particularlie.de.tl" class="navi2">Navititel</a>
<a href="http://www.particularlie.de.tl" class="navi2">Navititel</a>
<a href="http://www.particularlie.de.tl" class="navi2">Navititel</a>
<a href="http://www.particularlie.de.tl" class="navi2">Navititel</a>
<a href="http://www.particularlie.de.tl" class="navi2">Navititel</a>
<br>
<p class="ueberschrift">Titel</p>
<table id="table1" width="100%" border="0"><tbody>
<tr valign="top">
<td style="width: 50%">
<a href="http://www.particularlie.de.tl" class="navi">Navititel</a>
<a href="http://www.particularlie.de.tl" class="navi">Navititel</a>
<a href="http://www.particularlie.de.tl" class="navi">Navititel</a>
<a href="http://www.particularlie.de.tl" class="navi">Navititel</a>
<td style="width: 50%">
<a href="http://www.particularlie.de.tl" class="navi">Navititel</a>
<a href="http://www.particularlie.de.tl" class="navi">Navititel</a>
<a href="http://www.particularlie.de.tl" class="navi">Navititel</a>
<a href="http://www.particularlie.de.tl" class="navi">Navititel</a>
</td>
</tr>
</tbody></table>
<br>
<br>
<p class="ueberschrift">Titel</p>
<table id="table1" width="100%" border="0"><tbody>
<tr valign="top">
<td style="width: 50%">
<a href="http://www.particularlie.de.tl" class="navi">Navititel</a>
<a href="http://www.particularlie.de.tl" class="navi">Navititel</a>
<a href="http://www.particularlie.de.tl" class="navi">Navititel</a>
<a href="http://www.particularlie.de.tl" class="navi">Navititel</a></td>
<td style="width: 50%">
<a href="http://www.particularlie.de.tl" class="navi">Navititel</a>
<a href="http://www.particularlie.de.tl" class="navi">Navititel</a>
<a href="http://www.particularlie.de.tl" class="navi">Navititel</a>
<a href="http://www.particularlie.de.tl" class="navi">Navititel</a>
</td>
</tr>
</tbody></table>
<br><br>
<p class="ueberschrift">Credits</p>
<table id="table1" width="100%" border="0"><tbody>
<tr valign="top">
<td style="width: 50%">
<a href="http://www.particularlie.de.tl" class="navi2">Layout</a>
<td><a href="http://www.bling-gb.de.be/" class="navi2">Header</a>
</td>
</tr>
</tbody></table>
<br>
</div>
<div id="hptitel">
<p class="titel">Homepagetitel</p>
</div>
CSS-Code ohne Style Tags:
.ueberschrift{
display: block;
font-family: arial;
font-size: 9pt;
padding-left: 5px;
color: #ffffff;
-moz-border-radius: 3px;
text-shadow: 0px 0px 3px #ffe3e6;
background-image: url('http://i43.tinypic.com/2cej5fq.png');
text-decoration: bold;
text-align: left;
margin-bottom: 6px;
margin-right: 1px;
line-height: 4 px;
letter-spacing: 1px;
border-bottom: 0px solid #e5cdb6;}
.titel{
display: block;
font-family: Edwardian Script ITC;
font-size: 30pt;
padding-left: 5px;
color: #a77efc;
-moz-border-radius: 3px;
text-shadow: 0px 0px 1px #000000;
text-decoration: bold;
text-align: center;
margin-bottom: 6px;
margin-right: 1px;
line-height: 4 px;
letter-spacing: 1px;
padding-top: 6px;
border-bottom: 0px solid #e5cdb6;}
.ueberschrift2{
display: block;
font-family: arial;
font-size: 8pt;
color: #fb80a7;
text-transform: uppercase;
text-decoration: bold;
text-align: left;
margin-bottom: 6px;
margin-right: 1px;
line-height: 4 px;
letter-spacing: 0px;
border-bottom: 1px dashed #fb80a7;}
#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: #cccccc;
font-family: arial;
font-size: 11px;
text-decoration: none;}
a:visited {
font-family: arial;
font-size: 11px;
color: #cccccc;
text-decoration: none;}
a:hover {
color: #a77efc;
font-family: arial;
font-size: 11px;
border-bottom: 0px dotted #fc647d;}
body {
overflow-x: hidden;
background-image: url('http://i41.tinypic.com/15gt555.png');
}
*{ padding: 0; margin: 0; }
#Mein_Bild {
margin: 0px;
margin-top: -110px;
width: 1600px;
height:750px;
border:0px;
background-image:url(http://i49.tinypic.com/98vdyf.png);}
#content {
position: absolute;
left: 590px;
top:604px;
margin-left:-423px;
width: 520px;
padding: 15px;
color: #dfdfdf;
font-family: tahoma;
font-size: 11px;
text-align: justify;
word-spacing: px;
letter-spacing: 1px;
overflow:auto;}
#textbox{
position: absolute;
left:734px;
top:619px;
width: 148px;
background-image:url;
border:0px solid #FFFFFF;
color: #bababa;
font-family: verdana;
font-size: 11px;
word-spacing: 0px;
letter-spacing: 0px;
overflow:auto;}
#hptitel{
position: absolute;
left:574px;
top:130px;
width: 325px;
height: 60px;
background-image:url;
border:0px solid #FFFFFF;
color:#FF6633;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-align: justify;
word-spacing: 0px;
letter-spacing: 0px;
overflow:auto;}
#nav_container{
position: absolute;
top:605px;
margin-left: -0px;
high: 100px;
width: 121px;
font-family: Verdana;
border:0px solid #333333;}
::-moz-selection
{
background: #cccccc;
color: #FF6633;
}
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: 14px;
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: #8d52ee;
background-color:#434343;
background-image:url(xx);
border: px solid color:#ffffff; }
li.nav_element a:hover{
color: #af83f6;
background-color:#434343;
background-image:url(xx);}
A.navi:link, A.navi:active, A.navi:visited {
display: block;
padding-left: 2px;
padding-bottom: 3px;
font-family: arial;
font-size: 10px;
height: 10px;
margin-bottom: 2px;
border-bottom: 1px solid #FF6633;
border-left: 0px solid #ffc9d5;
border-right: 0px dotted #7C757B;
border-top: 0px dotted #7C757B;
letter-spacing: 1px;
margin-right: 3px;
color: #bababa;
background-color: #393939;
text-align: left;
margin-top: 7px;
line-height: 10px;}
A.navi:hover {
display: block;
padding-left: 2px;
padding-bottom: 3px;
font-family: arial;
font-size: 10px;
height: 10px;
margin-bottom: 2px;
border-bottom: 1px solid #FF6633;
border-left: 0px solid #ffc9d5;
border-right: 0px dotted #7C757B;
border-top: 0px dotted #7C757B;
letter-spacing: 1px;
margin-right: 3px;
color: #ffffff;
text-shadow: #ffffff 0px 0px 4px;
background-color: #393939;
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: 0px solid #FF6633;
border-left: 0px solid #DAE2E8;
border-right: 0px solid #C8CFD5;
background-color: #3e3e3e;
height: 20px;
border-top: 0px solid #DAE2E8;
color: #ffffff;
}
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: 0px solid #FF6633;
border-left: 0px solid #DAE2E8;
border-right: 0px solid #C8CFD5;
background-color: #414141;
height: 20px;
text-shadow: #ffffff 0px 0px 4px;
border-top: 0px solid #DAE2E8;
color: #ffffff;
}
display: block;
font-family: arial;
font-size: 9pt;
padding-left: 5px;
color: #ffffff;
-moz-border-radius: 3px;
text-shadow: 0px 0px 3px #ffe3e6;
background-image: url('http://i43.tinypic.com/2cej5fq.png');
text-decoration: bold;
text-align: left;
margin-bottom: 6px;
margin-right: 1px;
line-height: 4 px;
letter-spacing: 1px;
border-bottom: 0px solid #e5cdb6;}
.titel{
display: block;
font-family: Edwardian Script ITC;
font-size: 30pt;
padding-left: 5px;
color: #a77efc;
-moz-border-radius: 3px;
text-shadow: 0px 0px 1px #000000;
text-decoration: bold;
text-align: center;
margin-bottom: 6px;
margin-right: 1px;
line-height: 4 px;
letter-spacing: 1px;
padding-top: 6px;
border-bottom: 0px solid #e5cdb6;}
.ueberschrift2{
display: block;
font-family: arial;
font-size: 8pt;
color: #fb80a7;
text-transform: uppercase;
text-decoration: bold;
text-align: left;
margin-bottom: 6px;
margin-right: 1px;
line-height: 4 px;
letter-spacing: 0px;
border-bottom: 1px dashed #fb80a7;}
#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: #cccccc;
font-family: arial;
font-size: 11px;
text-decoration: none;}
a:visited {
font-family: arial;
font-size: 11px;
color: #cccccc;
text-decoration: none;}
a:hover {
color: #a77efc;
font-family: arial;
font-size: 11px;
border-bottom: 0px dotted #fc647d;}
body {
overflow-x: hidden;
background-image: url('http://i41.tinypic.com/15gt555.png');
}
*{ padding: 0; margin: 0; }
#Mein_Bild {
margin: 0px;
margin-top: -110px;
width: 1600px;
height:750px;
border:0px;
background-image:url(http://i49.tinypic.com/98vdyf.png);}
#content {
position: absolute;
left: 590px;
top:604px;
margin-left:-423px;
width: 520px;
padding: 15px;
color: #dfdfdf;
font-family: tahoma;
font-size: 11px;
text-align: justify;
word-spacing: px;
letter-spacing: 1px;
overflow:auto;}
#textbox{
position: absolute;
left:734px;
top:619px;
width: 148px;
background-image:url;
border:0px solid #FFFFFF;
color: #bababa;
font-family: verdana;
font-size: 11px;
word-spacing: 0px;
letter-spacing: 0px;
overflow:auto;}
#hptitel{
position: absolute;
left:574px;
top:130px;
width: 325px;
height: 60px;
background-image:url;
border:0px solid #FFFFFF;
color:#FF6633;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-align: justify;
word-spacing: 0px;
letter-spacing: 0px;
overflow:auto;}
#nav_container{
position: absolute;
top:605px;
margin-left: -0px;
high: 100px;
width: 121px;
font-family: Verdana;
border:0px solid #333333;}
::-moz-selection
{
background: #cccccc;
color: #FF6633;
}
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: 14px;
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: #8d52ee;
background-color:#434343;
background-image:url(xx);
border: px solid color:#ffffff; }
li.nav_element a:hover{
color: #af83f6;
background-color:#434343;
background-image:url(xx);}
A.navi:link, A.navi:active, A.navi:visited {
display: block;
padding-left: 2px;
padding-bottom: 3px;
font-family: arial;
font-size: 10px;
height: 10px;
margin-bottom: 2px;
border-bottom: 1px solid #FF6633;
border-left: 0px solid #ffc9d5;
border-right: 0px dotted #7C757B;
border-top: 0px dotted #7C757B;
letter-spacing: 1px;
margin-right: 3px;
color: #bababa;
background-color: #393939;
text-align: left;
margin-top: 7px;
line-height: 10px;}
A.navi:hover {
display: block;
padding-left: 2px;
padding-bottom: 3px;
font-family: arial;
font-size: 10px;
height: 10px;
margin-bottom: 2px;
border-bottom: 1px solid #FF6633;
border-left: 0px solid #ffc9d5;
border-right: 0px dotted #7C757B;
border-top: 0px dotted #7C757B;
letter-spacing: 1px;
margin-right: 3px;
color: #ffffff;
text-shadow: #ffffff 0px 0px 4px;
background-color: #393939;
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: 0px solid #FF6633;
border-left: 0px solid #DAE2E8;
border-right: 0px solid #C8CFD5;
background-color: #3e3e3e;
height: 20px;
border-top: 0px solid #DAE2E8;
color: #ffffff;
}
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: 0px solid #FF6633;
border-left: 0px solid #DAE2E8;
border-right: 0px solid #C8CFD5;
background-color: #414141;
height: 20px;
text-shadow: #ffffff 0px 0px 4px;
border-top: 0px solid #DAE2E8;
color: #ffffff;
}
Überschriften-Code:
(beim Quelltext eingeben.)
<p class="ueberschrift">Deine Überschrift </p>