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;
}
HTML 
PHP 
CSS 