Ergebnis 1 bis 2 von 2

Thema: Div-Boxen richtig einstellenHabe ein Fehler auf der Seite wobei der Footer nicht unte

  1. #1
    HTML Newbie
    Registriert seit
    13.05.2011
    Beiträge
    8
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Div-Boxen richtig einstellen

    Habe ein Fehler auf der Seite wobei der Footer nicht unten am Bottom ausgerichtet wird und der Content(Inhalt ) darf nicht über den footer gehen. Bekomme es nicht hin . Könnte mir einer helfen und sagen woran es liegt.

    Webseite: http://www.german-industrial-products.de/web/

    Index:
    HTML-Code:
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" dir="ltr">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
    <title>Weltraumspiel</title>
    
    <link rel="stylesheet" title="Default" href="css/main.css" type="text/css" media="screen" />
    <link rel="stylesheet" title="Default" href="css/menu.css" type="text/css" media="screen" />
    <link href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz&amp;subset=latin" type="text/css"  rel="stylesheet" />
    
    </head>
    <body> 
    <ul id="nav">
                <li><a href="#">Menu 1</a>
                    <ul>
                        <li><a href="#">Submenu 1</a></li>
                        <li><a href="#">Submenu 2</a></li>
                        <li><a href="#">Submenu 3</a></li>
                        <li><a href="#">Submenu 4</a></li>
                        <li><a href="#">Submenu 5</a></li>
                    </ul>
                </li>
                <li><a href="#">Menu 2</a>
                    <ul>
                        <li><a href="#">Submenu 2-1</a></li>
                        <li><a href="#">Submenu 2-2</a></li>
                        <li><a href="#">Submenu 2-3</a></li>
                        <li><a href="#">Submenu 2-4</a></li>
                        <li><a href="#">Submenu 2-5</a></li>
                        <li><a href="#">Submenu 2-6</a></li>
                        <li><a href="#">Submenu 2-7</a></li>
                        <li><a href="#">Submenu 2-8</a></li>
                    </ul>
                </li>
                <li><a href="#">Menu 3</a>
                    <ul>
                        <li><a href="#">Submenu 3-1</a></li>
                        <li><a href="#">Submenu 3-2</a></li>
                        <li><a href="#">Submenu 3-3</a></li>
                        <li><a href="#">Submenu 3-4</a></li>
                        <li><a href="#">Submenu 3-5</a></li>
                    </ul>
                </li>
                <li><a href="#">Menu 4</a></li>
            </ul>
            <script src="js/script.js"></script>
    <div id="header"></div> 
    
    <div id="wrapper">
        <div id="main">        
        
            <div id="contentWrapper">
                    <div id="content">
    
                   <--- INHALT --->
    </div>
    <div id="footer"></div>
    </div>
    
    </body>
    </html>
    CSS - Main.css
    Code:
    * {
        margin:0;
        padding:0;
    }
    body {
        padding:0;
        margin:0;
        background: transparent url(../images/web.jpg);
        animation-name:hintergrund;
          animation-duration:10s;
        animation-iteration-count:infinite;
        animation-timing-function:linear; 
        -webkit-animation-name:hintergrund;
          -webkit-animation-duration:10s;
        -webkit-animation-iteration-count:infinite;
        -webkit-animation-timing-function:linear;      
        -moz-animation-name:hintergrund;
          -moz-animation-duration:10s;
        -moz-animation-iteration-count:infinite;
        -moz-animation-timing-function:linear;
    }
    @keyframes hintergrund{
             0% {
                  right:0px;
                  
              }
           100% {
               right:-1900px;
           }
    }
    @-webkit-keyframes hintergrund{
             0% {
                  right:0px;
                  
              }
           100% {
               right:-1900px;
           }
    }
    @-moz-keyframes hintergrund{
             0% {
             right:0px;
              }
           100% {
            right:-1900px;
           }
    }
    
    
    
    html, body, #wrapper {
        height: 100%;  
    }
    
    #wrapper {
        margin: 0 ;  
    }
    #main {
        min-height: 100%;           
    }
    
    #contentWrapper {      
        padding-bottom: 290px; 
    }
    #header {
        background: transparent url(../images/header.png) no-repeat;
        top:0;
        right:0px;
        overflow:auto;
        position:absolute;
        height:400px;
        width:430px;
    }
    
    #content {
        font-family: "Lucida Sans Unicode",Verdana,Arial,sans-serif;
        font-size: 11px;
        color: #ffffff;
        border-bottom: 2px solid #ffffff;
        border-left: 2px solid #ffffff;
        border-right: 2px solid #ffffff;
        border-top: 2px solid #ffffff;
        text-align: left;
        position:absolute;
        top: 60px;
        left: 60px;
        width: 850px;
        display: block;
        background: transparent url(../images/trans.png);
    }
    
    #footer {
        background:  transparent url(../images/footer.png) bottom left no-repeat;
        height:290px;
    }
    
    h1, h2 {
        padding:0;
        margin:0 5%;    
        font: 20px Lobster, Arial, serif;
    }
    h2 {
        font-size:20px;
    }
    #content p {
        margin:1.5% 5%;
        -moz-column-gap:40px;
        -moz-column-count:3;    
        -webkit-column-gap:40px;    
        -webkit-column-count:3;
        column-gap:40px;
        column-count:3;
    }

    CSS - Menu.css
    Code:
    #nav,#nav ul {
        list-style: none outside none;
        margin: 0;
        padding: 0;
    }
    #nav {
        font-family: "Lucida Sans Unicode",Verdana,Arial,sans-serif;
        font-size: 13px;
        height: 36px;
        list-style: none outside none;
        margin: 0 0;
        text-shadow: 0 -1px 3px #202020;
        width: 100%;
    
        /* border radius */
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        border-radius: 4px;
    
        /* box shadow */
        -moz-box-shadow: 0px 3px 3px #cecece;
        -webkit-box-shadow: 0px 3px 3px #cecece;
        box-shadow: 0 3px 4px #8b8b8b;
    
        /* gradient */
        background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
        background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
        background-color: #5f5f5f;
    }
    #nav li {
        border-bottom: 1px solid #575757;
        border-left: 1px solid #929292;
        border-right: 1px solid #5d5d5d;
        border-top: 1px solid #797979;
        display: block;
        float: left;
        height: 34px;
        position: relative;
        width: 105px;
    }
    #nav > li:first-child {
        border-left: 0 none;
        margin-left: 5px;
    }
    #nav ul {
        left: -9999px;
        position: absolute;
        top: -9999px;
        z-index: 2;
    }
    #nav ul li {
        background: none repeat scroll 0 0 #838383;
        box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
        width: 100%;
    }
    #nav li a {
        color: #FFFFFF;
        display: block;
        line-height: 34px;
        outline: medium none;
        text-align: center;
        text-decoration: none;
    
        /* gradient */
        background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
        background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
        background-color: #5f5f5f;
    }
    
    /* keyframes #animation */
    @-webkit-keyframes animation {
        0% {
            -webkit-transform: scale(1);
        }
        30% {
            -webkit-transform: scale(1.2);
        }
        100% {
            -webkit-transform: scale(1.1);
        }
    }
    @-moz-keyframes animation {
        0% {
            -moz-transform: scale(1);
        }
        30% {
            -moz-transform: scale(1.2);
        }
        100% {
            -moz-transform: scale(1.1);
        }
    }
    #nav li > a:hover {
        /* CSS3 animation */
        -webkit-animation-name: animation;
        -webkit-animation-duration: 0.3s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: 1;
        -webkit-animation-direction: normal;
        -webkit-animation-delay: 0;
        -webkit-animation-play-state: running;
        -webkit-animation-fill-mode: forwards;
    
        -moz-animation-name: animation;
        -moz-animation-duration: 0.3s;
        -moz-animation-timing-function: linear;
        -moz-animation-iteration-count: 1;
        -moz-animation-direction: normal;
        -moz-animation-delay: 0;
        -moz-animation-play-state: running;
        -moz-animation-fill-mode: forwards;
    }
    #nav li:hover ul {
        left: 0;
        top: 34px;
        width: 150px;
    }
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Geändert von Korlask (07.03.2014 um 18:30 Uhr)

  2. #2
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: Div-Boxen richtig einstellenHabe ein Fehler auf der Seite wobei der Footer nicht

    Crossposting zu http://xhtmlforum.de/70721-div-boxen...instellen.html

    Bitte beachte die Forenregeln! Lies diese auch, bevor du in weiteren Foren dein Anliegen kundtust.

Ähnliche Themen

  1. Problem mit Footer / Container-Boxen
    Von NinaH im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 16.09.2013, 12:07
  2. Frames: Falsche Anzeige? Fehler? // Footer nicht vorhanden?
    Von DoneOne im Forum HTML & CSS Forum
    Antworten: 29
    Letzter Beitrag: 31.03.2008, 01:22
  3. Seite wird im IE nicht richtig angezeigt!
    Von DJ_Fabio_Nero im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 24.12.2007, 14:03
  4. Seite wird in IE nicht richtig angezeigt.
    Von im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 21.10.2006, 12:09
  5. Seite nicht richtig druckbar !
    Von TimTim im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 10.08.2005, 10:15

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •