• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Header zu breit

A

AlexDozer

Neues Mitglied
Hi,

ich hab mal wieder ein Problem. Mein Header ist einfach zu breit im Firefox 3.6, dadurch erscheinen Scrollbalken für die Breite. Im IE8 ist es genauso wie es sein soll.

Könnt Ihr mir bitte helfen. Ich probier jetzt schon knapp zwei Stunden rum, aber der Header bleibt einfach immer gleich, egal was ich mache.

HTML: 
<html>
  <head>
  <style type="text/css">
    
    html {
      width:              100%;
      height:             100%;
      margin:             0px;
      padding:            0px;
    }    

    body {
      width:              100%;
      height:             100%;
      margin:             0px;
      padding:            10px;
    }
      
    .maindiv {
      width:              100%;
      height:             100%;
      margin:             0px;
      padding:            0px;
    }
    .header {
      background-color:   #98fb98;
      width:              100%;
      border:             1px solid black;
      overflow:           hidden;
      margin:             0px;
      padding:            0px;
    }  
   
                   
  </style>
  </head>
  <body>
    <div class="maindiv">
      <div class="header">
       <h1 style="float:left;margin-left:10px;">Hallo Welt</h1>
        <div style="float:right;margin-right:10px">
        <table>
          <tr>
            <th></th>
            <th>Target</th>
            <th>Actual</th>
          </tr>
          <tr>
            <td style="font-weight:bold">Database:</td>
            <td>tdb</td>
            <td>tdb</td>
          </tr>
          <tr>
            <td style="font-weight:bold">Connexx:</td>
            <td>tdb</td>
            <td>tdb></td>
          </tr>  
          <tr>
            <td style="font-weight:bold">Hicoss:</td>
            <td>tdb</td>
            <td>tdb</td>
          </tr>  
          <tr>
            <td style="font-weight:bold">Manufacturer:</td>
            <td>tdb</td>
            <td>tdb</td>
          </tr>  
          <tr>
            <td style="font-weight:bold">Market:</td>
            <td>tdb</td>
            <td>tdb</td>
          </tr>  
        </table>
      </div>
    </div>
    </div>
  </body>
</html>
Danke & Gruß

Alex
 
overflow:hidden; im body.

Und noch was: Wozu benutzt du Tabellen? Die sind doch total veraltet.
 
Zuletzt bearbeitet:
Hallo EndOfGreen,

das mit dem overflow:hidden funktioniert leider nicht. Problem ist nicht das Scrollbalken angezeigt werden sondern das der Header einfach nicht die Breite einnimmt welche er soll und somit Scrollbalken angezeigt werden.
Ich möchte das der Header die volle Breite annimmt minus 10px auf jeder Seite, wie es im css vom body (padding: 10px) ja eigentlich vorgegeben ist.

Die Tabellen benutze ich um Werte anzuzeigen, nicht um die Seite zu gestalten. Das mach ich natürlich mit divs.

Gruß Alex
 
Code: 
<html>
  <head>
  <style type="text/css">
    
    html {
      width:              100%;
      height:             100%;
      margin:             0px;
      padding:            0px;
    }    

    body {
      width:              100%;
      height:             100%;
      margin:             0px;
      padding:            0px;
    }
      
    .maindiv {
      width:              100%;
      height:             100%;
      margin:             0px;
      padding:            0px;
    }
    .header {
      background-color:   #98fb98;
      width:              100%;
      border:             1px solid black;
      overflow:           hidden;
      margin:             0;
      padding:            0px;
    }  
   
                   
  </style>
  </head>
  <body>
    <div class="maindiv">
    [COLOR="red"] <div width="100%" style="padding: 10px;">[/COLOR]
      <div class="header">
       <h1 style="float:left;margin-left:10px;">Hallo Welt</h1>
        <div style="float:right;margin-right:10px">
        <table>
          <tr>
            <th></th>
            <th>Target</th>
            <th>Actual</th>
          </tr>
          <tr>
            <td style="font-weight:bold">Database:</td>
            <td>tdb</td>
            <td>tdb</td>
          </tr>
          <tr>
            <td style="font-weight:bold">Connexx:</td>
            <td>tdb</td>
            <td>tdb></td>
          </tr>  
          <tr>
            <td style="font-weight:bold">Hicoss:</td>
            <td>tdb</td>
            <td>tdb</td>
          </tr>  
          <tr>
            <td style="font-weight:bold">Manufacturer:</td>
            <td>tdb</td>
            <td>tdb</td>
          </tr>  
          <tr>
            <td style="font-weight:bold">Market:</td>
            <td>tdb</td>
            <td>tdb</td>
          </tr>  
        </table>
      </div>
    </div>
   [COLOR="red"] </div>[/COLOR]
   </div>
  </body>
</html>

Damit wird es in Chrome & FF (mehr hab ich nicht getestet) so angezeigt, wie du es willst.
 
Dein Problem wird dadurch verursacht, dass Du hier

Code: 
html {
      [COLOR="red"]width:              100%;[/COLOR]
      height:             100%;
      margin:             0px;
      padding:            0px;
    }    

    body {
      [COLOR="red"]width:              100%;[/COLOR]
      height:             100%;
      margin:             0px;
      padding:            [COLOR="red"]10px;[/COLOR]
    }

durch das rot markierte Verursacht. Wenn man für ein Element eine Breite angibt dann gilt das padding zusätzlich zur Breite. In deinem Fall also 100% + 10px (links) + 10px (rechts). Dadurch entsteht dann auch ein Scrollbalken.

overflow ist hier keine richtige Lösung, da dadurch der waagerechte Scrollbalken generell unterdrückt werden würde was aber bei kleinen Viewports evtl. wieder störend sein kann.

Da html und body ohnehin schon die volle Breite einnehmen, brauchst Du aber für diese Elemente keine 100% Breite angeben. Also schreib einfach:

Code: 
html {
      height:             100%;
      margin:             0px;
      padding:            0px;
    }    

    body {
      height:             100%;
      margin:             0px;
      padding:            10px;
    }

Und als Tipp:
Code: 
* { margin: 0;padding: 0; }
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben