Lexi Help
Die neuesten Themen
» [Update] Neues Theme der mobilen Version V2
von Tierfreund-97 Gestern um 23:14

» Mobile Ansicht leider Fehlerhaft
von Br0adsw0rd Gestern um 19:31

» [phpBB2] Hintergrund festpinnen
von Fayé Gestern um 16:56

» Mein altes Forum zurückbekommen
von Bigtuber Do 29 Sep 2016 - 22:59

» Impressum
von #Frank Mi 28 Sep 2016 - 23:45

» [phpBB2] Im Beitrag Bild und Text nebeneinander anzeigen
von #Frank Mi 28 Sep 2016 - 23:43

» [phpBB2] Unicode Emojis im Forum
von Mariacher J.E. Mi 28 Sep 2016 - 22:07

» Themen-Icons
von Bigtuber Mi 28 Sep 2016 - 20:46

» [phpBB2] Schriftfarbe in der Expressantwort
von Bigtuber Mi 28 Sep 2016 - 20:09

» Themen fixieren
von inde Mi 28 Sep 2016 - 20:05

» Begriff : "merken"
von Ray Di 27 Sep 2016 - 12:14

» [PunBB] Umzug eines funktionierenden Forums von PunBB auf phpBB?
von inde Di 27 Sep 2016 - 11:07

» Servamp Forum
von Raine Kamiya Mo 26 Sep 2016 - 22:47

» [phpBB2] Probleme mit der "Postprofil" Anzeige
von Dr.Keks Mo 26 Sep 2016 - 20:56

» Private Nachrichten
von inde Mo 26 Sep 2016 - 10:05

» Wie kann man erkennen, welche Forenversion ein anderes Forum hat?
von inde So 25 Sep 2016 - 22:24

Partner
free forum

[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 : 12
Anmeldedatum : 11.07.14

Nutzerprofil 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 : 2225
Hinweis : Flash The Scene™
keine
Anmeldedatum : 20.10.11
Firefox

Nutzerprofil 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 : 12
Anmeldedatum : 11.07.14

Nutzerprofil 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

Nutzerprofil 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 : 12
Anmeldedatum : 11.07.14

Nutzerprofil 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

Nutzerprofil anzeigen

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben


 
Forenbefugnisse:
Sie können in diesem Forum nicht antworten