Link und Hover als Box?

[Katharina]

Hallo Ihr lieben!

Ich muss einen Link machen, habe aber nur ganz wenig Ahnung von CSS und ich brauche ein bestimmtes Aussehen (für den Link, haha!)
Ihr werdet darüber lachen, ist sicher super einfach:

--------------
-            -
-    Link    -
-            -
--------------

So soll das in etwa sein, eine weisse Box um den Link und wenn man über die Box geht, wird es eine graue Box und die Linkfarbe geht von schwarz auf weiss. Dabei soll die ganze Box als Link fungieren, nicht nur der Text.

Wie mache ich sowas?
Schönes Wochenende und gute Erholung,
Kati

[Ashura]

Hallo Katharina.

So soll das in etwa sein, eine weisse Box um den Link und wenn man über die Box geht, wird es eine graue Box und die Linkfarbe geht von schwarz auf weiss.

Hierfür brauchst du http://de.selfhtml.org/css/eigenschaften/rahmen.htm#border@title=border, http://de.selfhtml.org/css/eigenschaften/schrift.htm#color@title=color und die verschiedenen http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_focus_hover_active@title=Pseudoklassen.

Dabei soll die ganze Box als Link fungieren, nicht nur der Text.

Mit der http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display@title=display-Eigenschaft kannst du das a-Element optisch zu einem Blockelement machen. Für den IE bedarf es dann noch zusätzlich eines http://de.selfhtml.org/css/eigenschaften/positionierung.htm#width@title=width:100%.

Schönes Wochenende und gute Erholung,

Danke, ebenfalls.

Und einen schönen Freitag noch.

Gruß, Ashura

[Der Martin]

Hallo Ashura,

Mit der http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display@title=display-Eigenschaft kannst du das a-Element optisch zu einem Blockelement machen. Für den IE bedarf es dann noch zusätzlich eines http://de.selfhtml.org/css/eigenschaften/positionierung.htm#width@title=width:100%.

Nö. ;-)
In einem Projekt, das ich aktuell bearbeite, habe ich in der Navigationsliste stehen:

ul#topnavi a
 { display: block;
   padding: 0.5em;
   border: 3px outset #9999FF;
   color: #FFFF00;
   background-color:#369ACE;
 }

Und das genügt: Die gesamte Box wirkt als Link (bisher getestet: IE5.5, IE6.0, FF1.0x, Op7.23). Oder meintest du _noch ältere_ IEs?

Schönen Abend noch,
 Martin

[Ashura]

Hallo Martin.

Für den IE bedarf es dann noch zusätzlich eines http://de.selfhtml.org/css/eigenschaften/positionierung.htm#width@title=width:100%.

Nö. ;-)

Sicher?

Einen schönen Freitag noch.

Gruß, Ashura

[Der Martin]

Hallo,

Für den IE bedarf es dann noch zusätzlich eines http://de.selfhtml.org/css/eigenschaften/positionierung.htm#width@title=width:100%.
Nö. ;-)
Sicher?

Fast sicher. Ich hab meine Seite noch nicht so weit, dass ich sie als Gegenbeispiel verlinken möchte. ;-)

Ich sehe zwar, dass du einen passenden Gegenbeweis hast, finde jetzt aber nicht den entscheidenden Unterschied zwischen meinem Code und deinem Gegenbeispiel - außer dass du XHTML verwendest, ich dagegen HTML Strict. Anyway, der Praxistest bestätigt bei mir: Die gesamte Box hovert, die gesamte Box ist klick-sensitiv. Und bei mir hat auch nur das ul-Element eine feste Breite (8em), das a-Element dagegen gar keine Breitenangabe.

So long,
 Martin

[Ashura]

Hallo Martin.

Ich hab meine Seite noch nicht so weit, dass ich sie als Gegenbeispiel verlinken möchte. ;-)

Aber du weißt doch: Code auf ein Minimum zur Nachvollziehbarkeit reduzieren und hochladen.

Ich sehe zwar, dass du einen passenden Gegenbeweis hast, finde jetzt aber nicht den entscheidenden Unterschied zwischen meinem Code und deinem Gegenbeispiel - außer dass du XHTML verwendest, ich dagegen HTML Strict.

