Links mit CSS nicht vollständig formatierbar ?

[Marcus Hammel]

Hallo,

Folgender Code liegt vor:

<div class="tage">
<h4>12.05.2005</h4>
<div> <a href="xy">xy</a></div>
<div> <a href="xx">xx</a></div>

<h4>11.05.2005</h4>
<div> <a href="xz">xz</a></div>
</div>

Nun möchte ich folgendes umsetzen:
Besuchte Links sollen unauffällig gestaltet sein. Die Links, die noch nicht besucht wurden, sollen mit voller(!) Bildschrimbreite eine Hintergrundfarbe erhalten.

So sieht der Code zunächst aus:
DIV.tage A:link {
    color: #587058 !important;
    background-color:#FFDDDD !important;
    min-width:100% !important;
}
DIV.tage A:hover {
    color: #FFCC33 !important;
}
DIV.tage A:visited {
    color: #003399 !important;
}
DIV.tage DIV {
    margin-left: 1em !important;
    margin-bottom: 0.3em !important;
    color: #CC0000 !important;
}
DIV.tage H4 {
    /* 7-Tage-News | Datum | Abstand */
    margin-bottom: 0.2em !important;
    color: #707070 !important;
}

Leider wird bei dem A:link nur der Hintergrund in der Breite eingefügt, den der Link an Platz braucht. Die Hintergrundfarbe wird leider NICHT vollständig in der Breite umgesetzt.

Könntet ihr mir bitte einen Denkanstoß zur Lösung dieser kleinen Sache geben?

MfG,
Marcus Hammel

[Ole]

hi

Könntet ihr mir bitte einen Denkanstoß zur Lösung dieser kleinen Sache geben?

mach mittels "display" aus dem inline-element "a" ein block-element :)

so long
Ole
(8-)>

[Martin Hölter]

Hi!

DIV.tage A:link {
    color: #587058 !important;
    background-color:#FFDDDD !important;
    min-width:100% !important;
}
DIV.tage A:hover { }
DIV.tage A:visited { }
DIV.tage DIV { }
DIV.tage H4 { }

Leider wird bei dem A:link nur der Hintergrund in der Breite eingefügt, den der Link an Platz braucht. Die Hintergrundfarbe wird leider NICHT vollständig in der Breite umgesetzt.

a ist ein inline-Element - also setze [code lang=css]div.tage a {display:block;}

Ausserdem versteht der Internet Explorer kein min-width (eine Breitenangabe von 100% ist bei display:block auch unnötig). Desweiteren sollten Linkformatierung in der Reihenfolge a:link, a:visited, a:active, a:hover, a:focus angegeben werden, damit man immer das gewünschte Ergebnis erhält

Könntet ihr mir bitte einen Denkanstoß zur Lösung dieser kleinen Sache geben?

MfG,
Marcus Hammel

[MudGuard]

Hi,

Desweiteren sollten Linkformatierung in der Reihenfolge a:link, a:visited, a:active, a:hover, a:focus angegeben werden, damit man immer das gewünschte Ergebnis erhält

Hm - Du willst keinen :hover-Effekt, wenn der Link den :focus hat?
Und bei Aktivierung per Maus willst Du keinen :active-Effekt?

Ich finde die Reihenfolge :link, :visited, :focus, :hover, :active besser.

cu,
Andreas

[Martin Hölter]

Hi,

a:link, a:visited, a:active, a:hover, a:focus

Ich finde die Reihenfolge :link, :visited, :focus, :hover, :active besser.

Habe gerade mal nachgeschaut, ich verwende momentan a:link, a:visited, a:hover, a:active, a:focus, so wie es auch bei SelfHTML empfohlen ist.
Bei mir kommt es aber nicht drauf an, ich nutze eh für hover, active und focus dieselbe Regel.

Gruß

Martin

[Ingo Turski]

Hi,

a:link, a:visited, a:active, a:hover, a:focus

Ich finde die Reihenfolge :link, :visited, :focus, :hover, :active besser.

Habe gerade mal nachgeschaut, ich verwende momentan a:link, a:visited, a:hover, a:active, a:focus, so wie es auch bei SelfHTML empfohlen ist.

hmm... ich denke, als »meist gewünschte Darstellung dieser Pseudoklassen« sollte wirklich Andreas' Reihenfolge empfohlen und der Maussteuerung Vorrang vor der Tastatursteuerung eingeräumt werden, oder? Denn bei einer konkurrierenden Darstellung (Maus befindet sich über einem Link, der  mittels Tastatur angesteuert wird/wurde) gibt es ja immerhin noch die browserseitige Umrahmung des Links.

freundliche Grüße
Ingo

[wahsaga]

hi,

Ausserdem versteht der Internet Explorer kein min-width (eine Breitenangabe von 100% ist bei display:block auch unnötig).

doch, gerade im IE kann diese notwendig sein - weil er sonst bspw. :hover nur auslöst, wenn man direkt über den (text-)inhalt des links fährt.
soll :hover aber schon bei überfahren der gesamten linkfläche ausgelöst werden, will der IE zusätzlich zu display:block auch noch ein width:100%.

gruß,
wahsaga

[Martin Hölter]

Hi!

Ausserdem versteht der Internet Explorer kein min-width (eine Breitenangabe von 100% ist bei display:block auch unnötig).

doch, gerade im IE kann diese notwendig sein - weil er sonst bspw. :hover nur auslöst, wenn man direkt über den (text-)inhalt des links fährt.
soll :hover aber schon bei überfahren der gesamten linkfläche ausgelöst werden, will der IE zusätzlich zu display:block auch noch ein width:100%.

Um welchen IE geht es? Bei meiner Sparkassen-Seite habe ich in der Hauptnavigation nur folgende Angaben und sowohl der 5.01, 5.5 und 6 hovern auf der kompletten Fläche:

#mainnav a  /*Links im Navigationscontainer*/  
  {display:block;  /* werden als Block-Elemente angezeigt, somit gehen Sie ueber die gesamte Breite des Elternelements (also des Navigationscontainers)*/  
  background-color:#AAA;  
  text-transform:uppercase; /*Grossbuchstaben*/  
  font-weight:bolder;  
  padding:0 0 0.1em 0.8em;  
  text-decoration:none;  
  line-height:1.4em;}

Gruß

Martin

[Maz]

Moinsen,

Links sind inline-Elemente, keine Blockelemente. Daher musst Du Dich entweder mit diesen Eigenschaften beschäftigen und entsprechendes zuweisen (Stichwort "display:block") oder den Hintergrund dem Element zuweisen in dem der Link steht.

[Marcus Hammel]

Vielen lieben Dank, an die Sache mit den Block-Element habe ich gar nicht gedacht.
Nochmals mein Dank!

MfG