Wątek przeniesiony 2015-07-12 21:45 z Webmastering przez dzek69.

Dlaczego stopka się wylewa?

0

Witam serdecznie, mam problem z stopką w projekcie, mianowicie czego bym nie robił, za każdym razem się wylewa :/
Być może coś przekombinowałem, ale już nie mogę połapać się w kodzie co może być źle.

body {
    background-color: #222;
    background-image: linear-gradient(#111, #4A4A4A);
    font: bold 12px Arial, Helvetica;
    color: #CC0000;
    text-shadow: 0 1px 0 #000;
    margin:60px auto;
    padding: 0;
    height: 100%;
    }
a {
    color: #999;
    font: bold 12px Arial, Helvetica;
    text-decoration: none;
    text-shadow: 0 1px 0 #000;
} 
footer {
  position: absolute;
  margin: auto;
  padding: 15px;
  bottom:0;
  box-shadow: none;
  width:100%;
  margin-top:20px;
  border: solid 1px;
  border-radius:6px;
  padding-bottom:20px;
  background: #111E;
  background-image: linear-gradient(#444, #111);
  display: block;

}

footer nav ul {padding:0;}
footer nav ul li{float:left;list-style: none;width: 10%;margin: auto;
}
footer nav ul li a {
    color: #999;
    text-transform: uppercase;
    font: bold 12px Arial, Helvetica;
    text-decoration: none;
    text-shadow: 0 1px 0 #000;}

Za wszelaką pomoc, dziękuję z góry :)

0

I co my mamy z tego wiedzieć, skoro nie mamy kodu HTML i nie możemy tego na oczy zobaczyć?

Ale spróbuj footer nav ul { overflow: hidden; } bo to zdaje się nieczyszczony float robi problem.

0

Niestety ale nie pomogło. Podejrzewam, że problem leży z witdh, ale z #menu nie ma takiego problemu, chociaż robione jest w sposób analogiczny, mniej więcej :/

<!DOCTYPE HTML>

<html lang="pl">

<head>
<meta charset="ANSI">

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="style.css"/>
<meta name="viewport" content="width=device-width">
</head>

<body>
<header>

</header>
<nav>
<ul id="menu">
    <li><a href="index.html">Strona główna</a></li>
    <li>
        <a href="uslugi.html">Usługi</a>
        <ul>
            <li><a href="uslugi_doradztwo.html">Doradztwo</a></li>
            <li><a href="uslugi_renowacja.html">Renowacja</a></li>
            <li><a href="uslugi_tuning.html">Tuning</a></li>
            <li><a href="uslugi_naprawy.html">Naprawy</a></li>
        </ul>
    </li>
    <li>
        <a href="galeria.html">Galeria</a>
        <ul>
            <li><a href="galeria_warsztat.html">Warsztat</a></li>
            <li><a href="galeria_tuning.html">Tuning</a></li>
            <li><a href="galeria_naprawione.html">Naprawione</a></li>
            <li><a href="galeria_renowacja.html">Po renowacji</a></li>
        </ul>
    </li>
    <li><a href="o_nas.html">O nas</a></li>
    <li><a href="kontakt.html">Kontakt</a></li>
</ul>
</nav>
<article>
 
</article>
<footer>
 <center> <a class="left">Copyright &copy; 2015 by   <a href="nitrocar.pl">NitroCar.pl</a>
  </a>
  </center>
  <center>
  <nav class="right">
    <ul>
      <li><a href="index.html">Strona główna</a></li>
      <li><a href="uslugi.html"><a>Uslugi</a></li>
      <li><a href="galeria.html">Galeria</a></li>
      <li><a href="o_nas.html">O nas</a></li>
      <li><a href="kontakt.html">Kontakt</a></li>
    </ul>

  </nav>
  </center>

</footer>

</body>

</html>

i cały css

body {
    background-color: #222;
    background-image: linear-gradient(#111, #4A4A4A);
    font: bold 12px Arial, Helvetica;
    color: #CC0000;
    text-shadow: 0 1px 0 #000;
    margin:60px auto;
    padding: 0;
    height: 100%;
    }
a {
    color: #999;
    font: bold 12px Arial, Helvetica;
    text-decoration: none;
    text-shadow: 0 1px 0 #000;
}
#menu, #menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
 #menu {
    width: auto;
    margin: 60px auto;
    border: 1px solid #222;
    background-color: #111;
    background-image: linear-gradient(#444, #111);
    border-radius: 6px;
    box-shadow: 0 1px 1px #777;
}
#menu:before,
#menu:after {
    content: "";
    display: table;
}

#menu:after {
    clear: both;
}

#menu {
    zoom:1;
}
#menu li {
    float: left;
    border-right: 1px solid #222;
    box-shadow: 1px 0 0 #444;
    position: relative;
}

#menu a {
    float: left;
    padding: 12px 30px;
    color: #999;
    text-transform: uppercase;
    font: bold 12px Arial, Helvetica;
    text-decoration: none;
    text-shadow: 0 1px 0 #000;
}

#menu li:hover > a {
    color: #fafafa;
}

*html #menu li a:hover { /* IE6 only */
    color: #fafafa;
}
#menu ul {
    margin: 20px 0 0 0;
    _margin: 0; /*IE6 only*/
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 38px;
    left: 0;
    z-index: 1;
    background: #444;
    background: linear-gradient(#444, #111);
    box-shadow: 0 -1px 0 rgba(255,255,255,.3);
    border-radius: 3px;
    transition: all .2s ease-in-out;
}

