Gegen Bilderklau - Das Original | Tutorials und FAQ

Gegen Bilderklau - Das Original » Design, Website, Copyright » Homepagehilfe » Tutorials und FAQ » [CSS] Css

» Hallo Gast [Anmelden|Registrieren]

Letzter Beitrag | Erster ungelesener Beitrag

Druckvorschau | Thema zu Favoriten hinzufügen

Seiten (6): [1] 2 3 nächste » ... letzte »

Css

Autor

Beitrag

« Vorheriges Thema | Nächstes Thema »

Katja

Kekse?

Dabei seit: 03.01.2005
Beiträge: 1.320
Herkunft: Berlin

Css

Zitatantwort auf diesen Beitrag erstellen

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/

__________________

Dieser Beitrag wurde 1 mal editiert, zum letzten Mal von Katja: 06.10.2012 18:01.

21.03.2005 12:20

Nehmen Sie Katja in Ihre Freundesliste auf

*Sunny*
Mitglied

Dabei seit: 09.02.2005
Beiträge: 1.128

wie macht man diesen Verweiß?

__________________

Klickt mal da...Grafik-Service

27.03.2005 16:09

Nehmen Sie *Sunny* in Ihre Freundesliste auf

Delilah Delilah ist weiblich

Gecko-Fan xD

Dabei seit: 18.02.2005
Beiträge: 905
Herkunft: Deutschland

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.

__________________

JUST G R E E N.

27.03.2005 17:44

Nehmen Sie Delilah in Ihre Freundesliste auf

*Sunny*
Mitglied

Dabei seit: 09.02.2005
Beiträge: 1.128

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!

__________________

Klickt mal da...Grafik-Service

27.03.2005 21:01

loona12
Mitglied

Dabei seit: 10.02.2005
Beiträge: 3.453

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...

__________________

28.03.2005 20:33

Nehmen Sie loona12 in Ihre Freundesliste auf

Waunca Waunca ist weiblich

eidg. dipl. Gfrörli

Dabei seit: 11.07.2005
Beiträge: 665
Herkunft: Schweiz

Auf jeder, wo das Design angezeigt werden soll.

__________________

www.pferdekinder.ch / www.imperfekt.ch.vu / www.boxenschilder.pferdewissen.ch

28.03.2005 21:51

Nehmen Sie Waunca in Ihre Freundesliste auf

loona12
Mitglied

Dabei seit: 10.02.2005
Beiträge: 3.453

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?

__________________

29.03.2005 19:05

Waunca Waunca ist weiblich

eidg. dipl. Gfrörli

Dabei seit: 11.07.2005
Beiträge: 665
Herkunft: Schweiz

Wenn du mit Frames arbeitest, ja.

__________________

www.pferdekinder.ch / www.imperfekt.ch.vu / www.boxenschilder.pferdewissen.ch

29.03.2005 19:33

loona12
Mitglied

Dabei seit: 10.02.2005
Beiträge: 3.453

okay danke, bist nen schatz +knuddelz+

__________________

29.03.2005 20:35

Fjosi

Julia

Dabei seit: 12.04.2005
Beiträge: 904
Herkunft: Wien

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!

21.04.2005 10:31

Nehmen Sie Fjosi in Ihre Freundesliste auf

Sabi

Mitglied

Dabei seit: 15.02.2005
Beiträge: 138
Herkunft: Hessen

@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!

Dieser Beitrag wurde 1 mal editiert, zum letzten Mal von Sabi: 24.04.2005 19:27.

24.04.2005 19:22

Nehmen Sie Sabi in Ihre Freundesliste auf

sunny10 sunny10 ist weiblich

Waldfrucht xD

Dabei seit: 19.03.2005
Beiträge: 747
Herkunft: Lummerland

Hilfreicher Thread, dankeschön! LG, Sunny

16.08.2005 13:33

Nehmen Sie sunny10 in Ihre Freundesliste auf

Leila

Mitglied

Dabei seit: 09.02.2005
Beiträge: 12.987

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

Dieser Beitrag wurde 2 mal editiert, zum letzten Mal von Leila: 28.06.2006 15:03.

28.06.2006 13:03

Nehmen Sie Leila in Ihre Freundesliste auf

Katja

Kekse?

Dabei seit: 03.01.2005
Beiträge: 1.320
Herkunft: Berlin

Themenstarter Thema begonnen von Katja

Versuchs mal damit Leila smile

td {
align:center;
}

__________________

28.06.2006 15:42

Leila

Mitglied

Dabei seit: 09.02.2005
Beiträge: 12.987

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...

Dieser Beitrag wurde 4 mal editiert, zum letzten Mal von Leila: 29.06.2006 11:29.

28.06.2006 23:35

katho

stolze DRP-Besitzerin =)

Dabei seit: 04.02.2006
Beiträge: 1.433
Herkunft: Oberösterreich
Name: Katharina

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; }
}

__________________

[HAFIFIEBER] [TIERTHREAD] [FJORDIFIEBER]

Dieser Beitrag wurde 1 mal editiert, zum letzten Mal von katho: 25.08.2006 18:55.

25.08.2006 18:48

Nehmen Sie katho in Ihre Freundesliste auf

Katja

Kekse?

Dabei seit: 03.01.2005
Beiträge: 1.320
Herkunft: Berlin

Themenstarter Thema begonnen von Katja

²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

__________________

Dieser Beitrag wurde 1 mal editiert, zum letzten Mal von Katja: 26.08.2006 11:20.

26.08.2006 11:20

katho

stolze DRP-Besitzerin =)

Dabei seit: 04.02.2006
Beiträge: 1.433
Herkunft: Oberösterreich
Name: Katharina

danke! jetzt funktionierts!!

und weißt du wie das geht, das der Link so "zurückgeht" wenn man drauffährt?

__________________

[HAFIFIEBER] [TIERTHREAD] [FJORDIFIEBER]

26.08.2006 20:23

Katja

Kekse?

Dabei seit: 03.01.2005
Beiträge: 1.320
Herkunft: Berlin

Themenstarter Thema begonnen von Katja

nope sry, aber wenn du über google nach Linkeffekten suchst wirst du bestimmt fündig

__________________

26.08.2006 20:42

katho

stolze DRP-Besitzerin =)

Dabei seit: 04.02.2006
Beiträge: 1.433
Herkunft: Oberösterreich
Name: Katharina

und weißt du codes für tabellen?

__________________

[HAFIFIEBER] [TIERTHREAD] [FJORDIFIEBER]

27.08.2006 20:06

Seiten (6): [1] 2 3 nächste » ... letzte »

Baumstruktur | Brettstruktur

Gehe zu:

Gegen Bilderklau - Das Original » Design, Website, Copyright » Homepagehilfe » Tutorials und FAQ » [CSS] Css

Impressum

Forensoftware: Burning Board, entwickelt von WoltLab GmbH