Ankündigung

Einklappen
Keine Ankündigung bisher.

Wieso verschieben sich diese Tabellen?

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Wieso verschieben sich diese Tabellen?

    Hallo,
    nun bin ich (endilch) am fertigstellen meiner neuen Community-Seite. Naja, Forum fertig gecodet, dann die vorher ausgedachten Themenbereiche eintragen - und was passiert? Die Foren-Tabellen verschieben sich, und ich hab keine Ahnung warum.
    http://sag-ich-dir.net/_v4/01.png

    Hier der Quelltext dazu (nur einmal fuer die Kategorie "Allgemeines":
    Code:
    <table width="100%" cellpadding="2" cellspacing="1" class="boardborder">
     <tr>
       <td class="boardheader" align="center" colspan="2" width="5%"></td>
       <td class="boardheader" width="47%" align="left">Forum</td>
       <td class="boardheader" align="center" width="9%">Themen</td>
    
       <td class="boardheader" align="center" width="9%">Beitr&auml;ge</td>
       <td class="boardheader" align="center" width="30%">Letzter Beitrag</td>
     </tr>
    </table>
    
    
    
    
    <table width="100%" cellpadding="2" cellspacing="1" class="headerrow">
     <tr>
      <td width="100%" height="10" align="left">
       <div class="bold" style="position: relative; left: 6%">Allgemeines</div>
    
       </td>
     </tr>
    </table>
    
    
    
    <table width="100%" cellpadding="2" cellspacing="1" class="boardindexrow">
     <tr>
      <td class="boardrow1" align="center" colspan="2" width="5%">[img]images/board_nonewpost.gif[/img]</td>
      <td class="boardrow1" width="47%" align="left"><span class="boardnormalfont">Lob & Kritik</span>
    <span class="boardsmallfont">Eure Meinung ist hier gefragt</span>
    </td>
    
      <td class="boardrow2" align="center" width="9%">0</td>
      <td class="boardrow2" align="center" width="9%">0</td>
      <td class="boardrow3" align="center" width="30%">Noch keiner</td>
     </tr>
    </table>
    
    
    
    <table width="100%" cellpadding="2" cellspacing="1" class="boardindexrow">
     <tr>
      <td class="boardrow1" align="center" colspan="2" width="5%">[img]images/board_nonewpost.gif[/img]</td>
    
      <td class="boardrow1" width="47%" align="left"><span class="boardnormalfont">Hilfe</span>
    <span class="boardsmallfont">Habt ihr Fragen? Dann stellt sie!</span>
    </td>
      <td class="boardrow2" align="center" width="9%">0</td>
      <td class="boardrow2" align="center" width="9%">0</td>
      <td class="boardrow3" align="center" width="30%">Noch keiner</td>
     </tr>
    </table>
    
    
    <table width="100%" cellpadding="2" cellspacing="1" class="boardindexrow">
    
     <tr>
      <td class="boardrow1" align="center" colspan="2" width="5%">[img]images/board_nonewpost.gif[/img]</td>
      <td class="boardrow1" width="47%" align="left"><span class="boardnormalfont">Bugs & Verbesserungsvorschl&auml;ge</span>
    <span class="boardsmallfont">Fehler gefunden? Oder eine gute Idee?</span>
    </td>
      <td class="boardrow2" align="center" width="9%">0</td>
      <td class="boardrow2" align="center" width="9%">0</td>
      <td class="boardrow3" align="center" width="30%">Noch keiner</td>
    
     </tr>
    </table>
    Dazu noch die CSS:
    Code:
    .boardborder {
            border: 1px solid #006699;
            background: #bcbcbc;
    }
    
    .headerrow {
            border: 1px solid #006699;
            border-top: 0;
            border-bottom: 0;
            padding: 0;
            background: #C3CDD5;
    }
    
    .boardindexrow {
            border: 1px solid #006699;
            border-top: 0;
            border-bottom: 0;
            background: #bcbcbc;
    }
    
    .boardrow1 {
            background-color: #efefef;
            vertical-align: middle;
            margin: 0;
            border: 0;
    }
    
    .boardrow2 {
            background-color: #dee3e7;
            vertical-align: middle;
            margin: 0;
            border: 0;
            text-align: center;
    }
    
    .boardrow3 {
            background-color: #dee3e7;
            vertical-align: middle;
            margin: 0;
            border: 0;
    }
    
    .boardheader {
            color: #FFA34F;
            font-size: 11px;
            font-weight : bold;
            background: #004477;
            white-space: nowrap;
    }
    Ist zwar viel Code, nur leider ist das ein kleiner relevanter Ausschnitt..
    Nun, woran liegt es, dass sich die Tabellen (siehe http://sag-ich-dir.net/_v4/01.png ) so seltsam verschieben? Im Interet Explorer wird alles übrigens richtig angezeigt - der Fehler ist im Firefox / Mozilla. Anfangst dachte ich, dass ich die Breite der td's nicht auf 100% gebracht habe, jedoch hab ich nachgerechnet - es sind 100% ..


  • #2
    Ein Nachteil bei Prozent-Angaben, Breiten neigen sich zu verändern in abhängigkeit vom Inhalt, also hier die breite der Texte.
    Prozent ist ja keine feste Größe

    Kommentar


    • #3
      // edit
      roflpofl.. Sowas is mir aber auch noch nich vorgekommen, dass sich die Tabellen derart verschoben haben.. Ich werd mal nach einer Lösung suchen, wie ich das am besten regel, danke erstmal..

      Kommentar


      • #4
        Sowas is mir aber auch noch nich vorgekommen
        Doch doch, hatte ich schon oft, bis ich dann alles mit festen Werten umgebaut habe.
        Aber ich habe dein Beispiel hier mal nachgebaut, und hatte keine Probleme.

        Ich habe auch die Tabelle etwas verändert, sodass nicgt immer eine neue Tabelle erstellt wird, sondern nur zusätzliche neue Zeilen.
        Also bei Forenanzeige.

        Kommentar

        Lädt...
        X