CSS Design, ganz leicht gemacht
Alls allererstes fangen Sie mit den Hintergrund an, da es ein CSS Code ohne Style Tag ist
benutzen Sie nicht am Anfang
<style typ= "text/css"> und </style> am Ende.
Der Hintergrund
| body { |
Wichtig ist das Sie die Klamer nicht vergessen |
nach der Klammer schreiben Sie dann die CSS Codes.
Dann kommt die Hintergrund-Fabre die im CSS so geschrieben wird.
|
body {
background-color: #FFFFFF;
|
ROT: Dies ist ein Farbcode, mit den der
Computer alle Farben erkennen kann.
|
Wenn Sie eine Grafik einfügt wollen müssen Sie folgenden Code benutzen
|
body {
background-color: ;
background-image: url(BILD URL)
|
Wenn Sie eine Grafik benutzten, lassen Sie das
Feld mit den Farbcode frei, natührlich können Sie auch beides benutzen wenn Sie so einen Hintergrund wie SamNowi haben wollen. |
Wenn Sie eine Grafik einfügen wollen, so müssen Sie diesen
folgenden Code benutzen das die Grafik nicht öfters untereinander angezeigt wird.
body {
background-color: ;
background-image: url(BILD URL)
background-repeat: repeat-x;
Und am Ende müsst ihr natührlich die Klammer vom Body auch wieder
zumachen, so wie im folgenden Code würde es dann aussehen.
body {
background-color: ;
background-image: url(BILD URL)
background-repeat: repeat-x; }
Der Container
Mit ihn kann man den Seiteninhald breiter machen, die Ecken des Seiten-
inhald abrunden, ich werde euch jetzt alles hier zeigen.
|
#container {
width: 900px;
margin: auto;
overflow: hidden;
background-color: #FFFFFF;
margin-top: 210px;
border: 1px solid #000000;
}
|
ROT: Mit diesen Code können Sie die Breite des Seiteninhaldes einstellen. Ich habe die Breite auf meiner Homepage zu 900px.
ORANGE: Dies ist die Hintergrundfarbe des Seiteninhaldes, zur Zeit ist es Weiß.
GRÜN: Das ist der Rahmen des Seiteninhaldes, zur Zeit steht er auf 1 Pixel. Die Farbe der Renderung ist schwarz. |
Die Ecken des Seiteninhalds abrunden
|
#container {
width: 900px;
margin: auto;
overflow: hidden;
background-color: #FFFFFF;
margin-top: 210px;
border: 1px solid #000000;
-moz-border-radius: 8px;
-webkit-border-radius: 8px; }
|
ROT: Mit diesen Code, werden die
Ecken vom Browser Mozilla Firefox
abgerundet.
ORANGE: Mit diesen Code werden
die Ecken bei Google Chrom angezeigt.
Nachteil: Im Internet Explorer sind die Ecken nicht zusehen. |
Der Header
Der Header kann sowie als Logo verwendet werden, wie auf meiner Page.
|
#header {
position: absolute;
top: 30px;
left: 50%;
margin-left: 180px;
height: 300px;
width: 300px;}
|
Zuerst fangen Sie wieder mit einer Klasse an.
Dann kommt zunächst die Codes in Grün die
Sie zum Anpassen brauchen. |
Das Anpassen des Headers
|
#header {
position: absolute;
top: 30px;
left: 50%;
margin-left: 180px;
height: 300px;
width: 300px;}
|
ROT: Verschieben nach oben/unten
ORANGE: Verschieben nach rechts/links
Grafik Infos
BLAU: Die Höhe der Grafik einstellen
PINK: Die Breite der Grafik einstellen |
Eine Grafik einfügen
|
#header {
position: absolute;
top: 30px;
left: 50%;
margin-left: 180px;
height: 300px;
width: 300px;
background-image: url(URL);
}
|
BLAU: Sie läden ein Bild hoch, fügen die Bild URL
in den Feld zwischen den Klammern bei Background-Image ein, und dann brauchen Sie nur noch die height und width einstellen und feritg ist unser Header.
|
Seiteninhald (Content)
Im Content kannst du die Hauptschrfit, Hauptfarbe usw. einstellen.
|
#content {
margin-top: 100px;
float: left;
width: 680px;
padding: 20px;
font-size: 14px;
color: #000000;
font-family: Comic Sans MS;
border-right: 0px solid #c9c9c9;
border: 0px solid #B9B9B9;
margin-top: 0px;
}
|
BLAU: Die Breite des Textfeldes kannst
du hier einstellen.
ROT: Die Haupt Schriftgröße kannst du
da einstellen.
GOLD: Hier kannst du die Haupt
Schriftfabre einstellen.
PINK: Stelle die Haupt Schrift ein.
|
Navigation
Naviation oben
|
#nav_container {
width: 1500px;
height: 50px;
background-image: url(URL);
margin-top: -30px;
margin-left: -1px; }
#nav li {
list-style-type: none;
padding: 2px;
padding-left: 15px;
padding-right: 15px;
font-size: 1.2em;
display: block;
border-bottom: 0px solid #BC8762;
float: left;
}
#nav a {
text-decoration: none;
color: #FFFFFF;
}
#nav a:hover {
color: #FFFFFF;
}
#nav li {
list-style-type: none;
padding: 2px;
padding-left: 15px;
padding-right: 15px;
font-size: 1.2em;
display: block;
margin-top: 15px;
border-bottom: 0px solid #BC8762;
float: left;
}
|
BLAU: Die können Sie die Breite der Navigation
einstellen.
PINK: Hier können Sie die Höhe der Navigation
einstellen.
LILA: Hier können Sie die Navigation nach
oben oder nach unten verschieben.
GRÜN: Hier können Sie die Navigation nach
links oder nach rechts verschieben.
BRAUN: Mit diesen Code können Sie der
Navigation einen Rahmen geben.
GRAU: Hier mit können Sie die Schriftfarbe
der Navigation ändern
HELLGRÜN: Hier mit können Sie die
Schriftfarbe der Navigation beim
Hover Effekt einstellen.
|
Navigation unter einander
|
#nav li {
list-style-type: none;
padding: 2px;
padding-left: 15px;
padding-right: 15px;
font-size: 1.2em;
display: block;
border-bottom: 0px solid #BC8762;
float: left;
}
|
Um die Navigation unter einander zumachen
brauchen Sie diesen Code in Rot weg zumachen. |
Rechtsmenü
Da mich schon viele gefragt haben, wie ich mein Menü für "SamNowi.de.tl │
SamNowi-Designs.de.tl │ SamNowi-Award.de.tl" gemacht habe, werde ich
es Ihnen erklären wie Sie es an die Seite Ihres Seiteninhaldes macht.
Der Hauptcode für Code ohne Style Tag
|
#Rechtsmenü {
position: absolute;
left: 50%;
top: 125px;
margin-left: -495px;
width:500px;
overflow: hidden;}
|
ROT: Hier mit können Sie euer Rechtsmenü hoch und runter schieben.
BRAUN: Hier mit können Sie das Menü verschieben nach links und rechts.
|
Der Zweite Code für Text unter den Design
<div id="Rechtsmenü">
<a href="URL"><img src="BILD URL" alt="" /></a> <br />
<a href="URL"><img src="BILD URL" alt="" /></a> <br />
<a href="URL"><img src="BILD URL" alt="" /></a> </div>
So sieht der Code fertig aus
body {
background-color: ;
background-image: url(BILD URL)
background-repeat: repeat-x; }
#container {
width: 900px;
margin: auto;
overflow: hidden;
background-color: #FFFFFF;
margin-top: 210px;
border: 1px solid #000000;
-moz-border-radius: 8px;
-webkit-border-radius: 8px; }
#header {
position: absolute;
top: 30px;
left: 50%;
margin-left: 180px;
height: 300px;
width: 300px;
background-image: url(URL);
}
#content {
margin-top: 100px;
float: left;
width: 680px;
padding: 20px;
font-size: 14px;
color: #000000;
font-family: Comic Sans MS;
border-right: 0px solid #c9c9c9;
border: 0px solid #B9B9B9;
margin-top: 0px;
}
#nav_container {
width: 1500px;
height: 50px;
background-image: url(URL);
margin-top: -30px;
margin-left: -1px; }
#nav li {
list-style-type: none;
padding: 2px;
padding-left: 15px;
padding-right: 15px;
font-size: 1.2em;
display: block;
border-bottom: 0px solid #BC8762;
float: left;
}
#nav a {
text-decoration: none;
color: #FFFFFF;
}
#nav a:hover {
color: #FFFFFF;
}
#nav li {
list-style-type: none;
padding: 2px;
padding-left: 15px;
padding-right: 15px;
font-size: 1.2em;
display: block;
margin-top: 15px;
border-bottom: 0px solid #BC8762;
float: left;
}
