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

Zentrieren Prob | 100% Seitenlänge

BraCay

Neues Mitglied
Das ist der Code:

HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <title>
            Menue
        </title>
    </head>
    <style type="text/css">
    body {
        background: black url(background.png) no-repeat top;
        margin: 0px;
        padding: 0px;
    }

    .header {
        height: 100px;
        width:  800px;
    }

    .navi_balk {
        height: 1px;
        width:  800px;
        background: url(navi_balk.png) white;
    }

    #navigation {
    background: black;
        color: white;
        text-align: center;
        font-family: "Baekmuk Gulim";s
    }

    ul#navigation1 {
        color: white;
        text-align: center;
    }

    ul#navigation li {
        margin: 0px;
        padding: 0px;
        display: inline;
        list-style: none;
        position: relative;
        vertical-align: baseline;
    }

    .box1 {
      float: left;
      margin: 10px;
      width:  190px;
      height: 130px;
      border: 1px solid white;
      color: white;
    }

    .box2 {
      float: left;
      margin: 10px;
      width:  190px;
      height: 130px;
      border: 1px solid white;
      color: white;
    }

    .box3 {
      float: left;
      margin: 10px;
      width:  190px;
      height: 130px;
      border: 1px solid white;
      color: white;
    }
  
  .box_all {
      text-align: center;
      margin: auto;
  }

    
    </style>
    <body>
        <table align="center" height="100%">
            <tr width="100%">
                <td class="navi_balk">
                </td>
            </tr>
            <tr width="100%" height="20px" id="navigation">
                <td>
                     <ul id="navigation">
                        <li>HOME</li>
                        <li>HOME</li>
                        <li>HOME</li>
                        <li>HOME</li>
                    </ul>
                </td>
            </tr>
            <tr width="100%">
                <td class="navi_balk">
                </td>
            </tr>
            <tr width="100%" height="500px">
                <td>
                    Inhalt
                </td>
            </tr>
            <tr width="100%">
                <td class="navi_balk">
                </td>
            </tr>
            <tr width="100%" height="150px">
                <td align="center">
          <div class="box_all">
                      <div class="box1">
              hallo :D
                      </div>
            <div class="box2">
              hallo :D
                      </div>
            <div class="box3">
              hallo :D
                      </div>
          </div>
                </td>
            </tr>
            <tr width="100%">
                <td class="navi_balk">
                </td>
            </tr>
        </table>
    </body>
</html>

Und zwar habe ich folgendes Problem. Wenn ihr den kopiert und eine html-Datei pastet, und dann über den Browser aufruft, dann stechen euch, sicherlich diese drei unteren Boxen ins Auge. Ich wollte alle drei nebeneinander haben und die anschlieend zentriert. Ich habe das mit float: left verwirklicht, und dann eine übergeordnete Box um diese drei Boxen, welches ich dann zentriert gesetzt habe, aber es möchte einfach nicht funktionieren >.<. Da müsste mal einer gerade biegen, ich schaffs net :/

Ach und Der untere Teil sollte ganz untern andocken,

das heisst der Inhalt sollte relativ sein, während die Navi und der untere Bereich eine feste Größe haben.

Wäre nett wenn sich jemand kurz drum kümmert
 
Werbung:
Punkt 1: Tabellen als Grundkonstrukt einer Webseite sind ein NoGo. Entferne das.

Punkt 2: wer floatet muss auch clearen -> also hinter den gefloateten Elementen in einem anderen Element "clear: both;" schreiben.
 
Zurück
Oben