mariusylo: Bilder als Link innerhalb einer Zelle Abstand nach oben&unten

SELF-Forum

Bilder als Link innerhalb einer Zelle Abstand nach oben&unten

mariusylo
– Informationen zu den Bewertungsregeln

Hallo!

Ich, blutiger Anfänger der von nichts eine Ahnung hat, versucht eine Homepage zu basteln. Bin eigentlich fertig, habe allerdings noch ein Problem. ich habe in meiner Navigation Bilder als Links untereinander innerhalb einer Zelle. Die Bilder haben allerdings einen Abstand zueinander, allerdings nicht zur Seite, nur nach unten und oben. Dieser Abstand zählt komischerweise immernoch als Link und dieses Problem tritt bei Mozilla und IE auf, bei Opera ist die Seite perfekt. Ich habe schon überall border="0" und cellpadding/spacing="0". Was tun?

Das Problem bei Mozilla
Und beim Internet Explorer

Hier der Quelltext (ich weiß, dass er schlecht und unvollständig ist). Ich hoffe ihr könnt mir sagen, was ich daran machen muss, damit das funktioniert.

<html>
  <head>
   <title>Foto Video AS</title>
   <link rel="SHORTCUT ICON" href="imgs/asico.ico">
  </head>
 <body bgcolor=""E7DBBC">
<style type="text/css">
html, body {
  margin:0;
  padding:0;
}
div {
  border: 0px solid #000000;
  background-color: #E7DBBC;
}
</style>
   <table border="0" cellpadding="0" cellspacing="0">
    <tr border="0">
     <td background="imgs/top.jpg" border="0">
      <img src="imgs/px.gif" width=1394 height=227 border="0"><img src="imgs/start_h.jpg" width=1 height=1 border="0"><img src="imgs/gals_h.jpg" width=1 height=1 border="0"><img

src="imgs/videos_h.jpg" width=1 height=1 border="0"><img src="imgs/kontaktm_h.jpg" width=1 height=1 border="0"><img src="imgs/about_h.jpg" width=1 height=1 border="0"><img src="imgs/links_h.jpg"

width=1 height=1 border="0">
     </td>
    </tr>
   </table>
   <table cellpadding="0" cellspacing="0" border="0">
    <tr border="0">
     <td background="imgs/hki_left.jpg" border="0">
      <img src="imgs/px.gif" width=916 height=82 ALT="AS" border="0">
     </td>
     <td background="imgs/home_n.jpg" border="0">
      <a href="index.html" border="0">
<div>
       <img src="imgs/home_n.jpg"
       onmouseover="this.src='imgs/home_h.jpg'"
       onmouseout="this.src='imgs/home_n.jpg'" border="0">
</div>
      </a>
     </td>
     <td background="imgs/kontakt_n.jpg" border="0">
      <a href="kontakt.html" border="0">
<div>
       <img src="imgs/kontakt_n.jpg"
       onmouseover="this.src='imgs/kontakt_h.jpg'"
       onmouseout="this.src='imgs/kontakt_n.jpg'" border="0">
</div>
      </a>
     </td>
     <td background="imgs/impressum_n.jpg" border="0">
      <a href="impressum.html" border="0">
<div>
       <img src="imgs/impressum_n.jpg"
       onmouseover="this.src='imgs/impressum_h.jpg'"
       onmouseout="this.src='imgs/impressum_n.jpg'" border="0">
</div>
      </a>
     </td>
     <td background="imgs/hki_right.jpg" border="0">
      <img src="imgs/px.gif" width="248" height="82" border="0">
     </td>
    </tr>
   </table>
   <table cellpadding="0" cellspacing="0" border="0">
    <tr>
     <td background="imgs/content_left.jpg" border="0">
      <img src="imgs/px.gif" width=251 height=691 border="0">
     </td>
     <td background="imgs/content.jpg" border="0" valign="top" width="640">
      <img src="imgs/line_home.jpg" ALT="Herzlich Willkommen bei Foto Video AS" border="0">
       <br>
        <font size="-1" face="Verdana, Tahoma, Century Gothic, Century" color="989898"><i>

<br>Text
        </i></font>
     </td>
     <td background="imgs/menu_top.jpg" border="0" width=258 height=26 valign="top">
      <img src="imgs/menu_top.jpg" border="0">
       <br>
      <a href="index.html">
       <img src="imgs/start_n.jpg"
       onmouseover="this.src='imgs/start_h.jpg'"
       onmouseout="this.src='imgs/start_n.jpg'" border="0">
      </a>
       <br>
      <a href="galerien.html">
       <img src="imgs/gals_n.jpg"
       onmouseover="this.src='imgs/gals_h.jpg'"
       onmouseout="this.src='imgs/gals_n.jpg'" border="0">
      </a>
       <br>
      <a href="videos.html">
       <img src="imgs/videos_n.jpg"
       onmouseover="this.src='imgs/videos_h.jpg'"
       onmouseout="this.src='imgs/videos_n.jpg'" border="0">
      </a>
       <br>
      <a href="kontakt.html">
       <img src="imgs/kontaktm_n.jpg"
       onmouseover="this.src='imgs/kontaktm_h.jpg'"
       onmouseout="this.src='imgs/kontaktm_n.jpg'" border="0">
      </a>
       <br>
      <a href="about.html">
       <img src="imgs/about_n.jpg"
       onmouseover="this.src='imgs/about_h.jpg'"
       onmouseout="this.src='imgs/about_n.jpg'" border="0">
      </a>
       <br>
      <a href="links.html">
       <img src="imgs/links_n.jpg"
       onmouseover="this.src='imgs/links_h.jpg'"
       onmouseout="this.src='imgs/links_n.jpg'" border="0">
      </a>
       <br>
      <img src="imgs/menu_bottom.jpg" border="0"></a>
     </td>
     <td background="imgs/menu_right.jpg" border="0">
      <img src="imgs/px.gif" width=251 height=691 border="0">
     </td>
    <tr>
   </table>
 </body>
</html>

Danke im Voraus

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Bilder als Link innerhalb einer Zelle Abstand nach oben&unten

    ChrisB
    – Informationen zu den Bewertungsregeln

    Hi,

    ich habe in meiner Navigation Bilder als Links untereinander innerhalb einer Zelle.

    Worin du sie haben *solltest*, ist eine Liste.
    Gerade, wenn du jetzt erst anfängst, solltest du dir gar nicht erst angewöhnen, Tabellen zu Layoutzwecken zu missbrauchen.

    Die Bilder haben allerdings einen Abstand zueinander, allerdings nicht zur Seite, nur nach unten und oben.

    Stichwort: Unterlängen.

    display:block oder vertical-align helfen.

    MfG ChrisB

    --
    RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Bilder als Link innerhalb einer Zelle Abstand nach oben&unten

      mariusylo
      – Informationen zu den Bewertungsregeln

      Mmh... wie mache ich denn eine Liste? Kann ich ein Beispeil haben für Bilder? Und weder display:block noch vertical-align helfen... Und falls ich es noch nicht geschrieben haben sollte: Das Problem besteht bei Opera komischerweise nicht... Und neben den Banner habe ich eine mini Navi mit drei Bildern nebeneinander, die haben bei IE auch einen Abstand nach oben und unten, beim Mozilla aber nicht (wie man auf den Screens sieht)

      Grüße

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Bilder als Link innerhalb einer Zelle Abstand nach oben&unten

        Gunnar Bittersmann Homepage des Autors
        – Informationen zu den Bewertungsregeln

        @@mariusylo:

        nuqneH

        Mmh... wie mache ich denn eine Liste?

        http://de.selfhtml.org/html/text/listen.htm@title=So. Etwas genauer: http://de.selfhtml.org/css/layouts/navigationsleisten.htm@title=So.

        Und weder display:block noch vertical-align helfen...

        Worauf hast du sie angewandt? Und was haben deine Recherchen zum Thema Unterlänge ergeben?

        Qapla'

        --
        Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
        (Mark Twain)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

  2. Bilder als Link innerhalb einer Zelle Abstand nach oben&unten

    Der Martin
    – Informationen zu den Bewertungsregeln

    Hi,

    <body bgcolor=""E7DBBC">

    da ist wohl was schiefgelaufen.

    <img src="imgs/px.gif" width=1394 height=227 border="0"><img src="imgs/start_h.jpg" width=1 height=1 border="0"><img src="imgs/gals_h.jpg" width=1 height=1 border="0">

    Warum hast du die Attribute hier teils ordentlich in Anführungszeichen, teils ohne?

    <a href="index.html" border="0">
    <div>
           <img src="imgs/home_n.jpg"
           onmouseover="this.src='imgs/home_h.jpg'"
           onmouseout="this.src='imgs/home_n.jpg'" border="0">
    </div>
          </a>

    Das ist ungültiges HTML. Ein a-Element darf keine Blockelemente (wie div) enthalten. Zumal das div hier völlig überflüssig ist, denn dessen Formatierung könntest du ebensogut dem a-Element zuweisen.

    <font size="-1" face="Verdana, Tahoma, Century Gothic, Century" color="989898"><i>
             <br>Text
            </i></font>

    Was soll das verstaubte font-Element hier? Dafür gibt's doch CSS.

    So long,
     Martin

    --
    Ich bin im Prüfungsstress, ich darf Scheiße sagen.
      (Hopsel)
    Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Bilder als Link innerhalb einer Zelle Abstand nach oben&unten

      Gunnar Bittersmann Homepage des Autors
      – Informationen zu den Bewertungsregeln

      @@Der Martin:

      nuqneH

      <img src="imgs/px.gif" width=1394 height=227 border="0"><img src="imgs/start_h.jpg" width=1 height=1 border="0"><img src="imgs/gals_h.jpg" width=1 height=1 border="0">

      Warum hast du die Attribute hier teils ordentlich in Anführungszeichen, teils ohne?

      Stimmt, bei 'border="0"' könnte man sie schließlich weglassen. ;-) [HTML401 §3.2.2]

      Ein a-Element darf keine Blockelemente (wie div) enthalten.

      <♫>“The times, they are a-changin’.”</♫>

      Qapla'

      --
      Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
      (Mark Twain)
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln