Image and video hosting by TinyPic

incredible-design

Css Coden

CSS Layout coden

 
Als erstes stell ihr unter "Design umstellen" eure Design auf
"Eigenes CSS-Design" um

Bei Text über dem Design: <div id="Mein_Bild"> </div>

Bei CSS ohne Style Tags den Inhalt folgender Box:
(Erklärungen findet ihr unten)

#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;}
div.header{display: none;}
h1#title{display: none;}
h2#title{display: none;}

Fett geschriebener Text
b, strong{
color:#371598;
font-family: Verdana;}

Kursiv geschriebener
i, em{
color:#371598;
font-family: Verdana;}

Unterstrichener Text
u{
color:#371598;
font-family: Verdana;}

Markierter Text
::-moz-selection
{
background: #ffdd29;
color: #FFFFFF;
}

1 Hintergrundbild
body {
background: url(Bildadresse);
*{ padding: 0; margin: 0; } diese Einstellungen bleiben alle unverändert

2 Designbild mit der Größe 1200 x 800
#Mein_Bild {
margin: 600 auto;
width: 1200px;
height:800px;
background-image:url(Bildadresse des Designbildes);}

3 Textfeld
#content {
position: absolute;
eft: 0%;
top: 106px;
margin-left:553px;
width: 493px;
height: 616px;
padding:10px;
font-color: #000000;
font-size:13px;
background-color:#transparent;
border: 0px solid #FFFFFF;
overflow:auto;}

4 Rechte Box ( siehe unten)

#sidebar_container{
position: absolute;
left: 0%;
top: 200px;
margin-left: 366px;
width: 174px; B
height: 130px;
background-color:#transparent;
background-image:url;
border:0px solid #FFFFFF;
color:#000000;
overflow:auto;}

5 Navigation
#nav_container{
position: absolute;
left: 0%;
top:170px;
margin-left: 366px;
width: 174px;
background-color:#transparent;
border:1px solid 000000;}

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: 95px;
padding:1px;
font-weight: bold;
text-decoration: none;
text-align: left;
color:transparent;
background-color:#000000;
background-image:url(xx);
border: 0px solid transparent;
}

Aussehen des Links (Hovereffekt)
li.nav_element a:hover{
color: transparent;
background-color:000000;
background-image:url(xx);}





Erklärung
width: Breite des Objekts
height: Höhe des Objekts
margin-top: Abstand nach oben
margin-left: Abstand nach rechts
font-color/ color: Schriftfarbe
font-family: Schriftart:
font-size: Schriftgröße
letter-spacing: Abstand zwischen den einzelnen Buchstaben
word-spacing: Abstand zwischen den einzelnen Wörtern
border solid: Durchgezogener Rand
background-color: Hintergrundfarbe
background-image: Hintergrundbild
overflow: auto; : Wird scrollbar wenn es die angegebene Breite oder Höhe überschreitet


Zu "Rechte Boxen"

Falls ihr mehrere Boxen haben wollt müsst ihr einfach den normalen Code also den von #sidebar_container nehmen und eine Zahl daran hängen z.B #sidebar_container2
Damit man die Box auch sehen kann müsst ihr bei "Text über dem Design" diesen Code, mit der entsprechenden Zahl natürlich, einfügen:

<div id="sidebar_container2">Hier euren gewünschten Inhalt (Html Code!)</div>

Written by Jenny
=> Willst du auch eine kostenlose Homepage? Dann klicke hier! <=