2 Tabellen Nebeneinander
0 0 
Felix Riesterer
2 Tabellen Nebeneinander
Hallo,
da ich derzeit dabei bin 2 Tabellen nebeneinander zu basteln, aber derzeit Probleme habe, würde ich mich freuen wenn man mir helfen könnte.
Zu dem Problem: In Firefox funktioniert es, dass beide Tabellen nebeneinander angezeigt wereden so wie gewollt. Jedoch in IE und Opera z.B (getestet) werden die Tabellen untereinander angezeigt. Habe mich auch in zicht Forums bereits durchgesucht. Jedoch krieg ich die Lösung einfach nicht hin, dass auch IE und Opera die Tabellen nebeneinander anzeigen.
Wo könnte der Fehler liegen, dass IE und Opera es nicht wie Mozilla Firefox nebeneinander anzeigen wollen ?
Vielen Dank schonmal im vorraus.
Liebe Grüße,
tflash92
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>******</title>
<style type="text/css">
body {
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 100% 50%;
background-image: url(img/bg.jpg);
}
.t1 {
color: #00bffF;
font-weight: bold;
font-style: italic;
text-align: center;
font-size: 20px;
}
.t2 {
color: #F00;
font-weight: bold;
font-style: italic;
text-align: center;
font-size: 30px;
}
.t3 {
color: #b0e0e6;
font-weight: bold;
font-style: italic;
text-align: center;
font-size: 20px;
}
body,td,th {
font-weight: bold;
}
</style>
</head>
<body>
<table style="float: left; margin-right: 12px;" width="70%" height="100%">
<tr>
<th width="70%" valign="left"><p><a href="http://*****.com/"><img src="img/banner-de.jpg" width="1558" height="83" /></a></p>
<p><img src="img/status.jpg" width="1558" height="83" /></p>
<center>
<div style="background-color:black;
width:600px;
padding: 10px;
margin: 15px;
border-top: 11px green solid;
border-right: 20px red double;
border-bottom: 11px green solid;
border-left: 20px red double;
">
<div align="center">
<?php include("index2-de.php"); ?>
</div>
</div></center>
<div align="center">
<p align="left" class="t1"><img src="img/icones_00728.png" width="122" height="84" /></p>
<p class="t1"><strong>Achtung:<br />Unser **** startet jeden Morgen zwischen 4:58 Uhr und 5:05 Uhr (GMT+1), nach Deutscher Zeitzone ab.<br />
Verbundene User bzw. User mit einer aktiven Verbindung werden zwischen dieser Zeit Ihre Verbindungen verlieren.<br />
Bitte **** nichts von unseren **** zu dieser Zeit, oder verbindet euch in dieser Zeit nicht.<br />
Vielen Dank!</strong> </p>
<p class="t3"><u>In welchen Bereich würdet ihr einträten wollen ?<br />
Bitte wählt eines davon weiter unten aus.</u></p>
</div></th></tr></table>
<table style="float:right;" width="30%" height="100%">
<table width="30%">
<tr>
<td><div>
<p><a href="http://*****/file/"><img src="img/dateien.jpg" width="150" height="181" align="middle" hspace="10" /></a></p>
<p><a href="http://*****/photo/"><img src="img/fotos.jpg" width="150" height="181" align="middle" /></a></p>
<p><a href="http://*****/audio/"><img src="img/musik.jpg" width="150" height="181" align="middle" hspace="10" /></a></p>
<p><a href="http://*****.net/video/"><img src="img/video.jpg" width="150" height="181" align="middle" /></a></p>
</div></td>
</tr>
</table>
</body>
</html>
-
Du hast da eine table geöffnet in der eine zweite kommt, das macht keinen Sinn.
Und schreib doch bitte eintreten statt einträten...
Außerdem wählt man "einen" Bereich aus, nicht "eines". -
Liebe(r) tflash92,
Dein Code ist ein wildes Durcheinander von verschiedenen Konzepten zur Steuerung der Darstellung. Das kann nichts werden.
Verwende HTML-Code ohne jegliche <center>-Elemente, align- und style-Attribute. Dann wird Dir vielleicht klarer, dass Du eventuell keine Tabelle benötigst (Deine Code-Suppe unterstellt Dir, dass Du keine tabellarischen Daten anzeigen willst), sondern eine andere Dokumentstruktur.
Beispiel für echte Tabellen:
<table id="liga1"> <thead> <tr><th>Datum</th><th>Spiel</th><th>Ergebnis</th></tr> </thead> <tbody> <tr><td>18.07.</td><td>TS Hintertupfingen : FSV Kleinhausen</td><td>2:1</td></tr> <tr>...</tr> </tbody> </table> <table id="liga2"> <thead>...</thead> <tbody>...</tbody> </table>Hier sind echte tabellarische Daten verwendet worden, für die eine Tabelle auch das sinnvollste Werkzeug zum Auszeichnen sind.
Gegenbeispiel:
<div id="ads-external"> <h2>Sponsors</h2> <dl> <dt>Marketing-Firma Dreikäsehoch</dt> <dd><img src="/images/banners/dreikaesehoch.gif" alt="blinkerzwinker" /></dd> <dt>Marketing-Firma Photoshopping Direct</dt> <dd><img src="/images/banners/photoshopping.gif" alt="stock photo" /></dd> .... </dl> </div> <div id="live-ticker"> <h2>News - nicht verpassen!!!!einself!</h2> <ul> <li>User XY geblockt weil voll der cheater</li> <li>Neues Logo auffe Page (geil odda?)</li> <li>Server aufgesetzt Forum tut</li> </ul> </div>Bei diesem Beispiel handelt es sich nicht um tabellarische Daten. In beiden Fällen könnte man mit Gewalt welche daraus machen, aber wirklich echte Tabellendaten sind es keine. Daher habe ich hier (weil Du mit XHTML1.0 hantierst) jeweils ein <div>-Element zur Strukturierung benutzt.
Jetzt kann man mit CSS die Darstellung genau steuern, wenn man auf inline-Styles (also das style="..."-Attribut) verzichtet. Auch in den echten Tabellen kann man die Breite der Spalten mit CSS "anfassen", wenn man mit cleveren Selektoren arbeitet, oder aber für ältere Browser den <th>-Elementen Klassen-Namen gibt, um sie dann damit zu gestalten.
#liga1, #liga2 { display: inline-table; width: 49%; } #live-ticker, #ads-external { display: inline-block; width: 49%; }Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)