[GastForen Web allgemein HTML und CSS / Stylesheets Linkeinfärbungen verschieden einstellen

  • Suche
  • Hilfe
  • Lesezeichen
  • Benutzerliste
Themen
Beiträge
Moderatoren
Letzter Beitrag

Linkeinfärbungen verschieden einstellen

den7
Beiträge gesamt: 280

28. Jan 2007, 14:32
Beitrag # 1 von 14
Bewertung:
(3822 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
hallo

ich habe eine Haupt-und eine Subnavigation. Die links in der Hauptnavigation müssen einen blauben "hover" besitzen. Der Link in normalem Zustand und Visited erscheint grau. Dies konnte ich via CSS einrichten. Für die Subnavigation müsste ich jedoch einen weissen "a, Hover, active visited" haben.ich duplizierte somit meine a zu einem .a

Wenn ich nun auf der Seite meine CSS anwählen möchte, erscheint die Auswahl für die Linksetzungen nicht. (.a, .a:visited, .a:hover, a.active)

Was mach ich falsch`?
Gruss
Den7


a { color: gray; text-decoration: none }
a:visited { color: gray }
a:hover { color: #2c94b5 }
a:active { color: gray }
.a { color: white; text-decoration: none }
.a:visited { color: white }
.a:hover { color: white; padding-top: 15px; padding-left: 15px }
.a:active { color: gray }
.fliesstext { color: #666; font-size: 14px; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 26px; padding-top: 15px; padding-left: 15px; left: 0 }
.fliesstext1 { color: #666; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 15px; padding-top: 15px; padding-left: 15px; left: 0 }
.fliesstextschwarz { color: #000; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif }
.fliesstextweiss { color: #fff; font-size: 14px; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 15px; padding-top: 15px; padding-left: 15px; left: 0 }
.navigation { color: #999; font-size: 18px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; line-height: 28px; text-decoration: none }
.grauartwork { background-color: #d5d5d5 }
.inarbeit { color: white; font-size: 14px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; }
.konzept { background-color: #99cc66 }
.weiss { background-color: #fff }
.gruen { background-color: #6FC283 }
.gruena { background-color: #57a771 }
.blau { background-color: #8db1D0 }
.blaua { background-color: #5f90b0 }
.grau { background-color: #a6a6a6 }
.graua { background-color: #7f7f7f }
.textaktiv { color: #2c9ab5; font-family: Verdana, Arial, Helvetica, sans-serif; padding-top: 15px; padding-left: 15px }
.textaktiv1 { color: #2c9ab5; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; padding-top: 15px; padding-bottom: 15px; padding-left: 15px }
X

Linkeinfärbungen verschieden einstellen

SabineP
Beiträge gesamt: 7586

28. Jan 2007, 15:13
Beitrag # 2 von 14
Beitrag ID: #273042
Bewertung:
(3817 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Den,

lies am besten gleich hier nach:
http://www.hilfdirselbst.ch/..._P272992.html#272992
Gruß Sabine


als Antwort auf: [#273037]
(Dieser Beitrag wurde von SabineP am 28. Jan 2007, 15:13 geändert)

Linkeinfärbungen verschieden einstellen

den7
Beiträge gesamt: 280

7. Feb 2007, 20:29
Beitrag # 3 von 14
Beitrag ID: #275050
Bewertung:
(3786 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
hallo Sabine

Nun, danke für deinen Tipp. Ich habe eine 2. klasse angelegt:

a { color: gray; font-size: 14px; font-weight: 500; text-decoration: none; letter-spacing: 3px; padding-left: 15px }
a:visited { color: gray; letter-spacing: 3px; padding-left: 15px }
a:hover { color: #2c94b5; letter-spacing: 3px; padding-left: 15px }
a:active { color: gray; letter-spacing: 3px; padding-left: 15px }
.zweiteklasse:a { color: white; font-size: 14px; text-decoration: none; padding-left: 10px }
.zweiteklase:visited { color: white; padding-left: 10px }
.zweiteklasse:hover { color: white; padding-left: 10px }
.zweiteklasse:active { color: white; padding-left: 10px
.drittklasse:a { color: gray; font-size: 10px; text-decoration: none }

Siehe seite: http://www.konzept-gestaltung.ch/index2.htm
den link www.dfportfolio.ch (unten links) möchte ich gerne mit .drittklasse:a
versehen.

Wenn man auf der Folgeseite ist: http://www.konzept-gestaltung.ch/portfolio/portfolio.htm möchte ich die 3 links corporate
design, spiele und packagin design weiss halten. (.zweiteklasse:a etc.)

kann mir jemand sagen, wieso das nicht funktioniert ??

Gruss
den7


als Antwort auf: [#273042]

Linkeinfärbungen verschieden einstellen

SabineP
Beiträge gesamt: 7586

7. Feb 2007, 23:02
Beitrag # 4 von 14
Beitrag ID: #275068
Bewertung:
(3776 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Den,

versuchs mal so:

.zweiteklasse {color: white; font-size: 14px; text-decoration: none; padding-left: 10px }
.drittklasse { color:gray; font-size: 10px; text-decoration: none }

HTML für weißen Link

<a href="#" class="zweiteklasse">Link</a>

HTML für grauen Link

<a href="#" class="dritteklasse">Link</a>
Gruß Sabine


als Antwort auf: [#275050]
(Dieser Beitrag wurde von SabineP am 7. Feb 2007, 23:02 geändert)

Linkeinfärbungen verschieden einstellen

den7
Beiträge gesamt: 280

9. Feb 2007, 16:39
Beitrag # 5 von 14
Beitrag ID: #275543
Bewertung:
(3759 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
hallo...

wir kommen der Sache schon etwas näher.

Der hover wird jetzt zwar weiss angezeigt. Jedoch sollte der Link im inaktiven Zustand auch weiss sein.

http://www.konzept-gestaltung.ch/portfolio/portfolio.htm

Siehe Link:

corporate
design

Wie setze Ich dazu den Link zentriert im TD ein? Wie muss ich das CSS erweritern?

Danke Euch.
Den


als Antwort auf: [#275068]

Linkeinfärbungen verschieden einstellen

SabineP
Beiträge gesamt: 7586

9. Feb 2007, 17:11
Beitrag # 6 von 14
Beitrag ID: #275553
Bewertung:
(3756 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Den,

>> Jedoch sollte der Link im inaktiven Zustand auch weiss sein.

.zweiteklasse
gibt es immer noch nicht in Deiner CSS-Datei,

denn
.zweiteklasse:a
ist falsch

>> Wie setze Ich dazu den Link zentriert im TD ein?

<td align="center">
Gruß Sabine


als Antwort auf: [#275543]

Linkeinfärbungen verschieden einstellen

den7
Beiträge gesamt: 280

9. Feb 2007, 22:16
Beitrag # 7 von 14
Beitrag ID: #275583
Bewertung:
(3743 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Sabine

Danke für dein Durhaltevermögen :-)

Nun, das hatte ich auch schon versucht. ich habe sie noch einmal mit "zweiteklasse" gesetzt.

Sie mal
http://www.konzept-gestaltung.ch/portfolio/portfolio.htm

Der Link erscheint leider immer noch nicht von anfang an weiss.

Gruss
Den


als Antwort auf: [#275553]

Linkeinfärbungen verschieden einstellen

SabineP
Beiträge gesamt: 7586

10. Feb 2007, 23:32
Beitrag # 8 von 14
Beitrag ID: #275646
Bewertung:
(3725 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Den,

überprüfe mal diesen Code:

<a href="corporatedesign/portfolio.htm" class="zweiteklasse" "corporatedesign/portfolio.htm"="corporatedesign/portfolio.htm">corporate <br/> design</a>

Was soll das sein?
"corporatedesign/portfolio.htm"="corporatedesign/portfolio.htm"

Gruß Sabine


als Antwort auf: [#275583]

Linkeinfärbungen verschieden einstellen

den7
Beiträge gesamt: 280

13. Feb 2007, 09:25
Beitrag # 9 von 14
Beitrag ID: #275939
Bewertung:
(3683 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Sabine

Das heisst also, dass der richtige Code wie folgt lauten würde:
<a href="corporatedesign/portfolio.htm" class="zweiteklasse" >corporate <br/> design</a> Ist dies richtig?

Ich habe hier noch weitere Stiel Fragen.

Bei der Navigation mit den Aufzählungen home /portfolio / netzwerk / profil erscheint beim Normal Link nicht Verdana, sondern Times. Wieso wird hier das CSS nicht gelesen?

Auf der Netzwerk Seite http://www.konzept-gestaltung.ch/netzwerk.htm
werden die links mit einem Textabstand gelesen und haben einen linken Einzug (padding) Diesen Abstand hatte ich früher einmal via CSS gesteuert, jedoch habe ich diesen dann im CSS gelöscht. Leider wird dieser Abstand immer noch angezeigt sowie der Zeichenabstand. Wieso werden diese Befehle weiterhin angezeigt, obwohl das css diese Funktionen nicht mehr enthält?

Auch möchte ich das Bild mit dem grauen und blauen viereck am unteren Rand bündig ansetzen. Ich habe Das bild auf 200x200 px vergrössert. Diese Grösse ist identisch mit der Zellengrösse. Jedoch entsteht dieser untere Rand dazu. Wie krieg ich diesen Rand weg?

Die Seite sollte auf dem PC internet Explorer sowie auf dem Mac Safari identisch sein. Meine ersten Tests auf dem Mac waren jedoch erschreckend anders!! gibt es vielleicht unter selfhtml eine Seite die beschreibt, was für punkte zu beachten sind?..sonstige Tips vielleicht dazu? etc..

Vielen Dank für das Feedback!!!

Gruess
Den


als Antwort auf: [#275646]

Linkeinfärbungen verschieden einstellen

SabineP
Beiträge gesamt: 7586

13. Feb 2007, 16:48
Beitrag # 10 von 14
Beitrag ID: #276122
Bewertung:
(3669 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
>> <a href="corporatedesign/portfolio.htm" class="zweiteklasse" >corporate <br/> design</a>

Ja, das ist richtig.

>> home /portfolio / netzwerk / profil erscheint beim Normal Link nicht Verdana

Dann schaumal in Deine CSS-Datei, für diese Elemente hast Du keine Schrift festgelegt:

a
a:visited
a:hover
a:active

Gruß Sabine


als Antwort auf: [#275939]

Linkeinfärbungen verschieden einstellen

den7
Beiträge gesamt: 280

14. Feb 2007, 00:05
Beitrag # 11 von 14
Beitrag ID: #276186
Bewertung:
(3654 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
ich habe die klasse nun wie folgt under der Seite:
http://www.konzept-gestaltung.ch/portfolio/portfolio.htm

gesetzt:
<p><a href="corporatedesign/portfolio.htm" class="zweiteklasse">corporate</a> <br/>
<a href="corporatedesign/portfolio.htm" class="zweiteklasse">design</a></p>

Ich muss die wörter einzeln mit der Klassifizierung setzen, das ansonsten das "design" nicht den gleichen Zellenabstand hat wie "corporate.

Die Einfärbung auf weiss klappt immer noch nicht!! was mach ich falsch?????

Dazu unter nezwerk http://www.konzept-gestaltung.ch/netzwerk.htm werden die Links mit Letterspacing gezeigt. AUch ist noch dieser hässliche "Padding left" ersichtlich, obwohl dies nicht im CSS integriert ist.

Die Schriftenangaben habe ich korrigiert. Danke für die Hilfe.

Den


als Antwort auf: [#276122]

Linkeinfärbungen verschieden einstellen

SabineP
Beiträge gesamt: 7586

14. Feb 2007, 00:48
Beitrag # 12 von 14
Beitrag ID: #276187
Bewertung:
(3652 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Den,

>> Die Einfärbung auf weiss klappt immer noch nicht!! was mach ich falsch?????

Du hast für alle <a> Elemente grau festgelegt: color: gray

a { color: gray; font-size: 14px; font-family: Verdana, Geneva; text-decoration: none; letter-spacing: 3px; padding-left: 15px }
a:visited { color: gray; font-size: 14px; font-family: Verdana, Geneva; letter-spacing: 3px; padding-left: 15px }
a:hover { color: #2c94b5; font-family: Verdana, Geneva; letter-spacing: 3px; padding-left: 15px }
a:active { color: gray; font-family: Verdana, Geneva; letter-spacing: 3px; padding-left: 15px }

Ersetze diese Zeilen durch:

a {text-decoration: none;}

>> http://www.konzept-gestaltung.ch/netzwerk.htm werden die Links mit Letterspacing gezeigt.

Das hast Du für alle <a> Elemente festgelegt: letter-spacing: 3px; padding-left: 15px

a { color: gray; font-size: 14px; font-family: Verdana, Geneva; text-decoration: none; letter-spacing: 3px; padding-left: 15px }
a:visited { color: gray; font-size: 14px; font-family: Verdana, Geneva; letter-spacing: 3px; padding-left: 15px }
a:hover { color: #2c94b5; font-family: Verdana, Geneva; letter-spacing: 3px; padding-left: 15px }
a:active { color: gray; font-family: Verdana, Geneva; letter-spacing: 3px; padding-left: 15px }

Lege am besten für

a
a:visited
a:hover
a:active

immer nur solche CSS-Eigenschaften an, die für alle Links gelten sollen.
Gruß Sabine


als Antwort auf: [#276186]

Linkeinfärbungen verschieden einstellen

den7
Beiträge gesamt: 280

19. Feb 2007, 23:06
Beitrag # 13 von 14
Beitrag ID: #277303
Bewertung:
(3577 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
ich habe nun die Korrekturen vorgenommen:

http://www.konzept-gestaltung.ch/index2.htm

jedoch erscheint immer noch der Link im normalen Zustand blau. Er sollte jedoch grau eingefärbt und NICHT UNTERSTRICHEN erscheinen. (siehe Link [email protected])

Was ist falsch??

.ersteklasse { color: gray; font-size: 14px; font-family: Verdana, Geneva; text-decoration: none; letter-spacing: 3px; padding-left: 15px }
.ersteklasse:visited { color: gray; font-size: 14px; font-family: Verdana, Geneva; text-decoration: none; letter-spacing: 3px; padding-left: 15px }
.ersteklasse:hover { color: #2c94b5; font-family: Verdana, Geneva; text-decoration: none; letter-spacing: 3px; padding-left: 15px }
.ersteklase:active { color: gray; font-family: Verdana, Geneva; text-decoration: none; letter-spacing: 3px; padding-left: 15px }
.zweiteklasse { color: white; font-size: 14px; font-family: Verdana, Geneva; text-decoration: none; letter-spacing: 3px; padding-left: 10px }
.zweiteklase:visited { color: white; font-size: 14px; font-family: Verdana, Geneva; text-decoration: none; letter-spacing: 3px; padding-left: 10px }
.zweiteklasse:hover { color: white; font-size: 14px; font-family: Verdana, Geneva; text-decoration: none; letter-spacing: 3px; padding-left: 10px }
.zweiteklasse:active { color: white; font-size: 14px; font-family: Verdana, Geneva; text-decoration: none; letter-spacing: 3px; padding-left: 10px }
.dritteklasse { color: gray; font-size: 9px; font-family: Verdana, Geneva; text-decoration: none }
.vierteklasse { color: gray; font-size: 11px; font-family: Verdana, Geneva; line-height: 16px; text-decoration: none; padding-left: 15px }
.vierteklasse:hover { color: #2c94b5; font-size: 11px; font-family: Verdana, Geneva; line-height: 16px; text-decoration: none; padding-left: 15px }
.vierteklasse:visited { color: gray; font-size: 11px; font-family: Verdana, Geneva; line-height: 16px; text-decoration: none; padding-left: 15px }
.vierteklasse:active { color: gray; font-family: Verdana, Geneva; line-height: 16px; text-decoration: none; padding-left: 15px }
.fuenfteklasse { color: gray; font-size: 11px; font-family: Verdana, Geneva; text-decoration: none }
.fuenfteklasse:hover { color: #2c94b5; font-size: 11px; font-family: Verdana, Geneva; text-decoration: none }
.fuenfteklasse:visited { color: gray; font-size: 11px; font-family: Verdana, Geneva; text-decoration: none }
.fuenfteklasse:active { color: gray; font-size: 11px; font-family: Verdana, Geneva; text-decoration: none }


als Antwort auf: [#276187]

Linkeinfärbungen verschieden einstellen

SabineP
Beiträge gesamt: 7586

19. Feb 2007, 23:47
Beitrag # 14 von 14
Beitrag ID: #277306
Bewertung:
(3572 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Meinst Du diesen Link?

<a href="mailto:[email protected]">
<span class="fuenfteklasse">[email protected]</span></a>

So sollte es klappen:

<a href="mailto:[email protected]" class="fuenfteklasse">
[email protected]</a>


Gruß Sabine


als Antwort auf: [#277303]
X

Veranstaltungskalender

Hier können Sie Ihre Anlässe eintragen, welche einen Zusammenhang mit den Angeboten von HilfDirSelbst.ch wie z.B. Adobe InDesign, Photoshop, Illustrator, PDF, Pitstop, Affinity, Marketing, SEO, Büro- und Rechtsthemen etc. haben. Die Einträge werden moderiert freigeschaltet. Dies wird werktags üblicherweise innert 24 Stunden erfolgen.

pdf-icon Hier eine kleine Anleitung hinsichtlich Bedeutung der auszufüllenden Formularfelder.

Veranstaltungen
08.11.2022

Frankfurt, Fraport Conference Center
Dienstag, 08. Nov. 2022, 13.30 - 18.00 Uhr

Seminar

Auf der Enfocus World Tour stellen wir Ihnen gemeinsam mit Enfocus die aktuellen Highlights von Enfocus Switch und dem Impressed Workflow Server (IWS) vor. Wir präsentieren Ihnen anhand typischer Aufgabenstellungen in einem modernen Produktionsbetrieb die Möglichkeiten, die Enfocus Switch für die Automatisierung und Standardisierung von Abläufen bietet. Wir haben sowohl für Produktionsverantwortliche als auch technisch Interessierte ein spannendes Programm vorbereitet, bei dem Sie sicherlich viel Neues erfahren werden, welches Sie in Ihrem eigenen Betrieb umsetzen können. Die Veranstaltung bietet darüber hinaus eine hervorragende Möglichkeit, sich mit anderen Anwendern und Workflow-Spezialisten auszutauschen und Antworten auf konkrete Aufgabenstellungen zu erhalten, welche Sie mit Hilfe von Enfocus Switch/IWS umsetzen möchten.

Wir sind jeweils an 2 Tagen in Frankfurt, Hamburg und München vor Ort. Der erste (halbe) Tag richtet sich in erster Linie an Betriebsleiter und Produktionsverantwortliche in Druckereien - ist also weniger technisch orientiert - sondern gibt einen Überblick zu den heutigen Möglichkeiten einer automatisierten Produktion.

Der zweite Tag (Switch Anwender-Treffen) richtet sich an bestehende Switch-Anwender und Administratoren.

Anmeldung und weitere Infos: https://www.impressed.de/schulung.php?c=sDetail&sid=310

Ja

Organisator: Enfocus/Impressed

Kontaktinformation: Silvia Noack, E-Mailsnoack AT impressed DOT de

https://www.impressed.de/schulung.php?c=sDetail&sid=310

Enfocus World Tour 2022
Veranstaltungen
08.11.2022

Frankfurt, Fraport Conference Center
Dienstag, 08. Nov. 2022, 13.30 - 18.00 Uhr

Seminar

Auf der Enfocus World Tour stellen wir Ihnen gemeinsam mit Enfocus die aktuellen Highlights von Enfocus Switch und dem Impressed Workflow Server (IWS) vor. Wir präsentieren Ihnen anhand typischer Aufgabenstellungen in einem modernen Produktionsbetrieb die Möglichkeiten, die Enfocus Switch für die Automatisierung und Standardisierung von Abläufen bietet. Wir haben sowohl für Produktionsverantwortliche als auch technisch Interessierte ein spannendes Programm vorbereitet, bei dem Sie sicherlich viel Neues erfahren werden, welches Sie in Ihrem eigenen Betrieb umsetzen können. Die Veranstaltung bietet darüber hinaus eine hervorragende Möglichkeit, sich mit anderen Anwendern und Workflow-Spezialisten auszutauschen und Antworten auf konkrete Aufgabenstellungen zu erhalten, welche Sie mit Hilfe von Enfocus Switch/IWS umsetzen möchten.

Wir sind jeweils an 2 Tagen in Frankfurt, Hamburg und München vor Ort. Der erste (halbe) Tag richtet sich in erster Linie an Betriebsleiter und Produktionsverantwortliche in Druckereien - ist also weniger technisch orientiert - sondern gibt einen Überblick zu den heutigen Möglichkeiten einer automatisierten Produktion.

Der zweite Tag (Switch Anwender-Treffen) richtet sich an bestehende Switch-Anwender und Administratoren.

Anmeldung und weitere Infos: https://www.impressed.de/schulung.php?c=sDetail&sid=310

Ja

Organisator: Enfocus/Impressed

Kontaktinformation: Silvia Noack, E-Mailsnoack AT impressed DOT de

https://www.impressed.de/schulung.php?c=sDetail&sid=310

Enfocus World Tour 2022