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

margin-top verschiebt sein Elternelement

B

blizzart

Mitglied
Ich muß euch mal wieder mit einem Problem nerven:

Ich bin gerade mit dem Layout per CSS einer Seite beschäftigt. Ich habe den Header (wo nachher das Logo sein wird), eine horizontale Navigation und darunter den Bereich für den Inhalt.

Im Inhaltscontainer soll noch mal eine vertikale Navigation sein, mit 20px Abstand nach oben und links zum Rand des Containers. Mit dem Abstand links klappt auch alles hervorragend, nur beim Abstand zum oberen Rand übernimmt der Container die 20px und sitzt jetzt frei unter der horizontalen Navigation.

Kann mir jemand helfen, ich kann keinen Fehler im CSS/Html erkennen.

Der CSS-Code:
Code: 
/* Body */

body{background-color:#004f2f}



/* LOGO-Container */

#top {position:relative;
      width:1000px; height:200px;
      margin: auto;
      bottom-margin: 0px;
      border: 1px solid blue;
      background-color:#545454;
      background-image:url('grafik/hor-navi-back.jpg');
      background-repeat:no-repeat;
      background-position: top left;
}



/* Navigation unterhalb des Logos */

#topnavi {position:relative;
          width:820px; 
      height:20px;
      margin: 0px auto;
      border-top: none;
      border-bottom: none;
      border-left: 1px solid blue;
      border-right: 1px solid blue;
          background-color:white;
          background-image:url('grafik/hor-navi-back.jpg');
          background-repeat:repeat-x;
      background-position: top left;
          overflow:hidden;
}



/* Container für Seiteninhalt */

#inhalt-container {position:relative;
                width:820px; 
           height:900px;
               margin: auto;
                border-top: none;
             border-bottom: none;
             border-left: 1px solid blue;
             border-right: 1px solid blue;
                background-color:#545454;
                background-image:url('grafik/hor-navi-back.jpg');
                background-repeat:no-repeat;
                background-position: top left;
                background-attachment:fixed;
}



/* Navigation oben durch Listen */

#horizontal1 li {float: left;} 

#horizontal1 {margin: 0;
              padding: 0;
                 list-style-type: none;
              background: #6f79dc;
              background-image: url(grafik/back001.jpg);
              width: 100%;
              overflow: auto
}

#horizontal1 a {font-family: Arial;
             font-size: 14px;
             font-weight: bold;
             text-decoration: none;
             height: 20px;
             display: block;
             color: #fff;
             background-image: url(grafik/back001.jpg);
             background-color: white;
             text-align: center;
             line-height: 20px;
             border-bottom: 1px solid #fff;
} 




/* Diverse Breiten der horizontalen Links */

#home {width:70px;}

#produkte {width:80px;}

#unternehmen {width:100px;}

#service {width:80px;}

#kontakt {width:80px;}




/* Liste der horizontalen Navigation */

#horizontal1 a:visited {color: #dfdfdf;
                        background-image: url(grafik/back001.jpg)
}

#horizontal1 a:hover {background-color: #000;
                      background-image: url(grafik/back002.jpg)
} 



/* Navigation innerhalb des Inhaltscontainers */

#navi-inhalt {position:relative;
              width:200px; 
          height:120px;
          margin-top: 20px;
          margin-left: 20px;
          border: 1px solid blue;
              background-color:white;
              overflow:hidden;
}





/* Bottom für Footer (Impressum, AGB, etc...) */

#bottom {position:relative;
         width:820px; 
     height:120px;
     margin: 0px auto;
     margin-bottom: 20px
     border-top: none;
     border-bottom: 1px solid blue;
     border-left: 1px solid blue;
     border-right: 1px solid blue;
         background-color:white;
         background-image:url('grafik/hor-navi-back.jpg');
         background-repeat:repeat-x;
     background-position: top left;
         overflow:hidden;
}



/* Zum Clearen von float: */

#clear-left {clear:left}

#clear-right {clear:right}

#clear-both {clear:both}

#clear-none {clear:none}




/* Überschriften, Texte, Links, etc.

p {color:#b1b1b1; 
   font-family:Arial; 
   font-size:12px
}

a {color:#ffffff; 
   font-family:Arial; 
   font-size:12px, 
   font-weight:bold; 
   text-decoration:underline
}

a:hover {color:#ac0004; 
     font-family:Arial; 
     font-size:12px, 
     font-weight:bold; 
     text-decoration:none
}
und der HTML-Code
Code: 
<html>
<head>

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

<link rel="stylesheet" href="css/lightbox2.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="css.css">

</head>
<body>

<div id="top"></div>
<div id="topnavi">
    
    <ul id="horizontal1">        
        <li><a href="#" id="home">Home</a></li>
        <li><a href="#" id="produkte">Produkte</a></li>
        <li><a href="#" id="unternehmen">Unternehmen</a></li>
        <li><a href="#" id="service">Service</a></li>
        <li><a href="#" id="kontakt">Kontakt</a></li>
    </ul> 


</div>

<div id="clear-left"></div>

<div id="inhalt-container">

    <div id="navi-inhalt">

    </div>
</div>

<div id="bottom"></div>

</body>
</html>
PS: Der Fehler taucht im Firefox 3.6 auf, mit anderen habe ich noch nicht getestet.
 
Werbung:
Gib statt dem #navi-inhalt ein margin-top:20px doch dem #inhalt-container ein padding-top:20px...
 
Werbung:
Dann änder das position:relative in position:absolute... 2 mal position:relative ineinander bringt garnichts ^^
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben