• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] CSS richtig aufrufen

Status
Für weitere Antworten geschlossen.
V

veloce

Neues Mitglied
Hallo,

ich bin der Neue und gerade dabei eine Website für einen neu gegründeten Verein in unserem Dorf aufzubauen. Ich studiere Energietechnik und wir haben dieses Semester "Webdesign" als Modul. Daher hab ich mich berufen gefühlt, weil ich auch auf die Website ein Note bekomme. So kann ich zwei Fliegen mit einer Klappe schlagen. Aber in erster Linie bin ich natürlich Anfänger und Hilfesuchender :).

Zu meiner Frage:
Ich habe gelernt, dass man das Design der Website am besten über eine ausgelagerte css.Datei steuert. Diese habe ich bereits angelegt. Die Datei heißt design.css (ist aber trotzdem eine html-Datei oder?)
Die Website besteht aus mehrere Bereichen, die ich mittels Frames (3 Zeilen, die letzte hat zwei Spalten) angelegt habe. Die Bereiche sind ein Kopfbereich, eine Navigationsleiste darunter, einer Menüleiste links und ein großer Hauptbereich.
Jetzt möchte ich diesen Bereichen z.b. der Hauptbereich einen andere Hintergrundfarbe, Schriftfarbe usw zuweisen. Das geschieht ja über CSS mittels der CSS-Datei. Wie stelle ich sicher, dass die Hintergrundfarbe im Navigationsmenü auch nur dort angezeigt wird? Wie muss ich ich dass in der CSS-Datei kennzeichnen und in der HTML-Datei aufrufen?

Ich hoffe ihr könnte meiner Beschreibung folgen :).

Gruß veloce
 
Werbung:
Hallo

Ich hoffe ihr könnte meiner Beschreibung folgen
Zum Vergrößern anklicken....

Allgemein ja. Aber um deine Frage beantworten zu können ohne gleich ein ganzes Buchkapitel zu schreiben benötigen wir aber den bisherigen HTML-Quelltext.

Du kannst auch nach folgenden Begriffen suchen:

a) html element

b) html id

c) html class

d) css selector

Ich habe gelernt, dass man das Design der Website am besten über eine ausgelagerte css.Datei steuert.
Zum Vergrößern anklicken....

Ja, bei fertigen Seiten. Zum Testen und Entwickeln ist es häufig zeitsparender das CSS in den head-Bereich der HTML-Datei zu schreiben. Das nennt sich Inside-CSS.

Gruss

MrMurphy
 
Danke erst mal für deine Antwort.
HTML ID und Class waren die richtigen Stichworte:

Der Code schaut folgendermaßen aus (nicht erschrecken ist alles noch in der Übungsphase :)):

Das HTML-Sheet für die linke Navigationsleiste:

<!DOCTYPE html>
<html>
<head>
<link href="design.css" type="text/css" rel="stylesheet" />
</head>

<body>

<div id="nav">
<ul>
<li><strong> <a href="startseite.html" target="main">Startseite</a></strong></li>
<li> <a href="offizielles.html" target="main">Offizielles</a></li>
<li> <a href="anfahrt.html" target="main">Anfahrt, Kontakt</br>& Öffnungszeiten<a/></li>
<li> <a href="kontakt.html" target="main">Kontakt</a></li>
<li> <a href="mitgliedschaft.html" target="main">Mitgliedschaft</br>&Beiträge</a></li>
<li> <a href="gästebuch.html" target="main">Gästebuch</a></li>
<li> <a href="impressum.html" target="main">Impressum</a></li>
</ul>
</div>

</body>

</html>

Die .css Datei

#nav {
background-color: green;
list-style: none;
text-decoration: none;
margin-bottom:10px;
}

Lustigerweise ging es vorhn schon mal, zumindest die Hintergrundfarbe. Aber es war nicht der ganze Frame grün also hab ich wieder geändert und kanns leider nicht mehr herstellen.

EDIT: Ich weiß jetzt nicht genau, ob der rot markierte Slash mitgeschrieben werden muss oder nicht. Hab da zwei unterschiedliche Quellen. Ändern tut sich aber nix

Gruß veloce
 
Zuletzt bearbeitet:
Werbung:
veloce schrieb:
Lustigerweise ging es vorhn schon mal, zumindest die Hintergrundfarbe. Aber es war nicht der ganze Frame grün also hab ich wieder geändert und kanns leider nicht mehr herstellen.
Zum Vergrößern anklicken....
CSS: 
body {
background-color:green
}
#nav {
margin-bottom:10px
}
#nav ul {
list-style:none
}
#nav a {
text-decoration:none
}
 
Guten Morgen,

vielen Dank für eure Antworten. Hab einiges gelernt. Hauptproblem war aber, dass ich die design.css als HTML abgespeichert habe und die anderen Seiten darauf nicht "reagiert" haben.

Danke euch.

EDIT: Wie kann ich die Frage als erledigt markieren?
 
Werbung:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben