komplettes background image als link

[Kruemael]

Hallo.

Ich habe gerade versucht eine Homepage mit CSS zu gestalten. es sind meine ersten alleinigen Anfänge seit ich am Wochenende die v2b CSS angeschaut habe. In dieser DVD wird angegeben wie man suchmaschienen-freundliche Grafiken einbaut, und zwar wie folgt:

  
.navibox        {  
                color:              blue;  
                background-color:   inherit;  
                width:              205px;  
                height:             100px;  
                background-repeat:  no-repeat;  
                }  
  
.navibox span   {  
                visibility:         hidden;  
                }  
  
#home           {  
                background-image:   url(home.jpg);  
                }  
  
#news           {  
                background-image:   url(news.jpg);  
                }  
  
usw...

und:

  
<div class="navibox" id="home">  
    <a href="index.html"><span>Home</span></a>  
   </div>  
   <div class="navibox" id="news">  
    <a href="news.html"><span>News</span></a>  
   </div>

jetzt habe ich das Problem, dass ich den Link nur an der Stelle aktivieren könnte, an der die Schrift stehen würde. Ich möchte aber die ganze Fläche von 205x105px als link haben.

Wie kann ich das verwirklichen, ohne dass ich die Bilder direkt in den HTML-Code setze? (ich möchte mehrere Styles verwenden und daher sollten die bilder über CSS eingebunden werden, da es sich um buttons in der Navigationsleiste handelt.)

Danke schon mal im vorraus, vorallem dafür dass ihr euch meinen Roman durchgelesen habt ^^

Krümäl

[Steel]

Moin!

jetzt habe ich das Problem, dass ich den Link nur an der Stelle aktivieren könnte, an der die Schrift stehen würde. Ich möchte aber die ganze Fläche von 205x105px als link haben.

So. Du weißt also, wie Groß das Element ist.

Wie kann ich das verwirklichen, ohne dass ich die Bilder direkt in den HTML-Code setze? (ich möchte mehrere Styles verwenden und daher sollten die bilder über CSS eingebunden werden, da es sich um buttons in der Navigationsleiste handelt.)

Dann weißt Du auch, wie groß das Linkelement sein sollte, wenn es das umgebende Element ausfüllen soll. Du kannst auch ganz dezent auf die umgebenden DIVs verzichten und den Hintergrund in die Links einsetzen. Solltest Du sogar. Die Links dafür eventuell in eine Liste.

[Krümäl]

Moin!

jetzt habe ich das Problem, dass ich den Link nur an der Stelle aktivieren könnte, an der die Schrift stehen würde. Ich möchte aber die ganze Fläche von 205x105px als link haben.

So. Du weißt also, wie Groß das Element ist.

Wie kann ich das verwirklichen, ohne dass ich die Bilder direkt in den HTML-Code setze? (ich möchte mehrere Styles verwenden und daher sollten die bilder über CSS eingebunden werden, da es sich um buttons in der Navigationsleiste handelt.)

Dann weißt Du auch, wie groß das Linkelement sein sollte, wenn es das umgebende Element ausfüllen soll. Du kannst auch ganz dezent auf die umgebenden DIVs verzichten und den Hintergrund in die Links einsetzen. Solltest Du sogar. Die Links dafür eventuell in eine Liste.

hmm ok ich hab jetzt mal versucht die background-images in die links einzusetzen, aber irgendwie zeigt es bei mir nichts an. ich hab es mal auf nen hoster gelegt damit ihr es auch ansehen könnt:

http://hlc.pytalhost.com

ich habe es auch wie folgt umgearbeitet:

  
.navibox        {  
                color:              blue;  
                background-color:   inherit;  
                width:              205px;  
                height:             100px;  
                background-repeat:  no-repeat;  
                }  
  
.navibox span   {  
                width:              204px;  
                height:             104px;  
                visibility:         hidden;  
                }  
  
#home           {  
                background-image:   url(bhome.jpg);  
                }  
  
#news           {  
                background-image:   url(bnews.jpg);  
                }  
  
#spieler        {  
                background-image:   url(bspieler.jpg)  
                }  
  
#forum          {  
                background-image:   url(bforum.jpg)  
                }  
  
#kontakt        {  
                background-image:   url(bkontakt.jpg)  
                }

  
<div id="navileiste">  
  
    <a href="index.html" class="navibox" id="home"><span>Home</span></a>  
  
  
    <a href="news.html" class="navibox" id="news"><span>News</span></a>  
  
  
    <a href="spieler.html" class="navibox" id="spieler"><span>Spieler</span></a>  
  
  
    <a href="http://www.guildwarsunited.de" target="_blank" class="navibox" id="forum"><span>Forum</span></a>  
  
  
    <a href="kontakt.html" class="navibox" id="kontakt"><span>Kontakt</span></a>  
  
  </div>

war das so gedacht, wie du mir geschildert hast? Wie gesagt, leider geht des nicht, weil keine backgroundbilder angezeigt werden und die Links jetzt direkt untereinander stehen aber unsichtbar sind.

lg
Krümäl

PS: die beiden Rahmen sind nur zur Übersicht beim Entwickeln da, rot ist die Navigationsleiste und Grün dann der Inhalt.

[Beat]

http://hlc.pytalhost.com

.navibox span   {
                width:              204px;
                height:             104px;
                visibility:         hidden;
                }

Ein Element, dem du die Eigenschaften width und height zuweisen willst, musst du einen display Typ zuweisen, der ihm ein Block-Kontext gibt.
Also für das span Element in deiner Navigation zum Beispiel:
display:block.

mfg Beat

[Cheatah]

Hi,

ich habe es auch wie folgt umgearbeitet:

der Tipp von Steel war leider nur bedingt zielführend.

<div id="navileiste">
    <a href="index.html" class="navibox" id="home"><span>Home</span></a>
    <a href="news.html" class="navibox" id="news"><span>News</span></a>

[...]

</div>

  
Du hast eine Liste von Links. Was liegt näher, als dafür zunächst einmal eine Liste zu notieren? Da die Reihenfolge nicht wirklich von Belang ist, bietet sich ein <ul> an.  
  
\*Keines\* der Listenpunkte benötigt eine Klasse. Sie \*alle\* sind bereits dadurch als Navigations-Items (oder -Boxen) erkennbar, dass sie Listenpunkte innerhalb des Navigationsbereiches sind. Lediglich für die Kennzeichnung des aktiven Listenpunktes kann eine Klasse sinnvoll sein.  
  
Cheatah  

-- 
X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|  
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html  
X-Will-Answer-Email: No  
X-Please-Search-Archive-First: Absolutely Yes

[Gunnar Bittersmann]

@@Cheatah:

nuqneH

Lediglich für die Kennzeichnung des aktiven Listenpunktes kann eine Klasse sinnvoll sein.

Eher nicht.

Es ist sinnvoll, den aktuellen Listenpunkt nicht zu verlinken. (Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien [Nielsen])

Die '@id' sind dann besser im 'li'-Element (falls erforderlich). Und wozu das 'span'-Element?

Der Code für den aktuellen Listenpunkt „News“:

<ul id="navileiste">  
  <li id="home"><a href="index.html">Home</a></li>  
  <li id="news">News</li>  
  <li id="spieler"><a href="spieler.html">Spieler</a></li>  
  <li id="forum"><a href="http://www.guildwarsunited.de" target="_blank">Forum</a></li>  
  <li id="kontakt"><a href="kontakt.html">Kontakt</a></li>  
</ul>

Dann braucht man keine Klasse; die Selektoren '#navileiste li' und '#navileiste li a' sollten genügen.

'@target'??

“Don't pollute my screen with any more windows, thanks […]” (Top Ten Mistakes in Web Design, Punkt 9 [Nielsen]) S.a. Diskussion im Thread Internetseitenlink im neuen Fenster öffnen

Qapla'

[Krümäl]

ok ich hab jetzt die Schriften einfach so groß gemacht, dass sie die kompletten kästchen ausfüllen, und somit geht des. Leider ist das nich die Lösung, die ich mir vorgestellt habe und würd mich noch über jeden Vorschlag freuen.

MfG

Krümäl

PS: Wer sich des Problem mit kleiner Schrift und auch schon die Vorschläge bis jetzt eingearbeitet anschauen will findet es auf:

http://hlc.pytalhost.com/old2/index.html

und die CSS-Datei dazu:

http://hlc.pytalhost.com/old2/styles/blackblue/blackblue.css

[Detlef G.]

Hallo Krümäl

http://hlc.pytalhost.com/old2/styles/blackblue/blackblue.css

.navibox span   {  
                width:              204px; /* Breiten- und */  
                height:             104px; /* Höhenangaben wirken nicht bei Inlineelementen. */  
                visibility:         hidden;  
                /* Deshalb machen wir einen Block daraus. */  
                display:block;  
                }

Auf Wiederlesen
Detlef