Lexi Help
Partner
www.forumieren.com

[phpBB2] ChangeOnglet/Tabelle mit Tabs auf ganze Forenbreite

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

Erledigt [phpBB2] ChangeOnglet/Tabelle mit Tabs auf ganze Forenbreite

Beitrag von NekoAkina am 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!


Zuletzt von NekoAkina am Sa 7 Feb 2015 - 16:31 bearbeitet, insgesamt 1 mal bearbeitet

NekoAkina
Neuling
Neuling

Beiträge : 14
Anmeldedatum : 11.07.14

Benutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: [phpBB2] ChangeOnglet/Tabelle mit Tabs auf ganze Forenbreite

Beitrag von inde am 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.


Zuletzt von inde am Sa 7 Feb 2015 - 12:55 bearbeitet, insgesamt 2 mal bearbeitet (Grund : EDIT:)

inde
Moderator
Moderator

Männlich Beiträge : 2638
Hinweis : Flash The Scene™
keine
Anmeldedatum : 20.10.11
Firefox

Benutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: [phpBB2] ChangeOnglet/Tabelle mit Tabs auf ganze Forenbreite

Beitrag von NekoAkina am 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

NekoAkina
Neuling
Neuling

Beiträge : 14
Anmeldedatum : 11.07.14

Benutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: [phpBB2] ChangeOnglet/Tabelle mit Tabs auf ganze Forenbreite

Beitrag von Günther am Sa 7 Feb 2015 - 16:20

Hallo @NekoAkina,

bitte füge in dein CSS-Stylesheet unter
AB -> Anzeige -> Bilder & Farben -> Farben -> Reiter "CSS Stylesheet"
folgenden Code ein:
Code:
#mes_onglets ul {
  padding: 0;
}

Günther
Admin a.D.
Admin a.D.

Männlich Beiträge : 15349
Anmeldedatum : 16.07.08
Firefox

Benutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: [phpBB2] ChangeOnglet/Tabelle mit Tabs auf ganze Forenbreite

Beitrag von NekoAkina am Sa 7 Feb 2015 - 16:30

Ah vielen lieben Dank ^w^
Du bist echt eine super große Hilfe gewesen, hat gut geklappt.

NekoAkina
Neuling
Neuling

Beiträge : 14
Anmeldedatum : 11.07.14

Benutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: [phpBB2] ChangeOnglet/Tabelle mit Tabs auf ganze Forenbreite

Beitrag von Günther am Sa 7 Feb 2015 - 16:33

Freut mich. Smile
-closed-

Günther
Admin a.D.
Admin a.D.

Männlich Beiträge : 15349
Anmeldedatum : 16.07.08
Firefox

Benutzerprofil anzeigen

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben


 
Befugnisse in diesem Forum
Sie können in diesem Forum nicht antworten