CSS Problem

jkhkhvbjkhv · 05.10.06

Moin. Habe da ein Problem mit meiner Navigation. Habe die Schrift und den Effekt der Navigation komplett in CSS umgesetzt.

Man muss sich das so vorstellen. Der Textlink ist in einem grau-Farbton und beim Hover-Effekt, soll dieser grau-Ton im Hintergrund von edm Text erscheinen. Der Linktext switcht dabei in ein weiss-Farbton.

Das funktioniert auch soweit. Nun ist es aber so, es gibt ja noch den "Visited-Befehl".

Wenn ich ein Link besucht habe und ich fahre mit der Maus rüber, dann wird nur der Hintergrund grau, aber die Schrift nicht weiss. Kann man den Visited-Schnick-Schnack vielleicht irgendwie unterdrücken? Weglassen bringt nichts, dann werden die Links in blau angezegit.

Ach ja, das Problem tritt in jedem Browser auf.

Hier einmal der Code aus meiner .css-Datei zum Nachvollziehen.

Code:

/* text_middle_nav */
.text_middle_nav {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #313131;
	text-decoration: none;
	height: 33px;
	line-height: 33px;
	display: block;
	vertical-align: middle;
	padding-left: 1px;
}
.text_middle_nav a:link {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #313131;
	text-decoration: none;
	height: 15px;
	line-height: 15px;
	display: block;
	vertical-align: middle;
	padding-left: 15px;
}
.text_middle_nav a:hover {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #FFFFFF;
	background-color: #313131;
	text-decoration: none;
	height: 15px;
	line-height: 15px;
	display: block;
	vertical-align: middle;
	padding-left: 15px;
}
.text_middle_nav a:visited {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #313131;
	text-decoration: none;
	height: 15px;
	line-height: 15px;
	display: block;
	vertical-align: middle;
	padding-left: 15px;
}
.text_middle_nav a:active {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #FFFFFF;
	background-color: #313131;
	text-decoration: none;
	height: 15px;
	line-height: 15px;
	display: block;
	vertical-align: middle;
	padding-left: 15px;
}

Wäre äußerst wichtig, dass ich das ziemlich schnell hinbekomme. Wäre nett, wenn der eine oder andere eine Idee da hätte.

Gruß Niko

stk · 05.10.06

Moin,

vertausch die Reihenfolge von visited und hover, dann sollte es gehen.

Gruß Stefan

jkhkhvbjkhv · 05.10.06

Super vielen Dank. Das war's.

stk · 06.10.06

Moin,

u.a. dafür steht das "C" für "Cascading" - der jeweils letzt interpretierte Eintrag im Stylesheet wird angezogen. Innerhalb einer Datei werden die Statements von oben nach unten durchgearbeitet, mehrere Dateien, bzw. Styleangaben im Header in der Reihenfolge in der sie im HTML-Code eingebunden sind und zu guter letzt Styleangaben, die innerhalb des <body> direkt den Tags mitgegeben werden.

Im vorliegenden Fall überfuhren die :visited Angaben die für :hover, so daß ein besuchter Link nicht mehr korrekt auf die :hover Styleangaben zurückgriff.

Die zweite Art der Kaskadierung spart bei richtigem Dokumentenaufbau reichlich Klassen. So ist es ggf. ratsamer bestimmte Bereiche (Header, Naviation, Content, Sidebar, Footer, ...) in <div>s zu unterteilen und daraus alle nachfolgenden Formatierungen abzuleiten. Also statt:

Code:

<style>
  a.middle_nav_text {...}
</style>
 <ul>
   <li><a class="middle_nav_text" href="#">Menu1</a></li>
   <li><a class="middle_nav_text" href="#">Menu2</a></li>
    ...

besser

Code:

<style>
   #navi ul li a {...}
</style>
<div id="navi">
 <ul>
   <li><a href="#">Menu1</a></li>
   <li><a href="#">Menu1</a></li>
   ...

