Tabelle trotz 100%-Breite überstehend und nicht mittig

[Secretly]

Hallo,

nachdem ich schon mehrere Tage probiert habe und einfach nicht drauf komme, wäre es möglich mir zu sagen, was ich tun muss, dass der Header wirklich mittig ist. Momentan ist der rechte Rand etwas schmaler und die Tabelle sollte die gleichen Maße haben. Ich habe die Tabelle momentan mit 100% angegeben. Wenn ich die Breite in Pixel (820px wie der Header) angebe ist der linke Rand jedoch immer noch überstehend und rechts ist es dann kürzer.

Betroffene Seite: http://www.sydneylife.de/phpbb/index.php
Verwendeter Style: http://www.awesomestyles.com/phpbb3-sty ... n&version=

[Talk19zehn]

Hello Secretly, mir scheint es so, dass das Padding der CSS-Notation der Klasse Headerbar mit der Notation der Klasse Inner nicht zurecht kommt?
Momentan habe ich hier nur bescheidene Mittel für einen Test zur Verfügung. Ich probiere es dennoch und würde denken, wenn du

Code: Alles auswählen

.headerbar {
    background: none repeat-x scroll 0 0 #EBEBEB;
    color: #FFFFFF;
    margin-bottom: 4px;
    padding: 0 5px;
}

änderst auf

Code: Alles auswählen

.headerbar {
    background: none repeat-x scroll 0 0 #EBEBEB;
    color: #FFFFFF;
    margin-bottom: 4px;
    padding: 0 3px;
}

könnte es gehen?

BTW:
Ohne Hintergrundfarbe macht sich Tabelle ( so rein visuell ), wesentlich besser.

Grüße

[Secretly]

Oh danke man und ich sitze Ewigkeiten davor ^^ jetzt ist es zumindest gleich vom abstand her. jedoch will die breite noch nicht so ganz. ich hätte es gern so breit wie der header ist. gebe ich die headerbreite in px an, ist es zwar im internetexplorer richtig, aber in firefox, safari etc. ist es immer noch nach links verrückt

[Talk19zehn]

Hello, 820px kann meiner Meinung nach nicht funktionieren, da du das padding rechnerisch abziehen musst. --> Nur, du wechselst ja in prozentuale Tabellenzellen.... ( grübel ) ... und verschachtelst diverse Klassen ...

Bei mir sah es via Firefox schon recht ordentlich aus. Nimm doch zunächst "border" aus dem Tabellenkonstrukt heraus und belasse die Tabelle, wie sie momentan ist? Oder ergeben sich hierbei bereits Verschiebungen in anderen Browsern, wie von dir erwähnt?

Viele Grüße

[Secretly]

also jetzt steht es auf 100% breite in der overall.
also wenn ich border-collapse:collapse; rausnehme ändert sich halt lediglich, dass zwischen den zellen ein zwischenraum ist.

Code: Alles auswählen

<table align="center" bgcolor="#b9c2c1" width="100%" style="border-collapse:collapse;text-align:center;">
 <colgroup>
    <col width="34%"/>
    <col width="32%"/>
    <col width="34%"/>
  </colgroup>
  <tr style="font-weight:bold;font-size:10pt;color:black;">
    <td style="border: solid 1px #8AA1A2;">News</td>
    <td style="border: solid 1px #8AA1A2;">Plot</td>
    <td style="border: solid 1px #8AA1A2;">Time & Weather</td>
  </tr>
  <tr style="font-size:7pt;color:black;">
    <td style="border: solid 1px #8AA1A2;">
    <b>» 06. Juli 2011 «</b><br>
Der nächste Monatswechsel wurde<br>
verkündet. Nähere Informationen<br>
findet ihr in den News.<br>
Außerdem wurden Lilly, Carol und<br>
Max als Quizgewinner gekührt.<br>
<br>
<b>» 17. Juni 2011 «</b><br>
Happy Birthday Sydney<br>
Wir haben einige kleine Überraschungen<br>
für euch. Genaueres findet ihr in den<br>
News und beachtet unser Quiz.<br>
<br>
<b>» 08. Mai 2011 «</b><br>
Userchangenutzer sehen ab jetzt<br>
einen Hinweis über neue PMs hinter<br>
dem jeweiligen Charakter. Bitte denkt<br>
an die Musikvorschläge eurer Chars.</td>
    <td rowspan="2" style="border: solid 1px #8AA1A2;"><img src="http://www.sydneylife.de/sonstiges/plotbannererdbeben2.png"><br><br>
    » <font color="#7d4a30"><b>ERDBEBEN ERSCHÜTTERT SYDNEY</b></font> «<br><br><br>
<b><a href="thread.php?sid=&postid=113185#post113185">Plotinformationen</a></b><br>
» Inplaydatum: 23. April 2010 «<br>
» Outplaystart: 18. März 2011 «<br>
<br><br>
<b>» <a href="planer.php?sid=">Monatsplaner</a> «</b><br>
Events, Geburtstagskinder & Feiertage<br>
des jeweiligen Inplaymonats</td>
    <td style="border: solid 1px #8AA1A2;">» <font color="7D4A30"><b>APRIL 2010</b></font> «<br><br>
» Next Timechange «<br>
<i>3. September 2011</i> <br><br>
» <b>Temperaturen</b> «<br>
13 °C - 24 °C<br><br>
Die Temperaturen sind gesunken.<br>Der Himmel ist meist wolkenbehangen.<br>Die Luftfeuchtigkeit steigt an und<br> es kommt häufig zu Niederschlägen.<br>Manchmal bahnt sich die Sonne ihren Weg<br> durch die Wolken, aber man merkt<br> der Herbst ist eingebrochen.<br>
</td>
  </tr>
  <tr style="font-size:8pt;color:black;">
  <td style="border: solid 1px #8AA1A2;">
<a href="profile.php?userid=4&sid="><img name="ca1" onmouseover="ca1.src='http://www.sydneylife.de/sonstiges/catherine1.png'" onmouseout="ca1.src='http://www.sydneylife.de/sonstiges/catherine.png'" src="http://www.sydneylife.de/sonstiges/catherine.png" target="_blank" alt="Catherine" border="0"></a><a href="profile.php?userid=6&sid="><img name="co1" onmouseover="co1.src='http://www.sydneylife.de/sonstiges/connor1.png'" onmouseout="co1.src='http://www.sydneylife.de/sonstiges/connor.png'" src="http://www.sydneylife.de/sonstiges/connor.png" target="_blank" alt="Connor" border="0"></a><a href="profile.php?userid=7&sid="><img name="cn1" onmouseover="cn1.src='http://www.sydneylife.de/sonstiges/colin1.png'" onmouseout="cn1.src='http://www.sydneylife.de/sonstiges/colin.png'" src="http://www.sydneylife.de/sonstiges/colin.png" target="_blank" alt="Colin" border="0"></a>
<a href="profile.php?userid=72&sid="><img name="cl1" onmouseover="cl1.src='http://www.sydneylife.de/sonstiges/claire1.png'" onmouseout="cl1.src='http://www.sydneylife.de/sonstiges/claire.png'" src="http://www.sydneylife.de/sonstiges/claire.png" target="_blank" alt="Claire" border="0"></a><a href="profile.php?userid=175&sid="><img name="mi1" onmouseover="mi1.src='http://www.sydneylife.de/sonstiges/mia1.png'" onmouseout="mi1.src='http://www.sydneylife.de/sonstiges/mia.png'" src="http://www.sydneylife.de/sonstiges/mia.png" target="_blank" alt="Mia" border="0"></a><a href="profile.php?userid=54&sid="><img name="ad1" onmouseover="ad1.src='http://www.sydneylife.de/sonstiges/adam1.png'" onmouseout="ad1.src='http://www.sydneylife.de/sonstiges/adam.png'" src="http://www.sydneylife.de/sonstiges/adam.png" target="_blank" alt="Adam" border="0"></a><a href="profile.php?userid=4&sid="><img name="na1" onmouseover="na1.src='http://www.sydneylife.de/sonstiges/catherine1.png'" onmouseout="na1.src='http://www.sydneylife.de/sonstiges/catherine.png'" src="http://www.sydneylife.de/sonstiges/catherine.png" target="_blank" alt="Natalie" border="0"></a></td>
<td style="border: solid 1px #8AA1A2;"><img src="http://www.sydneylife.de/sonstiges/musik.png" border=0></a></td>
</tr></table>

wäre der tabellencode und jetzt ist die tabelle zwar richtig von den abständen zum rand, aber zum einen ist sie breiter als der header und der header ist nicht mehr zentriert.

edit: mittlerweile ist der header mittig und die tabelle auch... jedoch ist die tabelle leider immer noch breiter als der header. hat jemand einen tipp wie ich beides in die gleiche breite bekomme? breite in pixel funktioniert schon mal nicht, denn dann ist sie nicht mehr mittig

edit: ERLEDIGT

[Talk19zehn]

Hello,

wie ich im Quelltext deines Forums sehe, hast du einen "center-tag" eingebunden, so dass 820px in der Tabellenbreite greifen und zusätzlich nun vor Einbindung der Tabelle einen Zeilenumbruch genutzt, was die Darstellung im Header obendrein positiv ein wenig auflockert.

War es das, was du mit "Edit: erledigt" meintest? Ich finde es immer sehr schade, wenn Lösungen nicht dokumentiert werden.

Gruß

[Secretly]

Da mir ein "CSS-Kenner" dabei geholfen hat, kann ich nur ungefähr sagen, was geändert wurde. Zum Einen wurden einige Grafiken entfernt die in Prosilver_SE drin sind (runde Ecken etc.). Dann wurde an der allgemeinen Forenbreite geschraubt, die durch die Seitengrafiken und den größeren Header nicht korrekt war, am padding und an noch etwas in der Common.css (wenn ich mich jetzt nicht irre) was mir aber gerade nicht einfällt.

Also letztlich waren allgemeine Forumbreite, Padding und Ränder zu ändern.