Problemy z footerem

0

Witam.
Na codzień programuje w javie, ale zaszła potrzeba, abym zrobił dla swojego serwera gry stronę internetową.
Znam php, html ale w css raczej dużo nie robiłem.

Mam taki problem, że ustawiam, aby footer był 10px pod treścią, ale on "przykleja się" do treści.
Jak do footera przypisze "display:inline-block;" lub "float; left/right;" to footer przesuwa się te 10px do dołu, ale niestety też przesuwa się do końca w lewo (display:inline-block) lub prawo (float:right, ale to mnie nie dziwi ;p)
Próbowałem zmieniać marginy footera i bawiłem się też paddingami, ale bez display:inline-block nic z tego nie działa :/

Na szybko napisałem małe demko strony i wrzuciłem na http://ftk.ddns.net
cssa znajdziecie na hrrp://ftk.ddns.net/css/style.css

Ale jakby co, to jeszcze tutaj wrzuce:

HTML:

   <head>
      <meta charset="utf-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
      <title>TEST</title>
      <meta name="description" content="deskr" />
      <meta name="keywords" content="tagi" />
      <meta name="author" content="FTK" />
      <link rel="stylesheet" type="text/css" href="css/style.css" />
      <script src="js/jquery.min.js"></script>
      <script type="text/javascript" src="js/main.js"></script>
      <script type="text/javascript" src="js/Chart.min.js"></script>
      <style>
         #logo {
         background: url("images/logo.png") top center no-repeat;
         }
      </style>
      <style type="text/css">
         body {
         background:url("images/bg.png") top center #000 repeat-y;
         background-attachment:fixed;
         }
      </style>
   </head>
   <body id="home">
      <div id="wraper">
         <header id="header">
         <a href="#" title="Sklep Minecraft">
            <h1 id="logo">test</h1>
         </a>
         <nav class="main-menu">
            <ul id="menu-top">
               <li><a  class="navactive"  href="" class="first" title="Strona główna">KARTA1</a></li>
               <li><a  href="?p=zaloguj" title="Logowanie">KARTA2</a></li>
            </ul>
         </nav>
         <div id="main">
            <aside>
               <section>
                  <header class="headers">
                     <center>
                        <b>Panel1</b>
                        <hr />
                        <a href="?p=zaloguj">guzik1</a><br />
                        <a href="?p=odzyskajkonto">guzik2</a><br />
                     </center>
                  </header>
               </section>
               <br />
               <section>
                  <header class="headers">
                     <center>
                        <b>Panel2</b>
                        <hr />
                        <ul class="kat">
                           <li>
                              <span class="parent">Rozwijana</span>
                              <ul>
                                 <li><a href="" style="color: #e86666;">:D</a></li>
                              </ul>
                           </li>
                        </ul>
                     </center>
                  </header>
               </section>
               <br />
               <section>
                  <header class="headers">
                     <center>
                        <b>Panel3</b>
                        <hr />
                        <a>1</a><br />
                        <a>2</a><br />
                        <a>3</a><br />                        
                     </center>
                  </header>
               </section>
               <br />
               <section>
                  <header class="headers">
                     <center>
                        <b>Panel4</b>
                        <hr />
                        <a>asdfasdf</a><br />
                     </center>
                  </header>
               </section>
               <br />
            </aside>
            <section id="content">
               <h2>
                  <header class="header">Strona Główna</header>
               </h2>
               <br />
               <div class="container contais">
                  
                  <center>
                     <h3>Witaj na stronie testowej!</h3>
                     <div><br></div>
                     <div><img width="640" height="339" src="images/bg.png"><br></div>
                     <div><br></div>
                     <div>Błagam, niech ktoś mi ogarnie ten footer :)</div>
                  </center>
               </div>
            </section>
         </div>
      </div>
      <footer id="footer" class="clearfix">
         <div class="wrap">
            <div class="menu">
               <a href="" title="Strona główna">Panel1</a>  |  
               <a href="" title="Voucher">Panel2</a>  |  
            </div>
            <div class="copy">Wszelkie prawa zastrzeżone © ...<br /></div>
         </div>
      </footer>
   </body>
</html>```

CSS:
```html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html { font-family: sans-serif; color: #222; }
body { margin: 0; font-size: 1em; line-height: 1.4; }

::-moz-selection { background: #fc7d00; color: #fff; text-shadow: none; }
::selection { background: #fc7d00; color: #fff; text-shadow: none; }

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
img {max-width: 100%}

a:active, a:focus { outline:none; }

body { 
	padding: 0;
	margin: 0;
	color:#bbb;
	font-size:16px;
	font-family: Arial, sans-serif;
	overflow-x: hidden;
	}
	
a {	color: #666; text-decoration: none; }
a:hover { color: #fc7d00; text-decoration: none; }

nav a:hover { 
	color: #fff; 
  background: url('/images/menu-active.png') #f07a02 repeat-x; 
  text-shadow: 1px 1px 9px black;
  border-left: 0px #ca7b57 solid;
  margin-top: 1px;
  }

#wraper, .wrap {
	width: 990px;
	margin: 0 auto;
}
	
h1#logo {
	position: relative;
	text-align: center;
	text-indent: -9999px;
  margin: 0 0 15px;
}


#logo {
	width: 990px;
	height: 145px;
  font-weight: bold;
}

nav {
  background: url('/images/menu.png') top center no-repeat;
  height: 42px;
  text-transform: uppercase;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  float: left;
}

nav a {
  text-shadow: 1px 1px 1px #000;
  color: #f3f3f3;
  padding: 12px 26px 13px;
  display: block;
  font-size: 12px;
  font-family: euromode-b, Arial;
  margin: 1px 1px;
}

#main {
  margin: 25px 0px 10px;
  font-size: 14px;
  line-height: 22px;
}

#content {
  width: 630px;
  padding: 0 0px;
  float: left;
}