(@mcdiestel: ich weiß das es bei Dir anders ausschaut - ich hab's bewußt etwas verbogen

)

Gruß Stefan

Delmar · 06.10.06

Und dann gibt es bei CSS noch das Prinzip der Vererbung. Ich habe Deine Definitionen mal ein wenig bearbeitet und folgendes ist dabei herausgekommen:

Code:

a.text_middle_nav {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #313131;
	text-decoration: none;
	height: 15px;
	line-height: 15px;
	display: block;
	vertical-align: middle;
	padding-left: 15px;
}

Sämtliche Definitionen gelten jetzt für alle Links der Klasse text_middle_nav und auch deren Pseudoklassen

hover, :active, ...). Da Du nur zwei Eigenschaften für :hover und :active im Gegensatz zu den "normalen" Links ändern möchtest, reicht es, wenn Du auch nur diese angibst:

Code:

a.text_middle_nav:hover, a.text_middle_nav:active {
	color: #FFFFFF;
	background-color: #313131;
}

Für die Version von stk gilt das natürlich analog und sollte auch so verwendet werden:

Code:

#navi ul li a:hover, #navi ul li a:active {
	color: #FFFFFF;
	background-color: #313131;
}

crossinger · 06.10.06

Delmar schrieb:
Und dann gibt es bei CSS noch das Prinzip der Vererbung.

Bitte jetzt nicht schlagen: Ich weiß, man sollte dem nicht allzu viel Bedeutung beimessen, aber ich meine mich zu erinnern, dass diese Vererbungsgeschichten beim IE (bis einschließlich 6.0) ein p.i.t.a. sind! Ich habe für ein Projekt irgendwann aufgegeben und alles wieder in einzelne Definitionen aufgedröselt, weil sonst der doofe IE nix davon gerafft hat!

*J*

Delmar · 06.10.06

Hm ... hatte bis jetzt keine Probleme mit dem IE und baue sämtliche CSS Definitionen so auf. o_O

crossinger · 06.10.06

Delmar schrieb:
Hm ... hatte bis jetzt keine Probleme mit dem IE und baue sämtliche CSS Definitionen so auf.

OK, ich kann jetzt auch kein Beispiel bringen - und das Projekt ist auch schon ne Weile her. Werde bei nächster Gelegenheit dann dem IE nochmal 'ne Chance geben!

Delmar · 06.10.06

Natürlich muss man bei IE immer besonders aufpassen. Ich gehe i.d.R. bei Projekten so vor, dass ich mit Firefox und Safari entwickel und dann die Seiten im IE auf Probleme teste. Grundsätzlich sind das dann aber bekannte Sachen wie z.B. der Box Model Bug. Aber grundsätzlich ...

schwaiger · 06.10.06

und wenn er dann dochmal rumzickt (was sicher der fall sein wird

) nimmste einfach die css und passt sie mitm sternchen hack fürn ie an !

bsp.:

.mistie {
width:500px; /*NORMAL*/
*width:400px; /*IE-HACK*/
}

und scho gehts...

lg flo

Delmar · 06.10.06

Sternhacks sind was für Weicheier!

schwaiger · 06.10.06

lol...

naja aber eben manchmal von nöten !!!

aber nagut ab nun alles nurnoch mit expression():

lol

Nogger · 06.10.06

crossinger schrieb:
OK, ich kann jetzt auch kein Beispiel bringen

Vielleicht hast du CSS2 Selektoren benutzt (">", "+" und Kollegen). IE6 kennt die garnicht. CSS1 kennt er ja auch nicht vollständig (position fixed, :hover).

jkhkhvbjkhv · 06.10.06

Moin. Danke Euch, habe aber noch 2 andere Fragen. Seit ja quasi aktiv dabei.

