Link-Design ändern

Computer: Software & Programmierung HTML & CSS
#1

Hallo Leude,

ich hab hier ein verflixtes Problem mit meiner Navigation.
Die Nav ist rein in CSS formatiert.

Das Problem ist das die Links nicht mehr so aussehen wollen, wie sie eigentlich sollen

CODE:
A {padding: 0px; margin: 0px; text-decoration: none; cursor: hand; cursor: pointer}

#SECNAV
{
font-family: Arial, Verdana, Tahoma, sans-serif;
font-size: 10pt;
font-weight: bold;
color: #000000;
line-height: 20px;
background-color: #F2F2F2;
padding-top: 20px;
position: 0px;
width: 250px;
height: 100%;
margin: 0px;
vertical-align: top;
border-right: 1px solid #FFFFFF;
}

#SECNAV A.hnav:link {padding-bottom: 5px; COLOR:#000000; font-weight: normal;}
#SECNAV A.hnav:visited {padding-bottom: 5px; COLOR:#000000; font-weight: normal;}
#SECNAV A.hnav:active {padding-bottom: 5px; COLOR:#FF0000; font-weight: bold;}
#SECNAV A.hnav:hover {padding-bottom: 5px; COLOR:#FF0000; font-weight: bold;}

AUSGABE:
Link ist bold…sollte aber eigentlich normal sein…

Hab das Problem jetzt mal ausführlich getestet und bin zu dem Ergebnis gekommen, dass :link, :visited und :active nicht funktionieren => :hover geht seltsamerweise. Wenn ich was bei :link usw. ändere hat dies keine Auswirklungen auf den Link.

Wenn jemand ne Idee hat, nur her damit…

Danke!

Grüße,
Jens

#2

CODE:
A {padding: 0px; margin: 0px; text-decoration: none; cursor:
hand; cursor: pointer}

Warum zweimal eine Cursorangabe?
Und ich würde es mit Sternchen machen (http://css4you.de/wscss/css03.html#universal)

#SECNAV A.hnav:link {padding-bottom: 5px; COLOR:#000000;
font-weight: normal;}

An dieser Art der Linkangabe dürften sich einige Browser (bzw. der IE) verschlucken. Wegen der multiplen Klassen und IDs. Syntax ist imho auch falsch (wegen dem hnav zwischen a: und link).
Also lieber so probieren:

#SECNAV a:link {bla...}
#3

Hallo Olaf,

CODE:
A {padding: 0px; margin: 0px; text-decoration: none; cursor:
hand; cursor: pointer}

Warum zweimal eine Cursorangabe?

cursor: hand; //IE
cursor: pointer; //MZ

Und ich würde es mit Sternchen machen
(http://css4you.de/wscss/css03.html#universal)

ich möchte diese Formation jedoch nur für die Klasse „A“ haben und nicht allgemein, dafür gibts ein body{}

#SECNAV A.hnav:link {padding-bottom: 5px; COLOR:#000000;
font-weight: normal;}

An dieser Art der Linkangabe dürften sich einige Browser (bzw.
der IE) verschlucken. Wegen der multiplen Klassen und IDs.
Syntax ist imho auch falsch (wegen dem hnav zwischen a: und
link).
Also lieber so probieren:

#SECNAV a:link {bla…}

das Problem ist…es hat schon mal funktioniert…ich weiß nur nicht was ich rückgängig machen muss.

Es ist außerdem möglich einem Hyperlink einen weiteren Klassensektor anzufügen, der dann die Pseudoklassen :link, :hover usw verwendt
http://css4you.de/wscss/css03.html#uglpseudoklassen

Falls noch jemand helfen könnte…danke.

Grüße,
Jens

#4

Moin Jens!

ich hab hier ein verflixtes Problem mit meiner Navigation.
Die Nav ist rein in CSS formatiert.

Das Problem ist das die Links nicht mehr so aussehen wollen,
wie sie eigentlich sollen

*g*
Kommt mir bekannt vor. :wink:

[…]
Wenn jemand ne Idee hat, nur her damit…

Genauso, wie Du auf das A-Tag alleine und grundsätzlich margin und padding auf Null bringst, solltest Du unter „#ID A { … }“ zunächst den Wert für Font-Weight zurücksetzen. Warum Du dann aber noch zusätzlich mit Klassen innerhalb des #SECNAV arbeitest… verstehe ich zwar, aber die Problematik sind dabei dann immer die unterschiedlichen Browser. (Reicht es denn nicht schon aus, zwei Stylesheets für IE und Mozilla/Firefox zu machen, wenn margins, paddings, borders usw. unterschiedlich interpretiert werden?)

Ich empfehle Dir, den HTML-Code im #SECNAV so anzupassen, dass Du auf die Klasse „hnav“ verzichten kannst. Das macht viiieles einfacher! :wink:

Um Dir Rechnung zu tragen, empfehle ich Dir mal folgenden Code zu testen:

 A { 
 padding: 0px;
 margin: 0px;
 text-decoration: none;
 /\* Vorschlag zum Ausprobieren: \*\*\*wenn so gewünscht?\*\*\*\*\*\*\*\*/
 /\* CURSOR: Wenn 'hand' unbekannt, dann 'pointer' verwenden \*/
 cursor: hand pointer;
 }

