Stylesheet wie einbinden? geschlossen

[KingstonTown]

Hallo und entschuldigt, dass ich ein wahrscheinlich einfaches Thema hier anspreche. Ich komme irgendwie nicht weiter.

Ich bin grad dabei eine Homepage zu coden, dazu möchte ich alles mögliche über stylesheet einbinden.

Diese ist in etwa so aufgeteilt:

#HEADER
....
#BODY
....
#FOOTER
....

etc.

Unter z.B. #FOOTER soll sowas stehen, dass die Links dort z.B. rot sind, die Schriftgröße 3, und nicht unterstrichen sein sollen.

Kann ich in die *.css einfach

style="text-decoration: none";

unter

#FOOTER

einfügen?

Bzw. ist mir das eingentlich bekannt, aber wie bekomme ich das im HTML-Code hin, dass genau im FOOTER dieses passiert?

Habe schon etliche Seiten durch, und bis jetzt immer nur sowas gefunden,wie z.B. die *.css Datei selbst aussieht, aber nicht direkt, wie ich dies in den Code einfüge, dass "nur" der jeweilige Abschnitt die *.css annimmt.

Im Header habe ich bereits folgendes eingefügt


der Name der Datei stimmt auch.

Ich hoffe ihr wisst wie ich das meine?

Hatte auch schon sowas gefunden wie (im HTML)

-..... Hier der Inhalt Bzw. bei Links, ABER auch das haut nicht so richtig hin.

Würde mir einer einfach nur sagen, wie ich die *.css aufteile und auf der Page die verschiedenen Bereiche zuordne?

Das wäre super, vllt. ein kleines Beispiel im Code.

Achso, vllt. macht es noch einen Unterschied, dass der Footer bzw. die Links in einer Tabelle sind.

 

[rost]

Du musst die richtigen Selektoren benutzen:
==> css .footer
==> css #footer

in der css dann je nach id oder class

.footer {
color:#FFF; 
border-top:1px solid #FF6;
border-bottom:1px solid #FF6;
}

schau mal hier

 

[KingstonTown]

schau mal hier

Danke dir, die Seite hatte ich auch schon gefunden, bin da aber nicht weiter durchgekommen. Muss dazu aber auch sagen, dass ich dort nicht richtig geschaut habe bzw. nicht lange.

Du musst die richtigen Selektoren benutzen:
==> css .footer
==> css #footer

Mit anderen Worten:

schreib ich in die *.css ein # ..., gebe ich in der HTML-Datei
B]="...">INHALT
(?) ein!?

Wenn ich in die *.css . ... schreibe, kommt in die HTML-Datei
B]=".....">INHALT
(?) ein?!

Alles was dann in der *.css unter #... oder .... steht,
wird dann in dem Bereich umgesetzt?!

Kann ich in der *.css auch angeben, "welcher" Inhalt auf jeder Seite in einer bestimmten Tabelle angezeigt wird?

Also so, das sich quasi die Seite per *.css aufbaut, und ich, wenn ich eine neue Seite erstelle, die Tabelle automatisch gefüllt wird?

Beispiel:

INHALT-1

INHALT-2

INHALT-3

auf jeder Seite der gleiche?!

EDIT::

Bei mir haut da irgendwas nicht hin. Meine *.css sind so aus:

#Links
a:link {color:red; text-decoration:none}
a:visited {color:blue; text-decoration:none}
a:active {color:black; text-decoration:none}
a:hover {color:black; text-decoration:underline}

in der HTML stand sowohl:

[td]

Produkte
........​

[/td]

wie auch

[td]

Produkte
........​

[/td]

dennoch klappt es nicht.

Liegt es da dran, weil ich zweimal eine
Angabe stehen habe? Dies habe ich jetzt noch nicht probiert. Wollte jetzt nicht allzu viel umschreiben, nicht das ich mir noch was verhaue.

 

[FeliX_22]

schreib ich in die *.css ein # ..., gebe ich in der HTML-Datei
B]="...">INHALT
(?) ein!?

Wenn ich in die *.css . ... schreibe, kommt in die HTML-Datei
B]=".....">INHALT
(?) ein?!

Ja, IDs dürfen in der html-Datei aber nur einmal vorkommen, Klassen beliebig. Also benutze IDs nur für die Bereiche #header, #body und #footer.

Kann ich in der *.css auch angeben, "welcher" Inhalt auf jeder Seite in einer bestimmten Tabelle angezeigt wird?

Es gibt zwar :before und :after, aber das css sollte man nur für das Aussehen benutzen. Der Inhalt bleibt in der html oder xml.

Zu deinem Edit:

Die div-Tags solltest du selbst hinkriegen, für jedes öffnende div brauchst du ein schließendes. Hier helfen Code-Editoren mit Zeileneinrückung und Syntaxhighlighting ungemein.

