[phpBB2] ChangeOnglet/Tabelle mit Tabs auf ganze Forenbreite

von NekoAkina Sa 7 Feb 2015 - 8:41

Hallöchen!

Es geht mal wieder um dieses Forum hier. x3 Ich bin gerade dabei die Headertabelle zu justieren und habe mich dabei für eine Tabelle mit Tabs entschieden. Mein Problem ist nun allerdings, wie ich diese Tabelle auf die gesamte Forenbreite bekomme. Der Abstand, den die Tabelle auf der linken Seite zum Rand hat, stört mich doch wirklich sehr. Ich hoffe, jemand kann mir helfen!

meine Codes:

HTML

Code:: <link href="http://fonts.googleapis.com/css?family=UnifrakturMaguntia" rel="stylesheet" type="text/css" /> <div id="mes_onglets"> <ul> <li onclick="changeOnglet(this);" id="o_1" class="mon_onglet_selected"> <span style="letter-spacing: -2px; font-family: UnifrakturMaguntia; font-size: 20px;">Important</span> </li> <li onclick="changeOnglet(this);" id="o_2" class="mon_onglet"> <span style="letter-spacing: -2px; font-family: UnifrakturMaguntia; font-size: 20px;">Up to date</span> </li> <li onclick="changeOnglet(this);" id="o_3" class="mon_onglet"> <span style="letter-spacing: -2px; font-family: UnifrakturMaguntia; font-size: 20px;">Wanted</span> </li> <li onclick="changeOnglet(this);" id="o_4" class="mon_onglet"> <span style="letter-spacing: -2px; font-family: UnifrakturMaguntia; font-size: 20px;">Other stuff</span> </li> <div class="clear"> <div id="mes_contenus"> <div id="co_1" class="mon_contenu"> <table style="width: 100%;"> <tbody> <tr> <td style="width: 50%;" valign="top"> <div style="margin: auto; width: 100%; text-align: center;"> Bla <center> Bla </center> </div> </td> <td style="width: 50%;" valign="top"> <div style="margin: auto; width: 100%; text-align: center;"> bla </div> <center> bla </center> </td> </tr> </tbody> </table> </div> <div style="display: none;" id="co_2" class="mon_contenu"> <table style="width: 100%;"> <tbody> <tr> <td style="width: 50%;" valign="top"> <div style="margin: auto; width: 100%; text-align: center;"> bla <center> <div style="padding: 5px; width: 300px; height: 150px; line-height: 2em; overflow: auto;"> <strong><span style="text-decoration: underline;">news</span></strong><br />bla<br /> </div><strong> </strong> </center><strong> </strong> </div> </td> <td style="width: 50%;" valign="top"> <div style="margin: auto; width: 100%; text-align: center;"> bla <center> bla </center> </div> </td> </tr> </tbody> </table> </div> <div style="display: none;" id="co_3" class="mon_contenu"> <table style="width: 100%;"> <tbody> <tr> <td style="width: 50%;" valign="top"> <div style="margin: auto; width: 100%; text-align: center;"> bla <center> bla </center> </div> </td> <td style="width: 50%;" valign="top"> <div style="margin: auto; width: 100%; text-align: center;"> bla </div> bla </td> </tr> </tbody> </table> </div> <div style="display: none;" id="co_4" class="mon_contenu"> <table style="width: 100%;"> <tbody> <tr> <td style="width: 50%;" valign="top"> <div style="margin: auto; width: 100%; text-align: center;"> bla <center> bla </center> </div> </td> <td style="width: 50%;" valign="top"> <div style="margin: auto; width: 100%; text-align: center;"> bla <marquee direction="up"> gesuche! </marquee> </div> </td> </tr> </tbody> </table> </div> </div> </div> </ul> </div>

CSS

Code:: /*changeOnglet*/ .mon_onglet{ float: left; padding: 2px 10px; margin-right: 0px; color: #5C523C; background: #f5f5f5 border: 4px double #5e574c; margin-bottom: -1px; list-style: none; font-family: georgia; font-size: 15px; } .mon_onglet:hover{ background: #f5f5f5; } .mon_onglet_selected{ float: left; padding: 2px 10px; margin-right: 0px; color: #5C523C; background: #f5f5f5; border-top: 4px double #5e574c; border-right: 4px double #5e574c; border-left: 4px double #5e574c; border-bottom: 4px double #5e574c; margin-bottom: -1px; list-style: none; font-family: georgia; font-size: 15px;} .clear{ clear: both; } .mon_contenu{ color: #5C523C; background: #f5f5f5; border: 2px dashed #5e574c; padding: 10px; line-height: normal; font-size: 12px;} #mes_contenus, #mes_onglets{ width: 700px; margin: auto;}

Java Script

Code:: function changeOnglet(_this){ var getOnglets = document.getElementById('mes_onglets').getElementsByTagName('li'); for(var i = 0; i < getOnglets.length; i++){ if(getOnglets[i].id){ if(getOnglets[i].id == _this.id){ getOnglets[i].className = 'mon_onglet_selected'; document.getElementById('c' + _this.id).style.display = 'block'; } else{ getOnglets[i].className = 'mon_onglet'; document.getElementById('c' + getOnglets[i].id).style.display = 'none'; } } } }

Vielen Dank schon mal!

von inde Sa 7 Feb 2015 - 12:36

Hallo NekoAkina,

schaust Du Dir bitte einmal Dein CSS an, insbesondere die Abstände?

Code:: #mes_contenus, #mes_onglets{ width: 700px; margin: auto;}

Besser vielleicht so? Dabei habe ich auch die Weite noch ein wenig verändert.

Code:: #mes_contenus, #mes_onglets { margin: auto auto auto 0; width: 710px; }

Hilft Dir das weiter?

LG inde

EDIT: Auch ein positiver oder negativer Wert wäre denkbar.

von NekoAkina Sa 7 Feb 2015 - 15:28

Vielen Dank für deine Hilfe x3
Allerdings hat es nur dafür gesorgt, dass die Tabelle dann rechts über steht. ._.
Es sollte sich allerdings mehr in Richtung links bewegen owo