.contais {background: url('/images/header-bg.png') no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

  #content .container {
    padding-top: 3px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 20px;
  }

aside {
  width: 320px;
  float: right;
  color: #aaa;
}

.header {
	
  background: url('/images/header-bg.png');
  font-size: 14px;
  color: white;
  font-weight: normal;
  font-family: euromode-n;
  padding: 9px 0px 0px 20px;
  border-left: 2px orange solid;
  min-height: 30px;
}
.headers {
background: url('/images/header-bg.png') no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
  font-size: 14px;
  color: white;
  font-weight: normal;
  font-family: euromode-n;
  padding: 9px 0px 10px 20px;
  border-left: 2px orange solid;
  min-height: 30px;
}


#footer {
  background: url('../images/footer.png') top center no-repeat;
  margin: 10px 0px 20px 0px;
  height: 200px;
  text-align: right;
}

#footer .menu {
  margin-top: 73px;
  font-size: 12px;
}

#footer .copy {
  margin-top: 31px;
	font-size: 11px;
  opacity: 0.5;
}

.clearfix:before, .clearfix:after { content: ""; display: table; }
#footer, .clearfix:after { clear: both; }
.clearfix { *zoom: 1; }



@font-face {
    font-family: 'euromode-b';
    src: url('/fonts/eurob-webfont.eot');
    src: url('/fonts/eurob-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/eurob-webfont.woff') format('woff'),
         url('/fonts/eurob-webfont.ttf') format('truetype'),
         url('/fonts/eurob-webfont.svg#WebfontRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'euromode-n';
    src: url('/fonts/euron-webfont.eot');
    src: url('/fonts/euron-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/euron-webfont.woff') format('woff'),
         url('/fonts/euron-webfont.ttf') format('truetype'),
         url('/fonts/euron-webfont.svg#WebfontRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'Bebas';
    src: url('/fonts/BebasNeue-webfont.eot');
    src: url('/fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/BebasNeue-webfont.woff') format('woff'),
         url('/fonts/BebasNeue-webfont.ttf') format('truetype'),
         url('/fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

ul.kat {
  padding: 0 0 0 15px;
  margin: 5px 0;
}

ul.kat li { 
list-style-type: none; 

} 

ul.kat > li {
  background: url('/images/arrow.png') no-repeat 0px 7px;
  padding-left: 15px;
}
 
ul.kat li:hover { 
list-style-type: none; 
cursor:pointer;
color: #fc7d00;
}

aside .headers > center > a {
  margin-left: 15px;
}
 
ul.kat li a { 
display : block; 
text-decoration : none; 
} 
 
ul.kat li li:hover { 
color:gray;
} 
 
ul.kat li ul { 
margin-left: 15px;
padding: 0;
} 

.kat .parent {
  display: block;
}


aside center {
  text-align: left;
}
 
ul.kat li:hover ul { 
padding: 0; 
}
.header {
    background: url(/images/black.png) !important;
}
nav {
    background: url(/images/black.png) !important;
}
.headers {
    background: url(/images/black.png) !important;
}
.contais {
    background: url(/images/black.png) !important;
}

.navactive { 
	color: #fff; 
  background: url('/images/menu-active.png') #f07a02 repeat-x; 
  text-shadow: 1px 1px 9px black;
  border-left: 0px #ca7b57 solid;
  margin-top: 1px;
}

h1,h2,h3{
    padding: 0px;
    margin: 0px;
}
0

taki tips jak chcesz mieć półprzeźroczysty div, to nie musisz stosować obrazka png jako tło:
https://developer.mozilla.org/en-US/docs/Web/CSS/background-color
https://www.w3schools.com/css/css_image_transparency.asp
bo jak stosujesz obrazek jako tło plus sztywne pixele to wtedy robi się nieciekawie, zamiast się katować użyj jakiegoś gotowego grida https://github.com/dmhendricks/bootstrap-grid-css

0

Wiem, ale to jest demko. Normalnie mam tam wrzucony obrazek z przeźroczystością.

0
  1. Pewnie używasz firebuga (Chrome, FF) ale na tym czarnym tle akurat będzie ładnie widać warstwy jak dodasz div {border:1px solid white;}. Będziesz widział co się dzieje.
  2. Aside ma float, Section ma float więc dodaj pod <section id="content"> pustego div-a z clearem, żeby czyścił opływanie szczególnie, że main je opakowuję. (Można dodać clear do main ale pierwsza opcja będzie bezpieczniejsza - nowe elementy)
  3. W tym momencie powinieneś już sterować wysokością footera.

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.

Utwórz konto