Mathias: Abstand zwischen Links zu gross

SELF-Forum

Abstand zwischen Links zu gross

Mathias
– Informationen zu den Bewertungsregeln

Hallo zusammen,
Mein Problem sieht folgendermassen aus:
http://img374.imageshack.us/img374/7785/problemlo1.jpg
Der Abstand zwischen den einzelnen "<p>-boxen" sollte eigentlich nur 3px betragen. Mein HTML/CSS-code dazu sieht so aus:

<link rel="stylesheet" type="text/css" href="css.css" />  
</head>  
  
<body background="images/pattern.gif">  
<div id="outertb">  
 <div id="banner"><img src="images/chibibanner.gif" alt="Chibisuke-Scans"/></div>  
 <table class="maintb" cellpadding="0" cellspacing="0">  
  <tr><td class="menu_column">  
   <table class="menu" cellpadding="0" cellspacing="0">  
    <tr><td><a href="ahd"><p>home</p></a><a href="ahd"><p>home</p></a><a href="ahd"><p>home</p></a><a href="ahd"><p>home</p></a><a href="ahd"><p>home</p></a><a href="ahd"><p>home</p></a>  
    </td></tr></table></td>  
   <td class="content">ökljölj</td></tr>  
 </table>  
 <div id="footer"></div>  
</div>  
</body>

.menu { width:180px;  
  height:95px;  
  margin:15px auto auto auto;  
  padding:0px 0px 0px 0px;  
  background-color:;  
  border:none;  
  vertical-align:top;  
}  
  
  
p { text-align:left;  
 height:20px;  
 width:180px;  
 background-color:#666666;  
 vertical-align:top;  
}  
  
a p:hover { background-color:#999999;  
}

wäre cool wenn ihr mir helfen könnt.
Gruss, Mathias

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Abstand zwischen Links zu gross

    Beat Homepage des Autors
    +2 Informationen zu den Bewertungsregeln

    Mein Problem sieht folgendermassen aus:
    http://img374.imageshack.us/img374/7785/problemlo1.jpg
    Der Abstand zwischen den einzelnen "<p>-boxen" sollte eigentlich nur 3px betragen. Mein HTML/CSS-code dazu sieht so aus:

    <link rel="stylesheet" type="text/css" href="css.css" />

    </head>

    <body background="images/pattern.gif">
    <div id="outertb">
    <div id="banner"><img src="images/chibibanner.gif" alt="Chibisuke-Scans"/></div>
    <table class="maintb" cellpadding="0" cellspacing="0">
      <tr><td class="menu_column">
       <table class="menu" cellpadding="0" cellspacing="0">
        <tr><td><a href="ahd"><p>home</p></a><a href="ahd"><p>home</p></a><a href="ahd"><p>home</p></a><a href="ahd"><p>home</p></a><a href="ahd"><p>home</p></a><a href="ahd"><p>home</p></a>
        </td></tr></table></td>
       <td class="content">ökljölj</td></tr>
    </table>
    <div id="footer"></div>
    </div>
    </body>

      
Zu diesem Code möchte ich bemerken, dass du eine Layout-Tabelle in einer Layout-Tabelle verwendest.  
Damit ist praktisch garantiert, dass du die Übersicht verlieren wirst.  
Auch finde ich dass eine Liste besser wäre, um dein menu darzustellen. Formal handelt es sich auch um eine Liste.  
  
Dann versuchst du, in ein <a> Element ein <p> Element hineinzustellen. Das ist dir aber laut HTML 4.01 nicht erlaubt.  
  
Ich würde dir folgenden Code für das menu vorschlagen:  
  
~~~html
  
<ul id="navigation">  
  <li><a href="ahd">home</a></li>  
  ...  
</ul>

    wobei das css folgende Einträge erhält

    #navigation {margin:0; padding: 0; list-style:none; }  
#navigation li { margin: 3px 0;} /* hier deine Formatierung */  
#navigation a {display:block; } /* hier deine Formatierung */  
#navigation a:hover {background-color:#666; } /* hier deine Formatierung */

    display:block für <a> wird dann bewirken, dass der Link die ganze Breite des <li> Elements einnimmt.

    mfg Beat

    --
    Woran ich arbeite:
    X-Torah
    ><o(((°>        ><o(((°>
       <°)))o><                      ><o(((°>o
    Beitrag melden
    +2
    Informationen zu den Bewertungsregeln

    1. Abstand zwischen Links zu gross

      Mathias
      – Informationen zu den Bewertungsregeln

      Danke vielmals. Werds gleich mal ausprobieren und schreiben wie's geklappt hat.
      Übrigens, falls das mit der Tabelle in der Tabelle wieder mal vorkommen sollte, wie würdest du das lösen? Mit nem div-tag?

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Abstand zwischen Links zu gross

        Beat Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Danke vielmals. Werds gleich mal ausprobieren und schreiben wie's geklappt hat.
        Übrigens, falls das mit der Tabelle in der Tabelle wieder mal vorkommen sollte, wie würdest du das lösen? Mit nem div-tag?

        Weil CSS uns nicht wirklich eine Struktur für einfaches globales Layout verleiht, halte ich es offen, ob man eine Layouttabelle oder Floatelemente verwendet.

        Wichtiger ist, dass der Code übersichtlich bleibt, und daraus darfst du schliessen, dass eine Layouttabelle in einer Layouttabelle wohl nicht mehr gut ist.

        Oftmals sieht man nicht, dass man vor einer Liste steht, und zwingt es in eine Tabelle.
        Es gibt das <dl> Element (Definitionsliste). Es ist geeignet für alles vom Typ
        Parameter1: Wert1
        Parameter2: Wert2

        Aber es wird viel zu selten verwendet.

        Es gilt einfach, den bestehenden Vorrat an HTML Elementen richtig und sinnvoll zu nutzen, und dabei nicht zuerst die scheinbare visuelle Darstellung durch das Browser-Stylesheet als Kriterium zu nehmen.

        Es gibt mehr sinnvolle Elemente. Lerne sie kennen.

        mfg Beat

        --
        Woran ich arbeite:
        X-Torah
        ><o(((°>       ><o(((°>
           <°)))o><                      ><o(((°>o
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Abstand zwischen Links zu gross

          Mathias
          – Informationen zu den Bewertungsregeln

          Danke! Deine Antworten sind echt hilfreich.
          Das mit der Navigation hat prima geklappt.
          Noch ne gute Nacht.
          mfg, Mathias

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln