design verschiebt sich

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • design verschiebt sich

    Hi Leute,

    ich weiß nicht was ich falsch mache aber mein Design verschiebt sich, bei kleinen Auflösungen, was mache ich nur falsch??

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
           "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title></title>
    
    <style type="text/css">
    body 
    {
    
     height:100%;
     width:100%;
     font-family:Verdana;
     font-size:12px;
     background-color:#4B4231;
     font-family: 'ArialMT', 'Arial', 'sans-serif';
    }
    
    #header {
    text-align:center;
    font-size:13px;
    text-decoration:none;
    margin-left:10%;
    height:45px;
    width:881px;
    background-color:#4B4231;
    
    }
    #logo
    {
    background-image: url(tmpl/pic/logo.jpg);
    margin-left:10%;
    width:222px;
    min-height:549px;
    height:auto !important;  /* für moderne Browser */
    height:549px;  /*für den IE */
    float:left;
    }
    
    #content
    {
    float:left;
    width:610px;
    min-height:549px;
    height:auto !important;  /* für moderne Browser */
    height:549px;  /*für den IE */
    background-color:#B79F79;
    }
    
    #corner
    {
    background-image: url(tmpl/pic/corner.jpg);
    float:left;
    width:49px;
    min-height:549px;
    height:auto !important;  /* für moderne Browser */
    height:549px;  /*für den IE */
    background-color:#B79F79;
    }
    
    #footer
    {
    clear:left;
    margin-left:10%;
    width:881px;
    min-height:40px;
    height:auto !important;  /* für moderne Browser */
    height:40px;  /*für den IE */
    background-color:#4B4231;
    }
    
    a {
        color: #ffffff;
        text-decoration: none;
    }
    a:visited {
        color: #969696;
        text-decoration: underline;
    }
    a:hover {
        color: #b0b0b0;
        text-decoration: underline;
    }
    
    </style>
    </head>
    
    <body>
    <div id="header">
    &nbsp;&nbsp;&nbsp;&nbsp;
    <a href="#" class="menu">Neue Termine</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="#" class="menu">Kontaktliste</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="#" class="menu">Fotoarchiv</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </div>
    
    <div id="logo"></div>
    
    <div id="content"></div>
    
    <div id="corner"></div>
    
    <div id="footer"></div>
    
    </body>
    </html>

  • #2
    mal sollte auch die einzelnen divs in ein umschließendes div packen, und dem die zentralen angaben zur position verpassen. hilfe findest du in diesem tutorial. da geht zwar ums floaten, aber das prinzip ist dasselbe.

    gruß
    peter
    Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
    Meine Seite

    Comment

    Working...
    X