XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Fotter will nicht wie ich.. (http://xhtmlforum.de/showthread.php?t=67495)

Brenner 14.05.2012 20:49

Fotter will nicht wie ich..
 
Hi,
und zwar verzweifle ich an meinem footer! Er will einfach nicht über die gesamte breite gehen! Habe mich schon Stunden lang durch gegoogelt..aber nix scheint mir zu helfen! Des halb hoffe ich einer von euch kann mir helfen!
Hier einmal der css code!
Code:

@charset "utf-8";
/* CSS Document */
/* Hier wird Position bestimmt */
body {
                width:100%;
                min-width:1100px;
                height:100%;
                background-image:url("Bilder/hintergrund.png");
                background-repeat:repeat;
                clear:both;
                display:table;
               
}

#header {
               
                        width:100%;
                        height:100%;
                        min-width:1100px;
                        max-width:1100px;
                        min-height:130px;
                        max-height:130px;
                        text-align:left;
                        margin:0 auto;
                        font-family:Arial, Helvetica, sans-serif;
                        font-variant:normal;
                        letter-spacing:2px;
                        font-size:11px;
                        float:left;
               
               
}


#content {
                       
                        float:left;
                        width:857px;
                        height:100%;
                        min-width:857px;
                        max-width:857px;
                        text-align:left;
                        margin-left:0 auto;
                        padding-left:225px;
                        padding-right:225px;
                        padding-top:60px;
                        padding-bottom:90px;
                        clear:both;       
                        overflow:auto;       
}




#footer {
               
                        width:100%;
                        height:220px;
                        min-height:220px;
                        max-height:220px;
                        background-color:#000000;       
                        margin:0%;
                        padding:0%;
                        font-family:Arial, Helvetica, sans-serif;
                        font-variant:normal;
                        font-size:11px;       
                       
                        display:table;
       
       
                       
}


/* Hier Beginnt design header */

                        #logooben                {
                                                       
                                                        float:left;
                                                        margin-left:242px;
                                                        margin-top:50px;
                        }
                       
                        #projekteoben        {
                                                       
                                                        float:left;
                                                        margin-left:100px;
                                                        margin-top:120px;
                                                       
                        }
                       
                        #ueberunsoben        {
                                                       
                                                        float:left;
                                                        margin-left:60px;
                                                        margin-top:120px;
                        }
                       
                        #kontaktoben        {
                                                        float:left;
                                                        margin-left:60px;
                                                        margin-top:120px;
                        }
                       
                        #gooplusoben        {
                                                       
                                                        float:left;
                                                        margin-left:150px;
                                                        margin-top:110px;
                        }
                       
                        #faceoben                {
                                                        float:left;
                                                        margin-left:15px;
                                                        margin-top:110px;
                        }
                       
                        #blaoben                {
                                                       
                                                        float:left;
                                                        margin-left:15px;
                                                        margin-top:113px;
                                                       
                        }
                                               
/* Ende Header Design */
/* Beginn Content Design */

                        .img12                        {
                                                        postion:fixed;
                                                        float:left;
                                                        margin-left:17px;
                                                        margin-bottom:17px;
                                                        margin-top:17px;
                                                        padding-left:0px;
                                                        padding-right:0px;
                                                        padding-top:0px;
                                                        padding-bottom:0px;
                        }
                       
/* Ende Content Design */
/* Beginn Footer Design */
                       
                        .unten {
                                                        color:#646464;
                                                        font-size:11px;
                        }
                       

                        #logounten                {
                                                       
                                                        float:left;
                                                        margin-left:242px;
                                                        margin-top:90px;
                                                       
                        }
                       
                        #navigation                {
                                                        font-size:13px;
                                                        float:left;
                                                        margin-left:35px;
                                                        margin-top:30px;
                                                        color:#fefefe;
                                                        line-height:15px;
                                                       
                                                       
                        }
                       
                                                                               
                        #netzwerke                {
                                                        float:left;
                                                        margin-left:70px;
                                                        margin-top:30px;
                                                        color:#fefefe;
                                                        font-size:13px;
                                                        line-height:15px;
                                                       
                        }
                       
                       
                        #kontakt2                {
                                                        float:left;
                                                        margin-left:70px;
                                                        margin-right:90px;
                                                        margin-top:30px;
                                                        color:#fefefe;
                                                        font-size:13px;
                                                        line-height:15px;
                                                       
                        }

Und der html code:
HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<link href="csstest.css" rel="stylesheet" type="text/css" />
</head>

<body>
<!--header-->
<div id="header">