#menu li:hover > ul {
    opacity: 1;
    visibility: visible;
    margin: 0;
}

#menu ul ul {
    top: 0;
    left: 150px;
    margin: 0 0 0 20px;
    _margin: 0; /*IE6 only*/
    box-shadow: -1px 0 0 rgba(255,255,255,.3);
}

#menu ul li {
    float: none;
    display: block;
    border: 0;
    _line-height: 0; /*IE6 only*/
    box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}

#menu ul li:last-child {
    box-shadow: none;
}

#menu ul a {
    padding: 10px;
    width: 130px;
    _height: 10px; /*IE6 only*/
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
}

#menu ul a:hover {
    background-color: #0186ba;
    background-image: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child > a {
    border-radius: 3px 3px 0 0;
}

#menu ul li:first-child > a:after {
    content: '';
    position: absolute;
    left: 40px;
    top: -6px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #444;
}

#menu ul ul li:first-child a:after {
    left: -6px;
    top: 50%;
    margin-top: -6px;
    border-left: 0;
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    border-right: 6px solid #3b3b3b;
}

#menu ul li:first-child a:hover:after {
    border-bottom-color: #04acec;
}

#menu ul ul li:first-child a:hover:after {
    border-right-color: #0299d3;
    border-bottom-color: transparent;
}

#menu ul li:last-child > a {
    border-radius: 0 0 3px 3px;
}
#menu-trigger { /* Hide it initially */
    display: none;
}

@media screen and (max-width: 600px) {

    #menu-wrap {
        position: relative;
    }

    #menu-wrap * {
        box-sizing: border-box;
    }

    #menu-trigger {
        display: block; /* Show it now */
        height: 40px;
        line-height: 40px;
        cursor: pointer;
        padding: 0 0 0 35px;
        border: 1px solid #222;
        color: #fafafa;
        font-weight: bold;
        background-color: #111;
        /* Multiple backgrounds here, the first is base64 encoded */
        background: url(data:image/png;base64,iVBOR...) no-repeat 10px center, linear-gradient(#444, #111);
        border-radius: 6px;
        box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
    }

    #menu {
        margin: 0; padding: 10px;
        position: absolute;
        top: 40px;
        width: 100%;
        z-index: 1;
        display: none;
        box-shadow: none;
    }

    #menu:after {
        content: '';
        position: absolute;
        left: 25px;
        top: -8px;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 8px solid #444;
    }

    #menu ul {
        position: static;
        visibility: visible;
        opacity: 1;
        margin: 0;
        background: none;
        box-shadow: none;
    }

    #menu ul ul {
        margin: 0 0 0 20px !important;
        box-shadow: none;
    }

    #menu li {
        position: static;
        display: block;
        float: none;
        border: 0;
        margin: 5px;
        box-shadow: none;
    }

    #menu ul li{
        margin-left: 20px;
        box-shadow: none;
    }

    #menu a{
        display: block;
        float: none;
        padding: 0;
        color: #999;
    }

    #menu a:hover{
        color: #fafafa;
    }

    #menu ul a{
        padding: 0;
        width: auto;
    }

    #menu ul a:hover{
        background: none;
    }

    #menu ul li:first-child a:after,
    #menu ul ul li:first-child a:after {
        border: 0;
    }

}

@media screen and (min-width: 600px) {
    #menu {
        display: block !important;
    }
}

/* iPad */
.no-transition {
    transition: none;
    opacity: 1;
    visibility: visible;
    display: none;
}

#menu li:hover > .no-transition {
    display: block;
}
#header {
    width: 100%;
    margin: auto;
    border: 1px solid black;
    box-shadow: 0 1px 1px black;
    background-color: black;
    background-image: linera-gradient (black,gray);
    border-radius: 6px;
    }
footer {
  position: absolute;
  margin: auto;
  padding: 15px;
  bottom:0;
  box-shadow: none;
  width:100%;
  margin-top:20px;
  border: solid 1px;
  border-radius:6px;
  padding-bottom:20px;
  background: #111E;
  background-image: linear-gradient(#444, #111);
  display: block;

}

footer nav ul {
overflow: hidden;
padding:0;}
footer nav ul li{float:left;list-style: none;width: 10%;margin: auto;
}


footer nav ul li a {
    color: #999;
    text-transform: uppercase;
    font: bold 12px Arial, Helvetica;
    text-decoration: none;
    text-shadow: 0 1px 0 #000;}
#text {
   color:#CC0000;
   margin-top:20px;
   padding:15px;
   float:left;
   margin-left:20px;
}
</style>
<script type="text/javascript">
$(function() {
  if ($.browser.msie && $.browser.version.substr(0,1)<7)
  {
    $('li').has('ul').mouseover(function(){
        $(this).children('ul').css('visibility','visible');
        }).mouseout(function(){
        $(this).children('ul').css('visibility','hidden');
        })
  }


});
1

A, widzę.

Podstawy CSS.

padding wlicza się do szerokości, więc przy ekranie 800px 100% szerokości PLUS 15px paddingu da 830px szerokości

Zlikwidujesz takie działanie poprzez dodanie box-sizing: border-box;
http://jsbin.com/caluvomihi/4/edit?css,output

0

O miałem pisać właśnie, że znalazłem problem, a tu proszę odpowiedź :)
W każdy bądź razie dzięki wielkie za poświęcony czas :)
Sorrki też, za błędy przy wstawianiu postów, ale rzadko bardzo to robię, wolę czytać :)

1 użytkowników online, w tym zalogowanych: 0, gości: 1