CSS-Fragen

f37p8 · 11.02.2005, 10:10

Hallo zusammen,

habe mich an einer Webseite versucht und sitze gerade an der CSS-Datei (die jmd. anders für mich erstellt hat) und versuche diese zu ändern.

Bei der Seite handelt es sich um http://www.astroexperten.de.

Was ich ändern möchte ich folgendes:

-die Links sollen beim "drüberfahren" unterstrichen werden (wie z.B. auf http://www.css4you.de - nur keine andere Farbe beim "drüberfahren"

- zwei verschiedene Schriftgrößen für die Links auswählbar wg. dem zu großen Link "Impressum" - der soll nur so groß sein wie das Copyright Astroexperten.de daneben - die Links oben sollen und im der Mitte sollen aber Ihre größe behalten

- zwei verschiedene Farben für "kleinschrift" auswählbar, im oberen Bereich für die EUR 1,86 soll die Farbe bestehen bleiben, im mittleren Bereich jedoch auch schwarz sein. Wenn ich hier "kleinschrift" verwende färbt sich das auch lila und das soll schwarz sein wie der übrige Text.

Ich hab schon bei Self-HTML nachgesehen und bei css4you.de aber als "Laie" konnte ich die Antwort auf meine Fragen nicht finden - hab auch schon alle möglichen Linkstyles über under line-trough blink etc. ausprobiert aber das gewünschte Resultat blieb aus.

Anbei habe ich noch die externe CSS-Datei angehängt, damit Ihr wisst, was akt. "eingestellt" ist.

Ich würde mich riesig freuen, wenn mir jemand ein paar Tipps geben kann!

Danke vielmals im Voraus!

Btw. ja ich weiß der Content der Seite ist nicht jedermanns Sache

Adromir · 11.02.2005, 10:25

Code:

.top {
	background-image: url(banner2.jpg);
	background-repeat: no-repeat;
	background-position: center center;
}
.bottom {
	background-image: url(bottom2.jpg);
	background-repeat: no-repeat;
	background-position: center center;
}
.main {
	background-image: url(main2-1.jpg);
	background-repeat: no-repeat;
	background-position: left top;
}
.topschrift {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #660033;
	text-decoration: none;

}
.kleinschriftSchwarz {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #000000;
}

.kleinschriftLila {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #660033;
}

.hauptschrift {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #000000;
}
a:link {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #660033;
	
}
a:hover {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: italic;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	text-decoration: none;
	color: #000000;

}
a:visited {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #660033;
	text-decoration: none;
}

Um die Verschiedenen Farben der Kleinschrift zu nutzen:
Bei den Texten die in Schwarz erscheinen schreibst du dann:
class="kleinschriftSchwarz" bei denen in Lila dann entsprechend class="kleinschriftLila"

Boris · 11.02.2005, 10:30

Du solltest da ein wenig mehr tun - so sieht die Seite bei mir aus (siehe Anhang).

f37p8 · 11.02.2005, 10:42

@ Adromir: vielen Dank - habe das gleich umgesetzt - klappt super!

@ Adagoio: Danke - welchen Browser verwendest du? Habe mit IE und Firefox getestet - da war soweit alles in Ordnung. Muss ich dann alles mit Tabellen bzw. CSS positonieren?

@ euch beide: Hammer was für eine super Reaktionszeit - danke nochmals!

Adromir · 11.02.2005, 10:51

Da fällt mir ein, du wolltest ja noch bei Impressum einen kleineren Link.
Dafür fügst du folgendes in dein CSS ein:

Code:

a:link.small { color: #660033; font: 11px Geneva, Arial, Helvetica, sans-serif; text-transform: none }
a:hover.small  { color: #000000; font: italic bold 9px Geneva, Arial, Helvetica, sans-serif;  text-transform: none }
a:visited.small { color: #660033; font: 11px Geneva, Arial, Helvetica, sans-serif;  text-transform: none }

In den Impressumslink kommt dann class="small"

hero-master · 11.02.2005, 11:13

Zitat:

Zitat von Adromir

Dafür fügst du folgendes in dein CSS ein:

Code:

a:link.small { color: #660033; font: 11px Geneva, Arial, Helvetica, sans-serif; text-transform: none }
a:hover.small  { color: #000000; font: italic bold 9px Geneva, Arial, Helvetica, sans-serif;  text-transform: none }
a:visited.small { color: #660033; font: 11px Geneva, Arial, Helvetica, sans-serif;  text-transform: none }

In den Impressumslink kommt dann class="small"

Ist, wenn ich mich recht erinnere, CSS2, oder, also funkioniert in den alten BRowser nicht mehr...Ok, wird wohl oft egal sein, aber generell ist es besser, wenn du a.small:link, etc schreibst

Viele Frage, die du oben gestellt hast, wurden schon desöfteren besprochen und warum schaust du dich auf deiner Beispielseite (css4you) nicht einfach mal um?
Es gibt so viele Quellen im Netz, die vor allem für Anfänger sehr nützlich sein können:
http://www.traum-projekt.com/links/browselinks.php?c=25

Boris · 11.02.2005, 12:32

Nein, aber in meinem Browser ist nicht "Weiß" als Standardfarbe gesetzt, sondern grau. Du solltest für BODY eine feste Farbe definieren (und nicht davon ausgehen, bei jedem wäre es via Standard weiß).

hero-master · 11.02.2005, 12:36

Zitat:

Zitat von Adagio

Nein, aber in meinem Browser ist nicht "Weiß" als Standardfarbe gesetzt, sondern grau. Du solltest für BODY eine feste Farbe definieren (und nicht davon ausgehen, bei jedem wäre es via Standard weiß).

Langsam kannst du das direkt in deine Signatur einbauen

Boris · 11.02.2005, 12:49

321 · 11.02.2005, 13:01

Zitat:

Zitat von hero-master

Langsam kannst du das direkt in deine Signatur einbauen

Da gäbs noch einige andere Signatur-Vorschläge:

I like gute Browser

I H8 IE

ein Editor Deiner Wahl

(dies und das) Deines Vertrauens

eine Sache von 2 Minuten

/me (321) ist heute zynisch und sarkastisch

f37p8 · 11.02.2005, 14:53

Danke - das mit dem Impressumlink verkleinen hat jetzt auch geklappt

Jetzt bleibt noch meine Navigation - mal sehen was ich da mit den Links machen kann damit die beim "drüberfahren" unterstrichen sind.

Bin schon auf sämtlichen CSS-Seiten unterwegs - mal sehen ob ich das da finde.

Btw. die Sache mit der Hintergrundfarbe muss ich auch noch finden. Wenn euch so noch etwas auffällt dürft ihr das gerne anmerken - egal in welchem Zusammenhang - sagt mir was anders gehört!

Boris · 11.02.2005, 15:07

Hintergrundfarbe? Ganz simpel:

BODY
{
background-color: #fff;
}

f37p8 · 11.02.2005, 21:50

Danke! -Ist bei dir jetzt alles i.O. Adagio?

Boris · 12.02.2005, 12:17

Sieht besser aus

Ich würde die Links unten beim HOVER-Zustand nicht in Kursiv darstellen - dann springt die Navigation, das ist nicht schön.

Bei der oberen (blauen) passiert garnichts