<span id="logooben">
                                        <img src="Bilder/logo_03.png"
                    alt="logobunteoben"
                    width="144" height="81"
                    align="bottom" />

</span>

<span id="projekteoben">
                                        PROJEKTE
</span>

<span id="ueberunsoben">
                                        ÜBERUNS
</span>

<span id="kontaktoben">
                                        KONTAKT
</span>

<span id="gooplusoben">
                                        <img src="Bilder/goooben.png"
                    alt="googleplusoben2"                                                                                                  width="36" height="20" align="bottom"                                          />

</span>

<span id="faceoben">
                                        <img src="Bilder/faceoben.png"
                    alt= "faceoben"                                                                                          width="35" height="20" align="bottom"                                                                          />

</span>

<span id="blaoben">
                                        <img src="Bilder/blaoben.png"                                                                                  width="19" height="16" alt="blaobenbla"                                                                          align="bottom" />
</span>             
</div>




<!--mittelteil inhalt-->
<div id="content">
<span class="img12">
                                        <img src="Bilder/pro1.png" width="263"                                                          height="201" align="bottom"
                    alt="bildmittefuerjava"  />

</span>

<span class="img12">
                                        <img src="Bilder/pro1.png" width="263"                                                          height="201" align="bottom"
                    alt="bildmittefuerjava"  />

</span>

<span class="img12">
                                        <img src="Bilder/pro1.png" width="263"                                                          height="201" align="bottom"
                    alt="bildmittefuerjava"  />

</span>

<span class="img12">
                                        <img src="Bilder/pro1.png" width="263"                                                          height="201" align="bottom" alt=                                                        "bildmittefuerjava"  />
</span>

<span class="img12">
                                        <img src="Bilder/pro1.png" width="263"                                                          height="201" align="bottom"
                    alt="bildmittefuerjava"  />

</span>

<span class="img12">
                                        <img src="Bilder/pro1.png" width="263"                                                          height="201" align="bottom" alt=                                                        "bildmittefuerjava"  />
</span>

<span class="img12">
                                        <img src="Bilder/pro1.png" width="263"                                                          height="201" align="bottom"
                    alt="bildmittefuerjava"  />

</span>

<span class="img12">
                                        <img src="Bilder/pro1.png" width="263"                                                          height="201" align="bottom"
                    alt="bildmittefuerjava"  />

</span>

<span class="img12">
                                        <img src="Bilder/pro1.png" width="263"                                                          height="201" align="bottom"
                    alt="bildmittefuerjava"  />

</span>

<span class="img12">
                                        <img src="Bilder/pro1.png" width="263"                                                          height="201" align="bottom"
                    alt="bildmittefuerjava"  />

</span>

<span class="img12">
                                        <img src="Bilder/pro1.png" width="263"                                                          height="201" align="bottom"
                    alt="bildmittefuerjava"  />

</span>

<span class="img12">
                                        <img src="Bilder/pro1.png" width="263"                                                          height="201" align="bottom"
                    alt="bildmittefuerjava"  />

</span>
</div>

<!--Ende Mitte allg-->
<!--footer inhalt-->
<div id="footer">

<span id="logounten">
                                        <img src="Bilder/test2.png" width="198"                                                  height="49" align="bottom"
                    alt="logountenlinks"  />

</span>

<div id="navigation">
                                        <p>NAVIGATION</p>                                       
                    <p class="unten">Unsere Projekte</p>
                        <p class="unten">Wer wir sind</p>
                          <p class="unten">Kontakt</p>
                    <p class="unten">Impressum</p>
                 
                </div>
       
<div id="netzwerke">
                                        <p>NETZWERKE</p>                                       
                                <p class="unten">Google Plus</p>
                    <p class="unten">Facebook</p>
                    <p class="unten">Qype</p>
</div> 
       
<div id="kontakt2">
                                        <p>KONTAKT</p>                                       
                    <p class="unten">Telefon: 04331/4373125</p>
                    <p class="unten">E-Mail: Kontakt@BunteBrille.de</p>
                                       
</div>           
                                                                                       
</div>

<!--Ende footer-->
</body>
</html>

Schonmal danke ;)

schatzi 14.05.2012 21:38

Hallo!

Ohne das jetzt nachgebaut zu haben, aber:
Dein #content floatet und dein #footer cleart nicht.

heiko_rs 15.05.2012 17:18

Zitat:

Zitat von schatzi (Beitrag 516431)
Ohne das jetzt nachgebaut zu haben

Das ist der übliche Punkt. Brenner, das bastelt sich hier kaum jemand zusammen, poste einen Link.


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:21 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023