dsfgdgfdf
So ich erkläre euch mal wie man ein CSS-Design ertsellt (Per Beispiel)
1: Text über dem Design
<div id="Design">
<div id="Header_oben"></div>
Grundeinstellungen
2: Text unter dem Design ??
Dadurch kannst du bestimmte Bilder auf dein Design "laden".
Beispiel:
<div id="Der_Name"><b> </b></div></div>
<cin class="18"> </cin>
Das Prinzip Funktiniert änlich wie ein Anker.
Es können beliebig viele Grafiken auf dein Design geladen werden.
Grundcode:
<div id="Name_der_Geladen_wird"><b> </b></div></div>
3: Der eigentliche Code:
/*Grundeinstellungen/
div.header{position:absolute;
left: 180px;
top: 160px;
color: #FFFFFF;
z-index: 1;
}
li.nav_element{list-style-type: none;}
cin.18{display:block;}
/*Header/
#Header_oben {
/*Breite des Headers/
height: 768px;
/*Höhe des Headers/
width: 1024px;
background:;
background-image:url(Header URL);
color: #000000;
/*Kann man eigentlich Standart lassen/
margin: 0px 0px 0px 0px;
padding: 0px;
float: left;
/*Positionierung des Headers:/
position:absolute;left:76px;top:35px;}
/*Merke: Stat dem Header könnt ihr auch ein kommplettes Bild benutzen. (1024 mal 768 und so Die Navigation und Content auf das Bild anpassen)/
/*Hintergrund/
body {background-image: none;}
/*Textfarbe deines Designs/
a{color:#000000; font-size: 15px; text-decoration: none;}
a:hover {color: #000000; font-size: 15px; text-decoration: none;}
a:link {color: #000000; font-size: 15px; text-decoration: none;}
a:active {color: #000000; font-size: 15px; text-decoration: none;}
a:visited {color: #000000; font-size: 15px; text-decoration: none;}
/*Navigationseinstellungen:/
/*Navigationslink/
li.nav_element a{
/*Textfarbe/
color:#000000;
display: block;
/*Abstand zum nächsten Link/
margin: 15px;
padding-left: 0px
text-decoration: none;
width: 135px;
height: 16px;
background-image:url(URL);
background-color:}
/*Hovereffekt des Navilinks/
li.nav_element a:hover{
/*Textfarbe/
color:#000000;
display: block;
/*Abstand zum nächsten Link/
margin: 5px;
padding-left: 0px
text-decoration: none;
width: 135px;
height: 16px;
background-image:url(URL);
background-color:}
* { padding: 0; margin: 0; }
/*Designeinstellungen/
#Design {
margin: 0 auto;
/*Größe und breite/
width: 1024px;
height: 768px;
}
/*Navigationsanpassung auf das Design.
(Positionierung deiner Navigation)/
#nav_container {
/*Maximale breite und Größe deiner Navigation/
width: 178px;
height: 248px;
background:;
background-image:url(URL);
color: ;
margin: 10px 10px 10px 10px;;
padding: 10px;
float: left;overflow:auto;
z-index: 2;
/*Positionierung/
position:absolute;left: 115px;top:413px;}
/*Content einstellungen: Content ist der Bereich wo der Inhalt (Text deiner Webseite steht)/
#content {
/*Höhe und breite/
height: 323px;
width: 510px;
background:;
background-image:url(URL);
color: #000000;
margin: 0px 0px 0px 0px;
padding: 10px;
display: inline;
float: left;
overflow:auto;
z-index: 5;
/*Positionierung/
position:absolute;left: 331px;top:335px;}
/*Sidebar/
#sidebar_container {
/*Größe und breite/
height: 350px;
width: 135px;
background:;
background-image:url(URL);
color:#000000 ;
margin: 0px 0px 0px 0px;
padding: 10px;
float: left;
overflow:auto;
z-index: 4;
/*Positionierung/
position:absolute;left:853px;top:430px;}
/*Countereinstellung:/
#counter{
position:absolute;
/*Wo ist der Counter ?/
left: 500px;
top: 683px;
z-index: 1;
color: #FFFFFF;
}
/Nun zurück zu den Extrabildern, die du einfügen kannst:
#Text_Den_du_oben_eingegeben_hast {
/*Größe und breite/
height: 350px;
width: 135px;
background:;
background-image:url(URL Des Bildes);
color:#000000 ;
margin: 0px 0px 0px 0px;
padding: 10px;
float: left;
overflow:auto;
z-index: 4;
/*Positionierung/
position:absolute;left:853px;top:430px;}
Du kannst so viele Extrabilder einbauen, wie du willst.
Noch anderes wichtiges:
margin, float und overflow kannst du im normalfall standart lassen
(Also wie hier)
z-index:
Ist der Z-Index auf 0, ist das Bild ganz unten.
Je höher der Z-Index ist, desto höher ist das Bild:
Beispiel:
Bild1 hat Z-Index1 und Bild2 hat Z-Index 3:
Bild2 überdeckt Bild1