Gegen Bilderklau - Das Original | Druckvorschau: Css

Gegen Bilderklau - Das Original (https://www.gegen-bilderklau.net/index.php)
- Design, Website, Copyright (https://www.gegen-bilderklau.net/board.php?boardid=80)
--- Homepagehilfe (https://www.gegen-bilderklau.net/board.php?boardid=27)
---- Tutorials und FAQ (https://www.gegen-bilderklau.net/board.php?boardid=45)
----- [CSS] Css (https://www.gegen-bilderklau.net/thread.php?threadid=5737)

Geschrieben von Katja am 21.03.2005 um 12:20:

Css

Tutorial CSS
Falls ihr einen Fehler findet, einfach posten, ich hab das gerade in einem durch geschrieben. Kann gut sein, dass ich was Wichtiges vergessen habe, oder dass ihr da überhaupt nicht durchblickt Augenzwinkern

einfach was sagen ^^

Also ich hab mich mal entschlossen einen kleinen Tutoriel für CSS zu machen.

Ich empfehle euch die Testversion von Top Style runterzuladen, ist aber nicht zwingend notwendig!
http://www.bradsoft.com/download/index.asp

erstens
Wo baut man CSS ein?

Ganz wichtig in den <head> Bereich
also:

<html>
<head>
<title></title>
Also hier
</head>
<body>

</body>
</html>

Wie baut man es ein?

<style type="text/css">
der css style
</style>

also sähe das ganze etwa so aus:

<html>
<head>
<title></title>
<style type="text/css">
der css style
</style>
</head>
<body>
</body>
</html>

Aber ihr stimmt mir sicher zu, wenn ich sage, dass das viel zu unübersichtlich werden kann, wenn man dann da oben im headbereich einen ellenlangen style drinhat.
Deshalb erstellt eine neue Datei, tut dort euren style rein und speichert es zum Beispiel als style.css ab.
Dann müsst ihr nur einen verweis in den headbereich machen, und das sieht dann so aus:

<html>
<head>
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>

so und jetzt zum CSS selber...

Was ist das überhaupt?
In CSS kannst du Schriftgröße, farbe, hintergrund und alles deffinieren, das erspart es dir, es in der Page selber machen, das macht deinen html code um einiges übersichtlicher und ist zu dem valid.

Was bringt mir das?
Stellen wir uns mal vor, du willst deine Homepage umkrempeln, andere schriftart, farbe etc. und was musst du jetzt machen. Es auf jeder einzelnen Seite ändern... ätzend, was?
Wenn du jedoch CSS auf jeder Seite verwendet hast, also die CSS datei, so wie ich es euch empfehle (mit dem verweis im headbereich) müsst ihr nur diese eine Datei ändern. Viel praktischer oder? ^^

Also fangen wir an mit dem wichtigsten.
so könnte eine css datei aussehen (das in den sternchen(*/) ist nur ein kommentar für euch, wenn ihr das kopiert, könnt ihr das entfernen!):

BODY {
color: #E3E1E1; /* deffiniert die textfarbe*/
text-align : center; /* deffiniert die 'textposition'*/
background-image: url(bg.jpg); /* Hintergrundbild*/
font-size:7pt ; /* schriftgröße*/
background-attachment: fixed; /* das der hintergrund fixiert ist, man kann hier auch scroll einsetzen*/
background-position:0px 0px; /* oder auch center, left, right, top, bottom*/
background-color: #000000; /* hintergrundfarbe*/
scrollbar-3dlight-color: #000000;
scrollbar-arrow-color: #ffffff;
scrollbar-darkshadow-color: #000000;
scrollbar-face-color: #000000;
scrollbar-highlight-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-track-color: #000000;
}

das wäre das wichtigste, vieleicht werde ich später noch ein paar sachen hinzufügen, wie links oder ähnliches, aber zuerst einmal reicht das.

ihr könnt euch ja noch bei selfhtml umschauen ^^
http://aktuell.de.selfhtml.org/

Geschrieben von *Sunny* am 27.03.2005 um 16:09:

wie macht man diesen Verweiß?

Geschrieben von Delilah am 27.03.2005 um 17:44:

Zitat:

Original von *Sunny*
wie macht man diesen Verweiß?

Hat sie doch geschrieben:

code:
1:	<link rel="stylesheet" href="style.css">

Dann legst du in demselben Verzeichnis eine Datei namens 'style.css' an, fertig.

Geschrieben von *Sunny* am 27.03.2005 um 21:01:

Zitat:

Original von Delilah

Zitat:

Original von *Sunny*
wie macht man diesen Verweiß?

Hat sie doch geschrieben:

code:
1:	<link rel="stylesheet" href="style.css">

Dann legst du in demselben Verzeichnis eine Datei namens 'style.css' an, fertig.

ohhh man, bin ich blöd... danke!

Geschrieben von loona12 am 28.03.2005 um 20:33:

Ist ja cool... also baue ich diesen CSS code einfach auf der ersten Seite ein und schon kann man bei enem Design wechsel alles umändern... cooooool... ABER (wie immer) auf welche seite baue ich den Code ein, auf der seite wo mein Designcode ist? Oder auf der ersten seite, also die hauptseite...

Geschrieben von Waunca am 28.03.2005 um 21:51:

Auf jeder, wo das Design angezeigt werden soll.

Geschrieben von loona12 am 29.03.2005 um 19:05:

okay, dann auf jeder großes Grinsen

weil schließlich sollen doch alle seiten im Main erscheinen^^ oder hab ich da jetzt was falsch verstanden?

Geschrieben von Waunca am 29.03.2005 um 19:33:

Wenn du mit Frames arbeitest, ja.

Geschrieben von loona12 am 29.03.2005 um 20:35:

okay danke, bist nen schatz +knuddelz+

Geschrieben von Fjosi am 21.04.2005 um 10:31:

Es ist ganz okay erklärt ich weiß nicht ob ichs mich damals damit ausgekannt hätte aber ich denk schon :-)
Nur ein Tipp würd noch Linkeffekte in deinen css code tun! Is find ich das lustigste an dem ganzem weils da ja unzählige schöne gibt!

Geschrieben von Sabi am 24.04.2005 um 19:22:

@looan: du musst das eben nicht auf jeder einzelnen Seite ändern *lol*
du fügst einfach <link rel="stylesheet" href="style.css"> das auf jeder Seite deiner Page ein. Dann musst du noch eine eigene CSS-Seite anlegen. die sollte so aussehen:

A:link { color: *Linkfarbenormal* ; text-decoration: *z.B. unterstrichen*; }

A:visited { color: *Linkfarbe besucht* ; text-decoration: none; }

A:hover { color: *Linkfarbe beim drüberfahren* ; text-decoration: none; }

A:active { color: *Linkfarbe beim draufklicken*; text-decoration: none; }

body {
background-color= ;
font-color= black;
font-family= Calligraph421 BT;
font-size= 12pt;
text-align : center;
background-attachment: fixed;

scrollbar-face-color: #73F969;

scrollbar-highlight-color: #9B480B;

scrollbar-3dlight-color: #73F969;

scrollbar-darkshadow-color: black;

scrollbar-shadow-color: #73F969;

scrollbar-arrow-color: black;

scrollbar-track-color: #73F969; }

den Rest außer Links hatte Katja ja schon erklärt. Die Datie schaut dann also so aus und du speicherst sie einfach nur noch als style.css ab. Damit hat sichs und bei einem designwechsel kanns du in dieser CSS Datei dann alles ändern Augenzwinkern

Im übrigen kann auch ich Selfhtml (den Link, den Katja angegeben hat) nur empfehlen, da stehen alle Eigenschaften von CSS drin udn eigentlich auch sehr verständlich. Ist zwar etwas lesearbeit, aber durchaus praktisch, so kann man mit CSS nicht nur Links, sondern auch Tabellen, Boxen, Rahmen etc bearbeiten, was vor allem bei vielen VRHs ja relativ praktisch ist!

Geschrieben von sunny10 am 16.08.2005 um 13:33:

Hilfreicher Thread, dankeschön! LG, Sunny

Geschrieben von Leila am 28.06.2006 um 13:03:

bei mir funktionierts nicht

EDIT: Hab meinen fehler gefunden, hab hier einfac nicht ordentlich gelesen, gutes Tut!

NOCHMAL EDIT: Ich hab trotzdem immernoch das Problem, dass ichs für jede Zelle in den tabellen nochmal machen muss, also Zentrieren, Schriftart und Schriftgröße vorgeben, Linkeffekt klappen, ich verstehs nicht unglücklich

Geschrieben von Katja am 28.06.2006 um 15:42:

Versuchs mal damit Leila smile

td {
align:center;
}

Geschrieben von Leila am 28.06.2006 um 23:35:

Also, das hier ist mein CSS-Code:

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:

A:link { color: #000000; text-decoration: none; none;}
A:visited { color: #000000; text-decoration: none; font-weight:none;}
A:hover { color: #000000; text-decoration: none; filter:blur;}
A:active { color: #000000; text-decoration: underline overline;}
body {
font-weight:normal;
font-color: #000000;
text-align: center;
font-family: Verdana;
font-size:8pt;
background-attachment: fixed;
scrollbar-face-color: #0000FF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #0000FF;
scrollbar-darkshadow-color: #000000;
scrollbar-shadow-color: #330066;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #00FFFF;}

trotzden sieht die Startpage so aus: http://de.geocities.com/kerad_buffalo/Home.htm

EDIT: Komisch, jetzt klappts wieder verwirrt

Nochmal EDIT: Allerdings gehts in den Tabellen immernochnicht und der zentriert die gesamten Tabellen nicht, nur die Texte und Grafiken, die Außerhalb der Tabellen stehen...

Geschrieben von katho am 25.08.2006 um 18:48:

Zitat:

Original von Sabi
...sondern auch Tabellen, Boxen, Rahmen etc bearbeiten, was vor allem bei vielen VRHs ja relativ praktisch ist!

weißt du den code für die Tabellen?

bei mir funktioniert das mit den links nicht...
hier der code:

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:

BODY { 
color: #000000;
text-align: center; 
font-size:10pt ;
font-family= Arial; 
scrollbar-3dlight-color: #000000; 
scrollbar-arrow-color: #ffffff;
scrollbar-darkshadow-color: #000000;
scrollbar-face-color: #000000;
scrollbar-highlight-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-track-color: #000000; 
A:link { color: #000000; text-decoration: none; }
A:visited { color: #000000; text-decoration: none; }
A:hover { color: #000000; text-decoration: overline; }
A:active { color: #000000; text-decoration: none; }
}

Geschrieben von Katja am 26.08.2006 um 11:20:

²Katho du hasst auch einen Fehler drinnen!

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:

BODY { 
color: #000000;
text-align: center; 
font-size:10pt ;
font-family= Arial; 
scrollbar-3dlight-color: #000000; 
scrollbar-arrow-color: #ffffff;
scrollbar-darkshadow-color: #000000;
scrollbar-face-color: #000000;
scrollbar-highlight-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-track-color: #000000; 
}

A:link { color: #000000; text-decoration: none; }
A:visited { color: #000000; text-decoration: none; }
A:hover { color: #000000; text-decoration: overline; }
A:active { color: #000000; text-decoration: none; }

so müsste es gehen

²Leila welchen editor benutzt du? Bei firefox klappt das meistens nicht mit den znetrieren von Tabellen