Das Forum der Foren
Willkommen im offiziellen Supportforum von Forumieren!

Um alle Vorteile unseres Forums zu nutzen, melden Sie sich bitte an. Wenn Sie bereits Mitglied sind loggen Sie sich ein.


Erstellen Sie ein kostenloses Forum wie dieses hier.
Regeln und nützliche Hinweise
Slideshow-Generator
Der Forumieren Slide Show - Diashow-GeneratorDer Forumieren Slide Show - Diashow-GeneratorDer Forumieren Slide Show - Diashow-GeneratorDer Forumieren Slide Show - Diashow-GeneratorDer Forumieren Slide Show - Diashow-Generator
Lexi Help
Die neuesten Themen
» Wrestling Around the World!
von Emily Stein Gestern um 11:46

» Wrestling Forum
von Emily Stein Gestern um 11:45

» Spacemaniac-das Modellraketen Forum für alle ;)
von Emily Stein Gestern um 11:43

» Signatur (468*60) für http://rpg-drachenkrieg.forumieren.eu
von Zocker96 Do 22 Jun 2017 - 21:45

» Guthaben kaufen / einsetzen - Was kostet wie viel?
von Forumbot Do 22 Jun 2017 - 19:43

» [Update] jQuery-Update: von Version 1.7 zu 3.2
von Forumbot Do 22 Jun 2017 - 18:23

» C&C Renegade Forum
von inde Do 22 Jun 2017 - 17:32

» Tutorial-Forum für forumieren Administratoren.
von inde Do 22 Jun 2017 - 17:31

» Youtube Fanforum
von Emily Stein Do 22 Jun 2017 - 17:07

» Youtuber Fanforum
von Emily Stein Do 22 Jun 2017 - 17:07

» Prime-Kingz.de - We Love to Prime-Kingz
von Emily Stein Do 22 Jun 2017 - 17:06

» [phpBB3] Inter-NET - Das Forum zum allgemeinen Internet
von Emily Stein Do 22 Jun 2017 - 17:05

» CodeLabs
von Emily Stein Do 22 Jun 2017 - 17:04

» Animal Crossing Villagers Forum
von Emily Stein Do 22 Jun 2017 - 17:03

» Htmlfreak-Forum für Webdesign, Events und Frageforum
von Emily Stein Do 22 Jun 2017 - 17:02

» Test-Forum (Foruml)
von Emily Stein Do 22 Jun 2017 - 16:57

www.forumieren.de

[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
avatar
NekoAkina
Neuling
Neuling

Beiträge : 14
Anmeldedatum : 11.07.14
keine
phpBB2

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:)
avatar
inde
Administrator
Administrator

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

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
avatar
NekoAkina
Neuling
Neuling

Beiträge : 14
Anmeldedatum : 11.07.14
keine
phpBB2

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;
}
avatar
Günther
Admin a.D.
Admin a.D.

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

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.
avatar
NekoAkina
Neuling
Neuling

Beiträge : 14
Anmeldedatum : 11.07.14
keine
phpBB2

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-
avatar
Günther
Admin a.D.
Admin a.D.

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

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