#SECNAV
{

/* kann so bleiben */

[…]
}

 #SECNAV A,
 #SECNAV A:LINK,
 #SECNAV A:VISITED {
 font-weight: normal;
 padding-bottom: 5px;
 color: #000000;
 }
 #SECNAV A:HOVER,
 #SECNAV A:FOCUS,
 #SECNAV A:ACTIVE, {
 font-weight: bold;
 color: #FF0000;
 }

Allerdings sehe ich ^dabei^ noch das Problem, dass bei Proprotionalschriften „der Link springt“, da ja die Fettschrift weiter läuft als die Normale. (Ich weiß nicht, ob/wie Du das im HTML behandelt hast, etwa mit „.hnav“? – Bei Bedarf könnte ich mal Zuhause nachschauen, wie ich das gelöst hatte… oder Du suchst DrWeb.de nach „Button-Navi’s“ ab.)

Nun sag’ ich 'mal: HTH &

CU DannyFox64

#5

Hi, nochmal, Jens!

das Problem ist…es hat schon mal funktioniert…ich weiß nur
nicht was ich rückgängig machen muss.

Ja, in der Tat. Z.B. der IE 6.0 von 2003/2004 funktionierte „noch toll“. Dann spielte ich die SP’s ein, und Wunder!, auf einmal wollte er’s anders.

Desdewesche* tu isch jezz immer dess CSS uff’em IE mache, unn dann für’n Firefox obdimiere, gell?! So geht dess nähmlisch guud. :wink:

sih ju DannyFox64

* Hessisch-in-Deutsch: deswegen

#6

aler schwede! =)

scho erst IE (90% der welt benutzt IE) dann der Rest

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

#7

Hey Danny,

Ich empfehle Dir, den HTML-Code im #SECNAV so anzupassen, dass
Du auf die Klasse „hnav“ verzichten kannst. Das macht viiieles
einfacher! :wink:

leider kann ich auf die klasse nicht verzichten :-\ bzw ich wüsste nicht wie ich es anders lösen sollte.

cursor: hand pointer;

thx, ganau das hab ich gesucht!

Allerdings sehe ich ^dabei^ noch das Problem, dass bei
Proprotionalschriften „der Link springt“, da ja die
Fettschrift weiter läuft als die Normale. (Ich weiß nicht,
ob/wie Du das im HTML behandelt hast, etwa mit „.hnav“? – Bei
Bedarf könnte ich mal Zuhause nachschauen, wie ich das gelöst
hatte… oder Du suchst DrWeb.de nach „Button-Navi’s“ ab.)

wenn es dafür ne nette lösung gibt, wär dir sehr verbunden, wenn du die morgen noch mal posten könntest.

Nun sag’ ich 'mal: HTH &

CU DannyFox64

Hab vielen danke, schaut nämlich soweit ganz gut aus :smile:

Schön abend noch,

Grüße,
Jens

#8

Hi, Jens,

mit der zusätzl. Klasse: ich schau daheim noch mal in meinen gesammelten Werken nach. Hatte mir schon x ein/zwei geniale Lösungen gebastelt.

Allerdings sehe ich ^dabei^ noch das Problem, dass bei
Proprotionalschriften „der Link springt“, da ja die
Fettschrift weiter läuft als die Normale. (Ich weiß nicht,
ob/wie Du das im HTML behandelt hast, etwa mit „.hnav“? – Bei
Bedarf könnte ich mal Zuhause nachschauen, wie ich das gelöst
hatte… oder Du suchst DrWeb.de nach „Button-Navi’s“ ab.)

wenn es dafür ne nette lösung gibt, wär dir sehr verbunden,
wenn du die morgen noch mal posten könntest.

Tja, aber morgen? Ich würde sagen eher Ende der Woche. Ggf. schick’ ich’s Dir auch per E-Mail.

Grüße & CU DannyFox64

#9

Hi, Jens!

Bin erst jetzt 'mal wieder „online“.

Ich empfehle Dir, den HTML-Code im #SECNAV so anzupassen, dass
Du auf die Klasse „hnav“ verzichten kannst. Das macht viiieles
einfacher! :wink:

leider kann ich auf die klasse nicht verzichten :-\ bzw ich
wüsste nicht wie ich es anders lösen sollte.
[…]

Allerdings sehe ich ^dabei^ noch das Problem, dass bei
Proprotionalschriften „der Link springt“, da ja die
Fettschrift weiter läuft als die Normale. […]

wenn es dafür ne nette lösung gibt, wär dir sehr verbunden,
wenn du die morgen noch mal posten könntest.

Bin mir nicht ganz sicher, wie sicher das bei Dir funzen wird. Ich sende Dir (siehe Posteingang) 3 Zip-Files per E-Mail mit Erklärung.

CU DannyFox64

PS: Schade, dass Deine Site z.Zt. „down ist“. (Solltest aber zumindest ein „revisit-after“ für die Spider verfügen…)