zwei Rolloverbutton nebeneinander darstellen

[Mike]

Hallo,

ich hab folgende Angabe im Head:

<style>
   .button1       { display: table;
                    background-image: url(mini_thumbs/grau/grau_i0010.gif);
                    width: 100px; height: 38px;}
   .button1:hover { background-image: url(mini_thumbs/mini_i0010.gif); }

.button2       { display: table;
                    background-image: url(mini_thumbs/grau/grau_i0011.gif);
                    width: 80px; height: 60px;}
   .button2:hover { background-image: url(mini_thumbs/mini_i0011.gif); }
 </style>

und im body folgende Angabe:

<td class="td_align_top_left">
        <span style="margin-left: 71px">
         <img class="pfeil" src="images/pfeil_links.gif" alt="Pfeil" />
          <a href="fmt_i0002.html" title="voriges Bild" class="button1"></a>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <a href="fmt_i0003.html" title="n&auml;chstes Bild" class="button2"></a>
          <img class="pfeil" src="images/pfeil_rechts.gif" alt="Pfeil" />
         </span>
        </td>

Jetzt werden beide Button inkl. Pfeile untereinander angezeigt. Zuerst dachte ich, es liegt am display:block, aber wenn ich inline eingebe, verschwinden die Buttons. Habt Ihr ne Ahnung, was ich falsch mache?

[Ulrich]

Moin,

So ein ähnliches Problem gab es neulich erst.

Jetzt werden beide Button inkl. Pfeile untereinander angezeigt. Zuerst dachte ich, es liegt am display:block, aber wenn ich inline eingebe, verschwinden die Buttons. Habt Ihr ne Ahnung, was ich falsch mache?

Du versuchst Elementen, die als inline definiert werden, eine Dimension (Breite) zuzuweisen. Das geht nicht für Inlineelemente.
Oder Du versuchst Blockelemente nebeneinander anzuzeigen. Auch das ist ohne weitere Eigenschaft nicht möglich.
Das Zauberwort, nach dem Du suchst heisst: float.

Möglicherweise reicht es auch schon, Du gibst den <img > Tags die nötigen Attribute für Höhe und Breite der referezierten Grafiken.

Bedenke aber, die Elemente sind bis auf das Bild "Pfeil" informationslos/leer. Wenn die Grafiken nicht geladen werden, werden sie für den Besucher ziemlich nutzlos. Techniken, um das zu ändern, findest Du beim Googeln nach "Image Replacement" oder "Barrierefreie grafische Links".
Als minimale Lösung würde ich den alt-Attributen wenigsten "zurück" bzw. "vorwärts" spendieren, statt "Pfeil".

Und last not least, sollte man Tabellen nicht zum Layouten missbrauchen. Wenn möglich überdenke Deinen Ansatz diesbezüglich ruhig nochmal.

viel Erfolg

Ulrich

[Mike]

Hallo Ulrich,

vielen Dank für die Antwort. Ich hab das mit dem float gelöst bekommen *freu*

aber was meinst Du mit "Und last not least, sollte man Tabellen nicht zum Layouten missbrauchen."?

[Ulrich]

Moin,

freut mich zu hören, dass Du Dein Problem lösen konntest.

aber was meinst Du mit "Und last not least, sollte man Tabellen nicht zum Layouten missbrauchen."?

Dein obiger HTML Code steht innerhalb von <td></td>
Das deutet darauf hin, dass Du eine Tabelle benutzt, um Deine Elemente zu positionieren (layouten).
Dafür sollte man andere Techniken einsetzen und Tabellen für tabellarische Daten reservieren.
Suche hier im Forum nach "Layouttabellen" oder "Tabellenlayout". Da wirst Du mit Sicherheit einiges zu dem Thema erfahren.

mit freundlichen Grüßen
Ulrich