CSS
CSS-ohne style-tagsFolge einfach der Textstrucktur ; ).
Im Webside Kopf (1. <head>KOPFDATEN<head/> ) Steht der Tietel der Website(2.), meta-Tags und in diesem Fall auch das CSS-Design(3.):
1. <head> 2. <title>Tietel der Seite</title> 3. <style type="text/css">
Die CSS-Daten werden immer in das Darauf folgende Kommentar(1.) geschrieben und dadurch nicht angezeigt: 1. <!-- Das folgende sind die Unnötigen Klassen:
#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;}
#nav_heading{display: none;}
div.header{display: none;}
h1#title{display: none;}
h2#title span {display: none;}
Das folgende sind die Schrift- und Link-formatierungen:
a{
color:#4A9AF6;
text-decoration: none;
font-size:13px;}
a:hover {
color: #4A9AF6;
font-size: 13px;
text-decoration: none;}
a:link {
color: #4A9AF6;
font-size: 13px;
text-decoration: none;}
a:active {
color: #4A9AF6;
font-size: 13px;
text-decoration: none;}
a:visited {
color: #000000;
font-size: 13px;
text-decoration: none;}
Hier siehst du die Hintergrundfarbe und das Hintergrundbild:
body {
background-color:#000000;}
*{ padding: 0; margin: 0; }
#Picture {
margin: 0 auto;
width: 1020px;
height:575px;background-image:url(http://weare4you.de.tl/home.htm);}
Jetzt kommt das Textfeld: #content {
position: absolute; left: 50%; top: 140px; margin-left:-385px; width: 875px; height: 440px; padding:10px; color: #F2F2F2; font-size:13px; background-color:#343434; background-image:url(http://www.juegomania.org/Metin+2/fotos/pc/11/11933/Foto+Metin+2.jpg); border: 1px solid #FFFFFF; overflow:auto;}
Das ist die Navigation:
#nav_container{
position: absolute;
left: 50%;
top:140px;
margin-left: -490px;
width: 160px;
height:315px;
border:1px solid #FFFFFF;
overflow:auto;}
ul#nav{
width: 130px;
padding: 0px;
margin: 0px;}
li.nav_element{
list-style-type: none;
position: relative;
padding:5px;
width: 115px;}
li.nav_element a{
display: block;
width: 115px;
padding:4px;
font-weight: bold;
text-decoration: none;
text-align: left;
color:#F2F2F2;
background-color:#343434;
background-image:url(http://www.tentonhammer.com/system/files/images/Metin+2+-+Skill+1.preview.jpg);
border: 2px solid #000000;}
li.nav_element a:hover{
color: #000000;
background-color:#C9C9C9;
background-image:url(http://www.morbid-esports.de/attachments/Image/Metin2/metin2-1.jpg);}
//-->1. </style>
</head>
<body id="hpb_cssonly">
<style type="text/css">
#ad-eccb br {
display: none;
}
</style> <table height="102" id="ad-eccb"> <tr> <td height="102"> <iframe src="http://xphpbb.com/zeugs/ads/adserver.php?c=2" frameborder="0" width="728" height="90" scrolling="no"></iframe></td> </tr> </table> <div id="Mein_Bild"></div>
Unnötige Klassen:
| Linkformatierung: |
|---|
| Erläuterung: a = Link a:hover = wenn die Maus auf den Link fährt a:link = noch nicht besuchter Link a:active = gerade angeklickter Link a:visited = bereits besuchte Seiten |
| Header: Wenn du keinen Header benötigst füge das folgene noch bei "Unnötige Klassen" (siehe oben!) bei: #header_container{display:none;} Erläuterung: - margin-left: = Abstand des Headers vom linken Rand - width: = Breite des Headers - height: = Hh00650020des Headers - background-color = Hintergrundfarbe Header - background-image: none; = Hintergrundbild (URL) in Klammer einfügen. - color:#000000; = Textfarbe im Header, wenn Text hinein soll - font-size:13px; = Textgröße in Pixeln - border: 1px solid #FFFFFF = Rahmen / Rahmendicke in PIxeln / Rahmenfarbe |
| Textfeld |
|---|
| Erläuterung: - top: = Abstand Textfeld von oben - margin-left: = Abstand Textfeld vom linken Bildschirmrand - padding:10px; = Inhalt 10 Pixel Abstand zum Seiteninneren - width: = Breite des Textfelds in Pixeln - height: = Höhe Textfelds in Pixeln - background-color = Hintergrundfarbe Textfeld - background-image: none; = Hintergrundbild (URL) in Klammer einfügen. - color:#000000; = Textfarbe im Textfeld - font-size:13px; = Textgröße in Pixeln - border: 1px solid #C9C9C9 = Rahmen / Rahmen- stärke,-dicke / Rahmenfarbe - overflow:auto;} = erzeugt ein scrollbares Textfeld, statt auto geht auch no (wenn der Text größer als das Textfeld ist sieht man ihn nicht mehr) oder yes (man kann immer scrollen). Bei background-color: kannst Du statt Farbe auch transparent eingeben damit das Hintergrundbild zu sehen ist! |
| rechte Navigation oder auch Box genannt |
|---|
| Wenn du keine rechte box benötigst lass den Code weg oder füg das oben bei Unnötige Klassen ein: #sidebar_container{display:none;} Erläuterung: - top: = Abstand der Box von oben - margin-left: = Abstand Box vom linken Rand - width: = Breite der Box - height: = Höhe - background-color = Hintergrundfarbe - background-image: none; = Hintergrundbild (URL) in Klammer eingeben. - color:#000000; = Textfarbe - font-size:13px; = Textgröße - border: 1px solid #C9C9C9 = Rahmen / Rahmenstärke / Rahmenfarbe - overflow:auto;} = erzeugt ein scrollbares Feld, statt auto auch no oder yes möglich! |
| Die Navigation |
|---|
| Das Navigationsfeld platzierst Du mit den Werten top und margin-left. Die "Navi-Buttons" kannst Du anpassen bei: - #li.nav_element a - und bei #li.nav_element a:hover - hover = Wenn die Maus über den Button fährt - Eigene Button einfügen bei "background-image:url(HIER Button-URL);" |
Ich würde aber trotzdem epfehlen nur wenige sachen mit dieser methode zu Designen.
Am besten ist es wenn ma es mit richtigen Style-Sheets Kombiniert!