Link für Hintergrundbild - ganze Zelle / Tabelle

mark2 · Beitrag von **mark2** » 10.04.2007 01:20

Wie kann ich dem Hintergrundbild "head.jpg" in dem Code unten einen Link zur Foren Index zuweisen?

<table width="98%" cellspacing="0" border="0" cellpadding="0" align="center">
  <tr>

    <td class="bodyline" background="templates/DustyGreen/images/head.jpg" valign="top">
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td background="templates/DustyGreen/images/forum-new2-top-left.jpg" width="26" height="163">
            <div align="center"></div>
          </td>
          <td height="163" background="templates/DustyGreen/images/forum-new2-top-fill.gif" valign="bottom">
            <div align="center"><img src="templates/DustyGreen/images/trans.gif" width="10" height="10"></div>
          </td>
          <td background="templates/DustyGreen/images/forum-new2-top-center.gif" width="256" height="163">
            <div align="center"></div>
          </td>
          <td height="163" background="templates/DustyGreen/images/forum-new2-top-fill.gif" valign="bottom">
            <div align="center"><img src="templates/DustyGreen/images/trans.gif" width="10" height="10"></div>
          </td>
          <td height="163" background="templates/DustyGreen/images/forum-new2-top-right.jpg" width="26">
            <div align="center"></div>
          </td>
        </tr>
      </table>

silaz · Beitrag von **silaz** » 10.04.2007 02:22

Du kannst keinem hintergrund bild einen Link zuweisen,
eine möglichkeit wäre es ein leeresbild (spacer) über den hintergrundzulegen und diesen Zuverlinken.

mark2 · Beitrag von **mark2** » 10.04.2007 18:33

ok und wie geht das?
Kann man nicht der gesamten Zelle für die das Hintergrundbild gilt einen Link zuweisen. Das Problem ist nur das die <td Anweisung erst weiter unten geschlossen wird

silaz · Beitrag von **silaz** » 10.04.2007 18:50

Mal abgesehen davon das ich nicht weis wieso du das machen möchtest, hier mal etwas wie es aussehen würde mit spacer.gif (spacer.gif 1x1px großes Tranzparentes gif)

Code: Alles auswählen

<table width="98%" cellspacing="0" border="0" cellpadding="0" align="center">
  <tr>

    <td class="bodyline" background="templates/DustyGreen/images/head.jpg" valign="top">
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td background="templates/DustyGreen/images/forum-new2-top-left.jpg" width="26" height="163">
            <div align="center"><a href="http://ww.deinlink.de"><img src="spacer.gif" width="26" height="163"></a></div>          </td>
          <td height="163" background="templates/DustyGreen/images/forum-new2-top-fill.gif" valign="bottom">
            <div align="center"><a href="http://ww.deinlink.de"><img src="templates/DustyGreen/images/trans.gif" width="10" height="10"></a></div>          </td>
          <td background="templates/DustyGreen/images/forum-new2-top-center.gif" width="256" height="163">
            <div align="center"><a href="http://ww.deinlink.de"><a href="http://ww.deinlink.de"><img src="spacer.gif" width="26" height="163"></a></a></div>          </td>
          <td height="163" background="templates/DustyGreen/images/forum-new2-top-fill.gif" valign="bottom">
            <div align="center"><a href="http://ww.deinlink.de"><img src="templates/DustyGreen/images/trans.gif" width="10" height="10"></a></div>          </td>
          <td height="163" background="templates/DustyGreen/images/forum-new2-top-right.jpg" width="26">
            <div align="center"><a href="http://ww.deinlink.de"><a href="http://ww.deinlink.de"><img src="spacer.gif" width="26" height="163"></a></a></div>          </td>
        </tr>
      </table>

Alles in allem macht es keinen sinn ^^

Beitrag von **S2B** » 10.04.2007 19:30

Du könntest es auch so versuchen:

Code: Alles auswählen

<a href="index.php" style="display: block; height: <Höhe des Bildes>px; background-image: url(<Bilddatei>)">&nbsp;</a>

Edit: Falls das nicht funktioniert, das geht auf jeden Fall:

Code: Alles auswählen

