2 Tabelle untereinander - Bilder ausrichten

[marc112000]

Hallo ,
ich habe 2 Tabellen untereinander .
In der ersten sind 2 Bilder drin. Schön nebeneinander. Alles O.K.
Darunter dann eine mit 4 Buttons. Die ersten beiden Buttons sind schön unter dem linken Bild. Jetzt hätte ich die beiden anderen Buttons gerne unter dem rechten Bild.
Wie bekomme ich die denn jetzt ein Stück nach rechts, ohne das die beiden ersten sich verschieben ?

Hier mal die CSS:
1.Tabelle :

Code: CSS  [Auswählen]

#st1 li {float:left;width:50.00%;}
#st1 li img {width:auto;display:block;height:auto;max-width:100%;border:3;}
#st1 li p {min-height:50px;}
#st1 li {list-style-type: none;}
#st1 li a img {border: solid 2px #696969;}
#st1 p {padding: 5px}

2. Tabelle

Code: CSS  [Auswählen]

#st2 li {float:left;width:auto;}
#st2 li img {width:127px;display:block;height:20px;max-width:100%;border:3;}
#st2 li p {min-height:14px;}
#st2 li {list-style-type: none;}
#st2 li a img {border: solid 2px #696969;}
#st2 p {padding: 5px}
#st2 li {margin: 4px}

Einen Screenshot habe ich auch mal beigefügt
Vielen Dank scho einmal für Eure Hilfe

Marc

Linkback: https://www.modified-shop.org/forum/index.php?topic=32538.0

[Whiteflash]

Hallo Marc,

wie sieht denn das HTML zu dem Bild aus  ?

Du schreibst zwar im Text was von einer Tabelle, die ganzen css-rules beziehen sich erkenntlich ja aber nur auf ListItems - Liegen die Buttons den überhaupt in einer Tabelle? Da wäre mehr Input hilfreich...

LG Whiteflash

P.S. Wenn die Bilder und Buttons in 2 verschiedenen Tabellen liegen ist das auch schon ein zu komplizierter Ansatz.

[marc112000]

Hallo ,

vielen Dank für die Antwort schonmal.
Hier der Html Code.

<ul id="st1">
    <li><img width="320" height="213" border="1" alt="Primavera" src="/images/Primavera-Greenfirst_Wa_Test_320.jpg" /></li>
    <li><img width="320" height="213" border="1" alt="Primavera" src="/images/Primavera-Greenfirst_Wa_Test_320.jpg" /></li>
</ul>
<ul id="st2">
    <li><img width="153" height="20" border="0" alt="Details" src="/images/Details_Startseite.gif" /></li>
    &nbsp;
    <li><img width="182" height="25" border="0" alt="Details" src="/images/Warenkorb_Startseite.gif" /></li>
    &nbsp;
    <li><img width="153" height="20" border="0" alt="Details" src="/images/Details_Startseite.gif" /></li>
    &nbsp;
    <li><img width="182" height="25" border="0" alt="Details" src="/images/Warenkorb_Startseite.gif" /></li>
</ul>
<div class="clear">&nbsp;</div>
<ul id="st1">
    <li><img width="320" height="213" border="1" alt="Primavera" src="/images/Primavera-Greenfirst_Wa_Test_320.jpg" />
    <p>Text</p>
    </li>
    <li><img width="320" height="213" border="1" alt="Primavera" src="/images/Primavera-Greenfirst_Wa_Test_320.jpg" />
    <p>Text</p>
    </li>
    <li><img width="" height="" alt="" src="" />
    <p>Text</p>
    </li>
    <li><img width="" height="" alt="" src="" />
    <p>Text</p>
    </li>
</ul>
<div class="clear">&nbsp;</div>

[Whiteflash]

Na Mahlzeit...

[Whiteflash]

Also mein Vorschlag wäre ja

Code: XML  [Auswählen]

            <table id="xy_page" >
                <colgroup width="100%" span="4"></colgroup>
                <tr>
                    <th colspan="2">
                        <img src="xy.gif">
                    </th>
                    <th colspan="2">
                        <img src="xy.gif">
                    </th>
                </tr>
                <tr>
                    <th><a href="xy_target.html" ><img class="narrow_img" src="xy_button.gif"></a></th>
                    <th><a href="xy_target.html" ><img class="wide_img" src="xy_button.gif"></a></th>
                    <th><a href="xy_target.html" ><img class="narrow_img" src="xy_button.gif"></a></th>
                    <th><a href="xy_target.html" ><img class="wide_img" src="xy_button.gif"></a></th>
                </tr>
            </table>

und

Code: CSS  [Auswählen]

#xy_page img {width: 320px; height: 213px; border: 1px solid #000;}
#xy_page a img.narrow_img {width: 153px; height: 20px; border: none;}
#xy_page a img.wide_img {width: 182px; height: 25px; border: none;}
 

Ungetestet, hoffe du kannst was damit anfangen...

[Matt]

Mein Vorschlag wäre ein HTML-Buch für Einsteiger. Little Boxes von Peter Müller oder sowas.

[Whiteflash]

Mein Vorschlag wäre ein HTML-Buch für Einsteiger. Little Boxes von Peter Müller oder sowas.

- ja, da schließe ich mich an!