1) Habe EINE Tabelle mit drei Spalten auf der Internetseite. Muss leider eine Tabelle sein. Wie dem auch sei. In der Linken Spalte habe ich zwei Bilder. Das obere Bild soll oben ausgerichtet werden und das untere Bild dementsprechend unten. Nun das Problem. Bei einer festen Tabellenhöhe wäre dies ja kein Problem. Aber die Tabellenhöhe ist nicht definiert, da sie von Seite zu Seite variieren kann.

Ist es irgendwie möglich dies in CSS oder etwas anderem umzusetzten???

2) Wollte in dieser Tabelle mit den drei Spalten in der mittleren Spalte ein kleineres Bild im Hintergrund einfügen, aber da die Tabellenhöhe nicht definiert ist, würde sich das Bild öfters wiederholen. Dies soll aber nicht so sein. Kann man irgendwie mit Layern oder CSS (?) das Bild hinter den Text legen und nach unten (Fuß der Tabelle) ausrichten????

Wäre nett, wenn Ihr mir da auch helfen könntet. Ich hoffe, dass Ihr meine Frage versteht.

Lieben Gruß Niko

stk · 06.10.06

jkhkhvbjkhv · 06.10.06

stk schrieb:
Moin,

1) vertical-align: [top|bottom|center]

2) background: url(bild.jpg) no-repeat [top|bottom|center] [left|right|center]

http://de.selfhtml.org/navigation/css.htm ist dein Freund :-D

Gruß Stefan

Moin. Danke für Deine Antwort. Bin aber etwas gestutzt...

Zu 1) Es ist eine Spalte und in einer Spalte kann man mit vertical-align jeweils die bilder positionieren?? Mache ich das mit DIV-Tags? oder füge ich es beim IMG-Tag als "Style" ein???

Hoffe, dass Du mir das noch einmal genauer erklären könntest. Durch das Selfhtml habe ich nicht ganz so durch geblickt...

Gruß Niko

jkhkhvbjkhv · 07.10.06

Kann mir keiner hier helfen, was STK meinte??? Das klappt irgendwie nicht..

fraggle · 09.10.06

Ich weiß nicht, ob ich dich richtig verstanden habe mcdiestel, aber meinst du in etwa so?

Code:

<table border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td style="vertical-align: top;">
			<img src="pfad/zum/bild_1.jpg" alt="Alternativ Text" />
		</td>
		<td rowspan="2" style="background: url(pfad/zum/hintergrundbild.jpg) center bottom no-repeat; vertical-align: top;">
			Blindtext
		</td>
		<td rowspan="2" style="vertical-align: top;">
			Blindtext
		</td>
	</tr>
    <tr>
        <td style="vertical-align: bottom;">
            <img src="pfad/zum/bild_2.jpg" alt="Alternativ Text" />
        </td>
    </tr>
</table>

jkhkhvbjkhv · 09.10.06

Perfekt... Danke. Jetzt müsste ich halt nur noch wissen, wie man den Hintergrund nach unten setzt (vertical-algin: bottom) und nur einmal wiederholt. Der Hintergrund soll in einer Spalte nur auftauchen..

fraggle · 09.10.06

na das hab ich doch bereits mit angegeben. schau dir noch mal folgende zeile an:

<td rowspan="2" style="background: url(pfad/zum/hintergrundbild.jpg) center bottom no-repeat; vertical-align: top;">

CSS Problem

Jerseymac

Grünapfel

Jerseymac

Grünapfel

Becks Apfel (Emstaler Champagner)

Doppelter Melonenapfel

Becks Apfel (Emstaler Champagner)

Doppelter Melonenapfel

Becks Apfel (Emstaler Champagner)

Weigelts Zinszahler (Rotfranch)

Becks Apfel (Emstaler Champagner)

Weigelts Zinszahler (Rotfranch)

Damasonrenette

Jerseymac

Grünapfel

Jerseymac

Jerseymac

Boskoop

Jerseymac

Boskoop

Wir schützen Ihre Privatsphäre

Informationen auf einem Gerät speichern und/oder abrufen

Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen (Optionale Cookies)

Datenübermittlung an Partner in anderen Staaten (Drittanbieter-Cookies)