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
Lexi Help
Die neuesten Themen
» Veröffentlichungen - Bilder in einer Zeile
von Zocker96 Gestern um 18:29

» [phpBB3] Backup Rückgängig machen
von inde Gestern um 12:29

» Natur und Wildlife Forum
von Stephan68 Do 25 Mai 2017 - 19:03

» [phpBB2] Charmed Bad Time
von Phoebe Do 25 Mai 2017 - 16:48

» [phpBB2] RPG-Forum Drachenkrieg
von Zocker96 Do 25 Mai 2017 - 14:14

» House Of The Rising Sun Rollenspiel-Forum
von Dr.Keks Do 25 Mai 2017 - 11:02

» Antwort landet im falschen Thema
von inde Do 25 Mai 2017 - 3:16

» [#9811] [phpBB2] Could not obtain rpg users infos
von inde Mi 24 Mai 2017 - 18:37

» [#9973] Abmeldeseite für User nicht aufrufbar
von inde Mi 24 Mai 2017 - 18:33

» [#9974] SSL plötzlich deaktiviert
von inde Mi 24 Mai 2017 - 18:30

» Header 714*264 für BVB134 (siamkatzenborussen.forumieren.com)
von inde Mi 24 Mai 2017 - 18:29

» Logo 192*192 für BVB134 (siamkatzenborussen.forumieren.com)
von inde Mi 24 Mai 2017 - 18:23

» Veröffentlichungen - Text mit Farbe/Bilder mit Link versehen
von inde Mi 24 Mai 2017 - 17:51

» Gründerwechsel nach Inaktivität des Gründers
von inde Mi 24 Mai 2017 - 15:47

» [Update] ModernBB – Templatebearbeitung
von Forumbot Mi 24 Mai 2017 - 15:01

» Shadow Revolution
von Clove Huntress Di 23 Mai 2017 - 20:47

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 : 4296
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