Yahoo Clever wird am 4. Mai 2021 (Eastern Time, Zeitzone US-Ostküste) eingestellt. Ab dem 20. April 2021 (Eastern Time) ist die Website von Yahoo Clever nur noch im reinen Lesemodus verfügbar. Andere Yahoo Produkte oder Dienste oder Ihr Yahoo Account sind von diesen Änderungen nicht betroffen. Auf dieser Hilfeseite finden Sie weitere Informationen zur Einstellung von Yahoo Clever und dazu, wie Sie Ihre Daten herunterladen.

Kachelmenü erstellen (HTML, CSS)?

Hallo zusammen,

ich möchte gerne für eine Landingpage im Contentbereich ein Kachelmenü einbauen. Leider leichter gedacht, als getan, da ich dachte eine einfache HTML-Tabelle mit entsprechenden Grafiken würden ausreichen. Allerdings hab ich immer das Problem mit den Abständen, da die Kacheln sich direkt berühren sollen, aber immer wieder Luft zwischen den einzelnen herrscht, obwohl Höhe und Breite genau definiert wurden.

Jemand einen Ansatz wie ich vorgehen könnte?

3 Antworten

Bewertung
  • Anonym
    vor 8 Jahren
    Beste Antwort

    Wenn deine Kacheln, die aus Grafiken bestehen, komplett aneinander stoßen sollen, ist das doch die klassische „Blinde Tabelle“:

    <table cellspacing=“0“ cellpadding=“0“ border=“0“>

    <tr>

    <td><a href=“ziel1.htm><img src=“bild1.jpg“></a></td>

    <td><a href=“ziel2.htm><img src=“bild2.jpg“></a></td>

    </tr>

    <tr>

    <td><a href=“ziel3.htm><img src=“bild3.jpg“></a></td>

    <td><a href=“ziel4.htm><img src=“bild4.jpg“></a></td>

    </tr>

    <tr>

    <td><a href=“ziel1.htm><img src=“bild1.jpg“></a></td>

    <td><a href=“ziel2.htm><img src=“bild2.jpg“></a></td>

    </table>

    meht ist da nicht nötig, du kannst diese (im Beispiel 2x2-Tabelle natürlich in eine <div> packen, und so zielgenau positionieren und auch formatieren.

  • ?
    Lv 4
    vor 8 Jahren

    Definiere doch eine CSS-Klasse für die Kacheln. Ein DIV lässt sich beser positionieren als eine Tabelle.

    Die Klasse könnte so ungefähr so aussehen:

    .kachel {

       width: 100px;

       height: 100px;

       padding: 10px;

       margin: 0px;

       float: left;

       border-width: 1px;

       border-color: #808080;

       border-style: solid;

    }

  • vor 8 Jahren

    <table border=0

    Wenn die aussenränder Anstößen sollen kannst du noch

    Topmargine=0 und

    Leftmargine=0 einfügen.

    <td Background=Name der Bilddatei ...

    Den Kachelhintergrund solltest du in du Zelle packen

    Noch fragen?

Haben Sie noch Fragen? Jetzt beantworten lassen.