Link-Bild ganz anzeigen

[Manuel]

Hi Leute

Ich will einen Link mit 3 Bildern verknüpfen.

Eines wenn der Link noch nicht gedrückt ist eines wenn man mit der Maus drüberfährt und einen wenn der Link besucht wurde.

Das erledigt folgendes:

<style type="text/css">

a.news:link { color:#797979; padding-left:40px; background:url(newsticker_thumb1.png) no-repeat 0%;}

a.news:visited { color:#797979; padding-left:40px; background:url(newsticker_thumb2.png) no-repeat 0%;}

a.news:hover { font-weight:bold; color:#0000cc; padding-left:40px;  background:url(newsticker_thumb3.png) no-repeat 0%;}

</style>

Die Bilder sind alle 32x32 oder 48x48 Pixel groß.

Leider werden die Bilder abgeschnitten und sind nur so groß wie die Schriftgröße.

bsp:

Abgeschnittener BILDTEIL
------------------------------------
(Sichtbarer BILDTEIL)  SCHRIFTGRÖßE
------------------------------------
Abgeschnittener BILDTEIL

Ich will die Schriftgröße aber nicht verändern.

Ist es Möglich die Bilder in ihrer vollen Größe an zu zeigen und die Schriftgröße nicht zu verändern. Die Verknüpfung mit den verschiedene Stadien soll natürlich erhalten bleiben.

Thx for Help

Manuel

[Ashura]

Hallo Manuel.

Ist es Möglich die Bilder in ihrer vollen Größe an zu zeigen und die Schriftgröße nicht zu verändern. Die Verknüpfung mit den verschiedene Stadien soll natürlich erhalten bleiben.

Verpasse den betroffenen a-Elementen ein http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display@title=display:block, woraufhin du die (http://de.selfhtml.org/css/eigenschaften/positionierung.htm#min_height@title=min-)http://de.selfhtml.org/css/eigenschaften/positionierung.htm#height@title=height-Eigenschaft mit der Höhe der Grafiken setzen kannst.

Einen schönen Donnerstag noch.

Gruß, Ashura

[manuel]

Verpasse den betroffenen a-Elementen ein http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display@title=display:block, woraufhin du die (http://de.selfhtml.org/css/eigenschaften/positionierung.htm#min_height@title=min-)http://de.selfhtml.org/css/eigenschaften/positionierung.htm#height@title=height-Eigenschaft mit der Höhe der Grafiken setzen kannst.

Danke für deine Hilfe!! Aber nun habe ich das Problem das die Grafik nach unten rutscht. Ich möchte aber das nihct mit sub's lösen. Gibt es noch eine andere Möglichkeit?

Einen schönen Donnerstag noch.

Danke gleichfalls

Gruß, Ashura

Thx in advance

Manuel

[Hopsel]

Hi manuel!

Aber nun habe ich das Problem das die Grafik nach unten rutscht.

Dann positioniere sie doch entsprechend.

Ich möchte aber das nihct mit sub's lösen.

Was ist das denn?

Gibt es noch eine andere Möglichkeit?

Du musst nur die Links genau so groß machen wie die Hintergrundgrafiken bzw. wie du es haben möchtest.

MfG H☼psel

[manuel]

Dann positioniere sie doch entsprechend.

Wie denn ?

Der Code sieht doch so aus:

a.news:link { color:#797979; display:block; height:32px; padding-left:40px; background:url(newsticker_thumb1.png) no-repeat 0%;}

Wie soll man da was positionieren? die 32 Px ist die Grösse des Bildes und die schrift ist dann oben bündig aber center oder bottom wär besser.

Ich möchte aber das nihct mit sub's lösen.

Was ist das denn?

Text tieferstellen aber geht leider nicht.

Gibt es noch eine andere Möglichkeit?

Du musst nur die Links genau so groß machen wie die Hintergrundgrafiken bzw. wie du es haben möchtest.

Ich möchte aber an der Schriftgröße nix ändern.

MfG H☼psel

Manuel

[Hopsel]

Hi manuel!

Du fragst:

Wie soll man da was positionieren?

und sagst:

die 32 Px ist die Grösse des Bildes und die schrift ist dann oben bündig aber center oder bottom wär besser.

Aber wo ist das Problem?
Zentriere die Schrift doch. -.-

Text tieferstellen aber geht leider nicht.

Das wäre ja auch totaler Quatsch.

Ich möchte aber an der Schriftgröße nix ändern.

Sollst du ja auch nicht. Du sollst nur den Link so groß wie das Bild machen. Nicht a.news:link [...], sondern a.news [...]. Die spezifischen Bilder kannst du dann über die Pseudoklassen einbinden.

Du solltest nochmal genau beschreiben, wo dein Problem ist.

MfG H☼psel

[Manuel]

Sollst du ja auch nicht. Du sollst nur den Link so groß wie das Bild machen. Nicht a.news:link [...], sondern a.news [...]. Die spezifischen Bilder kannst du dann über die Pseudoklassen einbinden.

Danke jetz hab ich verstanden was du meinst. Geht auch jetz alles wunderbar.

Du solltest nochmal genau beschreiben, wo dein Problem ist.

Es gibt jetz nur noch ein kleines uns zwar:

Ist der Link auf der ganzen Seite anklickbar und nicht nur dort wo der Test steht.

BSP:

-------------------------------------
Linkbild Linktext | Dieser bereich ist leider auch klickbar
-------------------------------------

Was ist da faul?

Ich hab schon verscuh mit maxwidh etwas zu erreichen hat aber nicht geholfen.

Danke für deine Hilfe

MfG H☼psel

MfG

Manuel

[Ashura]

Hallo Manuel.

Ist der Link auf der ganzen Seite anklickbar und nicht nur dort wo der Test steht.

BSP:

---

Linkbild Linktext | Dieser bereich ist leider auch klickbar

Was ist da faul?

Wie sieht der HTML der betroffenen Stelle aus?
(Bitte mit umliegendem Elternelement.)

Einen schönen Freitag noch.

Gruß, Ashura

[Hopsel]

Hi Ashura!

Wie sieht der HTML der betroffenen Stelle aus?
(Bitte mit umliegendem Elternelement.)

Diese Frage kann ich dir beantworten.

Manuel hat einen Link:
<a href="..." title="...">Linkleinchen</a>

Sein CSS sieht so aus:

a {  
display:block;  
height:...;  
width:...;  
}

Und jetzt wundert er sich, dass der Link überall anklickbar ist und nicht nur dort, wo Text steht.

AFAIK gibt es aber keine Abhilfe dagegen. Er muss also damit klar kommen.

MfG H☼psel

[Ashura]

Hallo Hopsel.

Wie sieht der HTML der betroffenen Stelle aus?
(Bitte mit umliegendem Elternelement.)

Diese Frage kann ich dir beantworten.

Weshalb dies?

Manuel hat einen Link:
<a href="..." title="...">Linkleinchen</a>

Sein CSS sieht so aus:

a {

display:block;
height:...;
width:...;
}

  
\_Exakt\_ so?  
  

> Und jetzt wundert er sich, dass der Link überall anklickbar ist und nicht nur dort, wo Text steht.  
>   
> AFAIK gibt es aber keine Abhilfe dagegen. Er muss also damit klar kommen.  
  
Wie wäre es, einfach einen gültigen Wert für width zu setzen?  
  
  
Einen schönen Freitag noch.  
  
Gruß, Ashura  

-- 
[The End of an Era...](http://www.nightwish.com/english/lettertotarjaen.html)

[Hopsel]

Hi Ashura!

Diese Frage kann ich dir beantworten.
Weshalb dies?

Ich bin allwissend.

_Exakt_ so?

Hundertprozentig!!!!Eins

Wie wäre es, einfach einen gültigen Wert für width zu setzen?

Du bist ´ne Nudel.

;-)

MfG H☼psel

[Ashura]

Hallo Hopsel.

Diese Frage kann ich dir beantworten.

Weshalb dies?

Ich bin allwissend.

Wie wäre es, einfach einen gültigen Wert für width zu setzen?

Du bist ´ne Nudel.

Dann bin ich ebenfalls allwissend.

Einen schönen Freitag noch.

Gruß, Ashura

[Manuel]

Hallo Manuel.

Hallo  Ashura

Wie sieht der HTML der betroffenen Stelle aus?
(Bitte mit umliegendem Elternelement.)

Im Head steht:

<style type="text/css">

a.me:link { display:block; height:30px; font-size:1.1em; color:#797979; padding-left:40px; padding-top:10px; background:url(uebermich_thumb_grau.png) no-repeat 0%;}

a.me:visited { display:block; height:30px; font-size:1.1em; color:#797979; padding-left:40px;  padding-top:10px; background:url(uebermich_thumb_grau.png) no-repeat 0%;}

a.me:hover { display:block; height:30px; font-size:1.1em; font-weight:bold; color:#ff6c00; padding-left:40px; padding-top:10px; background:url(uebermich_thumb.png) no-repeat 0%;}

</style>

Im Body steht:

<div border="0" align="left"> <a  class="me" href="meinereiner.html"> Wer bin ich ??? </a><p>Wer bin ich denn überhaupt und was mache ich so ... </p></div>

Ich habe schon einen width Wert in die CSS Gruppe eingefügt das hat aber nix gebracht.

Einen schönen Freitag noch.

Dir auch und herzlichen Dank

Gruß, Ashura

MfG

Manuel

[Ashura]

Hallo Manuel.

a.me:link { display:block; height:30px; font-size:1.1em; color:#797979; padding-left:40px; padding-top:10px; background:url(uebermich_thumb_grau.png) no-repeat 0%;}

a.me:visited { display:block; height:30px; font-size:1.1em; color:#797979; padding-left:40px;  padding-top:10px; background:url(uebermich_thumb_grau.png) no-repeat 0%;}

a.me:hover { display:block; height:30px; font-size:1.1em; font-weight:bold; color:#ff6c00; padding-left:40px; padding-top:10px; background:url(uebermich_thumb.png) no-repeat 0%;}

Deine Styleangaben sind stark redundant.

Lege die allgemeingültigen Angaben doch einfach für a.me fest, diese bleiben damit in allen anderen Stati verfügbar. Abweichende Angaben tätigst du dann nur im jeweiligen Status.
Also stark verkürzt:

a.me {  
  display:block;  
  height:30px;  
  font-size:1.1em;  
  color:#797979;  
  padding-left:40px;  
  padding-top:10px;  
  background:url(uebermich_thumb_grau.png) no-repeat 0%;  
}  
  
a.me:hover {  
  font-weight:bold;  
  color:#ff6c00;  
}

<div border="0" align="left">

Diese Styleangaben solltest du ebenfalls ins CSS packen.

<a  class="me" href="meinereiner.html"> Wer bin ich ??? </a><p>Wer bin ich denn überhaupt und was mache ich so ... </p></div>

Ich habe schon einen width Wert in die CSS Gruppe eingefügt das hat aber nix gebracht.

Bist du dir sicher?

Füge einmal in dein Stylesheet folgende Regel ein:

* {  
  border: 1px solid #f00;  
}

Damit siehst du die genauen Ausmaße jedes einzelnen Elementes.

Fügst du nun dem a-Element, welches der Klasse „me“ zugeordnet wurde, eine width-Angabe hinzu, siehst du, dass sich die Breite wie gewünscht verringert.
Willst du nun, dass der Inhalt auch neben dem a-Element platziert werden kann, dann lässt du das a-Element einfach http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float@title=floaten.

Aber im Grunde ist dies alles gar nicht erforderlich, da der Effekt, den du hier anstrebst auch wunderbar mit padding allein erzielt werden kann. Hierzu musst du das a-Element nicht einmal in ein Blockelement umwandeln.

Soll der Text neben dem a-Element erscheinen, ist aber stets float erforderlich, da das p-Element von Haus aus als Blockelement dargestellt wird.

Einen schönen Samstag noch.

Gruß, Ashura