Das CSS sollte so aussehen:

#Links a:link {color:red; text-decoration:none}
#Links a:visited {color:blue}
#Links a:hover {color:black; text-decoration:underline}
#Links a:active {text-decoration:none}

Achte auf die Reihenfolge: :link, :visited, :hover, :focus, :active. Ich habe nur die Eigenschaften eingetragen, die die vorhergehenden Pseudoklasse überschreiben sollen. Du kannst aber auch color und text-decoration überall eingeben.

Wenn du überall das #Links löschst, dann gelten die Regeln für alle a-tags (also Links) auf der Seite. Es sit nur dann sinnvoll es wie oben zu schreiben, wenn du für andere Bereiche andere Regeln willst.

In deiner html sind die 2 Tags Links und right. Heißt das das eine soll links, das andere rechts stehen, oder Links = URLs? Ja, divs in [td] ist erlaubt.

Gruß

FeliX_22[/td]

 

[KingstonTown]

In deiner html sind die 2 Tags Links und right. Heißt das das eine soll links, das andere rechts stehen, oder Links = URLs? Ja, divs in [td] ist erlaubt.

div align ist auf die Ausrichtung bezogen und div id auf die Eigenschaften aus der *.css, welche unter dem Sektor Links stehen,
aber eben auch auf "nur" Links,also URLs im Header bezogen sind.[/td]

 

[FeliX_22]

Ah, das eine ist die id, das andere ist align, gar nicht gemerkt Align gibts als solches auch nicht. Schreib es so:

[td]

Produkte
[/td]

Und in der css:

#Links {float:right; position:static}
#Links a:link {color:red; text-decoration:none}
#Links a:visited {color:blue}
#Links a:hover {color:black; text-decoration:underline}
#Links a:active {text-decoration:none}

position:static hab ich mal für alle Fälle dazugeschrieben, weil du jetzt ein floatendes Element hast, und da musst du evtl. andere Werte ausprobieren, aber das hängt von einigen anderen Elementen ab, die ich hier gar nicht sehen kann.

Gruß

FeliX_22

 

[KingstonTown]

[td]

Produkte
[/td]

Und in der css:

#Links {float:right; position:static}
#Links a:link {color:red; text-decoration:none}
#Links a:visited {color:blue}
#Links a:hover {color:black; text-decoration:underline}
#Links a:active {text-decoration:none}

Gesagt,getan. Dennoch leider kein Erfolg.

Ich habe alles so gemacht, wie beschrieben:

In den HTML-Header vor

in die stylesheet.css (zur Zeit alles, was dort drin steht):

#Links {float:right; position:static}
#Links a:link {color:red; text-decoration:none}
#Links a:visited {color:red}
#Links a:hover {color:black; text-decoration:underline}
#Links a:active {text-decoration:none}

Und in der HTML steht folgendes:

[td]Home[/td]

Leider tut sich nicht wirklich was, die Links sehen aus wie nicht bearbeitet.
Habe auch zur Kontrolle die Farben geändert, sind allerdings dennoch weiterhin unterstrichen.

 

[rukmini]

wenn du eine formatierung öfter im code verwenden willst, würde ich dir eher empfehlen, statt id die class zu verwenden. und die vergibst du dann in diesem fall an den a-tag, also

[td]Home[/td]

im css die raute durch den punkt ersetzen nicht vergessen!

 

[Broken Sword]

@KingstonTown:
Das Einfachste für alle wäre, wenn du eine Beispiel-Seite postest.

Vielleicht ist es einfach zu beheben, aber aus deinen Erläuterungen nicht ersichtlich.

Gruß
Broken Sword

 

[KingstonTown]

Das ist mir jetzt grad einwenig peinlich *schäm*

Ich habe das Problem gefunden. Das Problem war dies, dass ich die *.css in Notepad geschrieben hatte, und dann abgespeichert als "stylesheet.css".

Was ich aber nicht gesehen hatte, dass die Datei als "stylesheet.css.txt" gespeichert wurde. Ich habe die *.css nun mit einem anderen Programm geschrieben und nochmals unter *.css gespeichert, diesmal ohne ".txt":

Wenn ich nun die ID eingeben, vor einen Link, funktioniert es.

Oh man, eigentlich wieder ganz simpel

 

[FeliX_22]

Tipp: Wenn du in Notepad um den Dateinamen Anführungszeichen setzt, also "stylesheet.css", passiert dir das nicht mehr. Das ist das gleiche, wie wenn du Alle Dateien (*.*) auswählst.

Gruß

FeliX_22

 

[KingstonTown]

Danke dir Felix, werde ich mir merken.


Hier kann somit zu. Ich denke den Rest schaffe ich alleine.

Vielen Dank für Euren Hilfen