a#header_link {
	position: absolute;
	top: 0;
	left: 0;
	height: 230px;
	width: 100%;
	z-index: 2;
	text-decoration: none
}

mark2 · Beitrag von **mark2** » 12.04.2007 19:16

Erstmal Danke für die Hilfe.
Aber.
Wieso soll das keinen Sinn machen?

Bei dem code handelt es sich um den Header des Styles DustyGreen.
Jedes Template hat oben links ein Bild das einen Link zur Forenindex hat.
Der Style DustyGreen hat das leider nicht da der Header anders aufgebaut ist. Deswegen möchte ich das gerne nachrüsten.
So sieht der Header original aus.
http://mark2.ma.funpic.de/Bilder/dustygreen_org.jpg

Beim ersten code erhalte ich dieses Ergebnis.
http://mark2.ma.funpic.de/Bilder/dustygreen_ver1.jpg

Und beim zweiten code sieh es so aus.
http://mark2.ma.funpic.de/Bilder/dustygreen_ver2.jpg

Mit dem dritten code komm ich nicht klar. Das kann nicht in die overall_header.tpl gehören. Muß das in die css Datei? Bei dem Style ist css nicht aktiviert

Edit: Große Bilder nur verlinken - Dr.Death

Beitrag von **S2B** » 12.04.2007 19:56

mark2 hat geschrieben:Mit dem dritten code komm ich nicht klar. Das kann nicht in die overall_header.tpl gehören. Muß das in die css Datei? Bei dem Style ist css nicht aktiviert

Du kannst die CSS-Eigenschaften auch per style-Attribut setzen:

Code: Alles auswählen

<a href="index.php" style="position: absolute; top: 0; [...]">&nbsp;</a>

mark2 · Beitrag von **mark2** » 12.04.2007 21:16

Ich habe die Zeile mal einfach an diese Stelle eingebaut. Dadurch ändert sich aber nicht viel. Ich erhalte lediglich ganz oben links einen kleinen Strich der den index Link hat. Von den Bildern im Heat hat keines einen Link bekommen.

Code: Alles auswählen

<table width="98%" cellspacing="0" border="0" cellpadding="0" align="center">
  <tr>

    <td class="bodyline" background="templates/DustyGreen/images/head.jpg" valign="top">
    <a href="index.php" style="position: absolute; top: 0; [...]">&nbsp;</a>
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td background="templates/DustyGreen/images/forum-new2-top-left.jpg" width="26" height="163">
            <div align="center"></div>
          </td>
          <td height="163" background="templates/DustyGreen/images/forum-new2-top-fill.gif" valign="bottom">
            <div align="center"><img src="templates/DustyGreen/images/trans.gif" width="10" height="10"></div>
          </td>
          <td background="templates/DustyGreen/images/forum-new2-top-center.gif" width="256" height="163">
            <div align="center"></div>
          </td>
          <td height="163" background="templates/DustyGreen/images/forum-new2-top-fill.gif" valign="bottom">
            <div align="center"><img src="templates/DustyGreen/images/trans.gif" width="10" height="10"></div>
          </td>
          <td height="163" background="templates/DustyGreen/images/forum-new2-top-right.jpg" width="26">
            <div align="center"></div>
          </td>
        </tr>
      </table>

Weiß nicht wie ich das sonst einbauen soll. Was bedeuten eigentlich die drei Punkte in der eckigen Klammer? Ist das ein Platzhalter der durch etwas ergänzt werden muß?

Beitrag von **Dr.Death** » 12.04.2007 21:20

Große Bilder bitte nur verlinken.

Bitte lies Dir den phpBB.de-Knigge sorgfältig durch. Danke.

Solltest Du Dich ungerecht behandelt fühlen, wende Dich bitte an einen der phpBB.de-Administratoren.

Beitrag von **S2B** » 12.04.2007 21:35

mark2 hat geschrieben:Weiß nicht wie ich das sonst einbauen soll. Was bedeuten eigentlich die drei Punkte in der eckigen Klammer? Ist das ein Platzhalter der durch etwas ergänzt werden muß?

Jep, das ist ein Platzhalter, der durch den Rest der CSS-Eigenschaften ersetzt werden muss, die bei Fall 3 nötig sind.