Wir verwenden beide Strict, einen Unterschied sollte es dahin gehend nicht geben. (Der Quirksmodus sollte auch nicht in Kraft treten.)

Anyway, der Praxistest bestätigt bei mir: Die gesamte Box hovert, die gesamte Box ist klick-sensitiv. Und bei mir hat auch nur das ul-Element eine feste Breite (8em), das a-Element dagegen gar keine Breitenangabe.

Da wäre ich in der Tat an einer Live-Demo interessiert.
Bisher war es *immer* so, dass der IE (egal, welche Version) zusätzlich zum display:block noch das völlig überflüssige width:100% benötigte, um Blockelemente mit der Eigenschaft versehen zu können, die sie sowieso schon haben sollten: das Einnehmen der gesamtem zur Verfügung stehenden Breite.

Einen schönen Freitag noch.

Gruß, Ashura

[Der Martin]

Hi Ashura,

Aber du weißt doch: Code auf ein Minimum zur Nachvollziehbarkeit reduzieren und hochladen.

na gut, dann reduziere ich mal meinen eigentlich dynamische PHP-basierten Ansatz auf einen statischen Snapshot, bei dem natürlich die Links ins elektronische Nirwana verweisen (aber das ist ja für den Effekt egal).

Wir verwenden beide Strict, einen Unterschied sollte es dahin gehend nicht geben. (Der Quirksmodus sollte auch nicht in Kraft treten.)

Zumal der IE5.5 sowas nicht einmal kennt. :-)

Da wäre ich in der Tat an einer Live-Demo interessiert.

Bitte sehr!

Bisher war es *immer* so, dass der IE (egal, welche Version) zusätzlich zum display:block noch das völlig überflüssige width:100% benötigte, um Blockelemente mit der Eigenschaft versehen zu können, die sie sowieso schon haben sollten: das Einnehmen der gesamtem zur Verfügung stehenden Breite.

Diese Eigenheit ist mir noch nie bewusst aufgefallen - habe ich vielleicht immer Randbedingungen gehabt, in denen diese Schwäche nicht auftrat?

Schönen Abend noch,
 Martin

[Ashura]

Hallo Martin.

Da wäre ich in der Tat an einer Live-Demo interessiert.

Bitte sehr!

Ich habe die (zugegebenermaßen etwas unsinnigen) „Verursacher“ gefunden, die dafür sorgen, dass die volle Breite auch ohne width:100% eingenommen wird:

ul#topnavi {  
  position:absolute;  
  overflow: auto;  
}

Kommentiere diese beiden Regeln einmal aus und du siehst, wie der IE die Links normalerweise anzeigt.

Diese Eigenheit ist mir noch nie bewusst aufgefallen - habe ich vielleicht immer Randbedingungen gehabt, in denen diese Schwäche nicht auftrat?

Du bist auf irgend eine Eigenheit gestoßen; ob es ein weiterer Bug ist, oder was auch immer, weiß ich nicht.

BTW, was hat es hiermit auf sich?

* html th,* html td  
 { fffont-size: 80%;  
 }

Ein Hack im Hack oder einfach nur vertippt?

Einen schönen Freitag noch.

Gruß, Ashura

[Der Martin]

n'Abend,

Ich habe die (zugegebenermaßen etwas unsinnigen) „Verursacher“ gefunden, die dafür sorgen, dass die volle Breite auch ohne width:100% eingenommen wird:

ul#topnavi {

position:absolute;
  overflow: auto;
}

>   
> Kommentiere diese beiden Regeln einmal aus und du siehst, wie der IE die Links normalerweise anzeigt.  
  
aaah ja. Interessant... ;-)  
  

> BTW, was hat es hiermit auf sich?  
>   
> ~~~css

* html th,* html td  

>  { fffont-size: 80%;  
>  }

Ein Hack im Hack oder einfach nur vertippt?

Nein, der einzige, der hier einen Hack hatte, bin ich selbst: Ich wollte einfach eine Regel probehalber schnell mal unwirksam machen, ohne sie gleich ganz zu löschen. Ich weiß, auch im CSS kann man mit /* xxx */ Kommentare setzen - aber so war es einfacher, schließlich hat ein Browser unbekannte CSS-Eigenschaften zu ignorieren. *g*

Ciao,
 Martin