Solltest du oder wer anders noch einen ratschlag oder tipp haben immer raus da mit
Da will ich dich beim Wort nehmen: Missbrauchen von Tabellen für Layout-Zwecke ist nicht mehr zeitgemäß. Eine gute Alternative ist das Flexlayout. Um es zu demonstrieren, habe ich mal eine Karte darauf umgestellt:
<style>
.card_overlay {
display: flex;
height: 100vh;
width: 100vw;
align-items: center;
justify-content: center;
background-color: black;
}
.card_content {
display: inline-flex;
flex-direction: column;
position: relative;
}
.card_case {
background-image: url(http://file2.npage.de/014720/85/bilder/case.png);
width: 299px;
height: 435px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.txtwhite {
color: white;
}
.card_icons {
display: flex;
justify-content: space-around;
padding-bottom: 5px;
}
.card_icons div {
display: inline-flex;
align-items: center;
}
.card_icons div span {
margin-left: 5px;
}
.switch_card {
position: absolute;
top: calc(50% - 25px);
width: 100%;
display: flex;
justify-content: space-between;
}
</style>
<div class="card_overlay" id="fade">
<div class="card_content" id="card1">
<div class="card_icons">
<div>
<img height="17" src="http://file2.npage.de/014720/85/bilder/stapel.png" width="24" />
<span class="txtwhite">1/20</span>
</div>
<div>
<img height="17" src="http://file2.npage.de/014720/85/bilder/ex.png" width="14" />
<span class="txtwhite">0/2</span>
</div>
<div>
<img src="http://file2.npage.de/014720/85/bilder/ur.png" />
</div>
</div>
<div class="card_case">
<img src="http://file2.npage.de/014720/85/bilder/big_grabwaechters_vasall.png" />
</div>
<div class="switch_card">
<a data-toshow="card2" href="javascript:void(0)" unselectable="off">
<img src="http://file2.npage.de/014720/85/bilder/links2a.gif" />
</a>
<a data-toshow="card2" href="javascript:void(0)">
<img src="http://file2.npage.de/014720/85/bilder/rechts2a.gif" />
</a>
</div>
<div class="back_to">
<a class="back" href="javascript:void(0)" unselectable="off">
<img src="http://file2.npage.de/014720/85/bilder/back.png" title="zurück" />
</a>
</div>
</div>
</div>Ich habe, soweit es ging, auf absolute Maßangaben verzichtet. Ausnahme: Das .card_case, wo ich die Maße absolut angeben musste, damit sie dem Hintergrundbild entsprechen. Alternativen wäre eher noch schlechter gewesen. Durch relative Maße und selbst anpassende Container wird dir u. U. die Arbeit erleichtert, wenn Du weitere Elemente hinzu fügst. Du schriebst ja, dass das der Fall sein wird.
Möglicherweise könnte man noch die a-Tag weg rationalisieren und die Clickhandler direkt auf die Grafiken registrieren.
