Witam stworzyłem stronę ... No nie do końca, ponieważ gdy najeżdżam na dolne menu to cała stopka się rusza (zwiększa się wysokość prawie dwukrotnie) a nagłówki list rozwijanych są w poziomie z ostatnim elementem rozwiniętej listy :0 nie wiem czy coś rozumiecie więc wstawiam kod :P
body
{
background: url(img/squairy_light.png);
font-family: 'Roboto';
margin: 0;
}
.head
{
background: url(img/debut_dark.png);
margin-top: 0;
}
h1
{
font-size: 50px;
letter-spacing: 2px;
text-align: center;
margin-top: auto;
margin-bottom: auto;
padding-top: 25px;
}
nav
{
text-align: center;
}
.topnav
{
list-style-type: none;
background-color: #1d8db3;
min-height: 60px;
font-size: 25px;
padding: 10px;
margin: 0;
}
.topnav > li
{
display: inline-block;
padding-right: 20px;
padding-left: 20px;
border-right: 1px dashed #072c68;
line-height: 250%;
}
.topnav > li:first-child
{
border-left: 1px dashed #072c68;
}
.topnav > li a
{
color: #fff;
text-decoration: none;
}
.topnav > li a:hover
{
color: #072c68;
}
.mainhead
{
margin-bottom:35px;
text-align:center;
margin-top: 0;
font-size: 10px;
}
.content
{
background-image: url("squairy_light.png");
}
h2
{
margin-left: 100px;
}
.paragraph
{
text-align: justify;
margin-left: 100px;
margin-right: 100px;
}
footer
{
text-align: center;
background-color: #2b3d59;
margin-top: 50px;
}
.add
{
background-color: #384347;
width: 600px;
min-height: 150px;
display: inline-block;
margin-left: 30px;
}
.add2
{
background-color: #123875;
width: 600px;
min-height: 150px;
display: inline-block;
}
.fb
{
background-color: #384347;
display: inline-block;
width: 250px;
height: 100px;
padding: 20px;
text-align: center;
margin-left: 100px;
margin-right: 20px;
}
.tw
{
background-color: #384347;
display: inline-block;
width: 250px;
height: 100px;
padding: 20px;
text-align: center;
margin-left: 50px;
margin-right: 20px;
}
.portfolio
{
background-color: #384347;
display: inline-block;
width: 250px;
height: 100px;
padding: 20px;
text-align: center;
margin-left: 50px;
margin-right: 100px;
}
.fb:hover
{
background-color: #3b5998;
display: inline-block;
width: 250px;
height: 100px;
padding: 20px;
text-align: center;
margin-left: 100px;
margin-right: 20px;
}
.tw:hover
{
background-color: #00aced;
display: inline-block;
width: 250px;
height: 100px;
padding: 20px;
text-align: center;
margin-left: 50px;
margin-right: 20px;
}
.portfolio:hover
{
background-color: #a0309b;
display: inline-block;
width: 250px;
height: 100px;
padding: 20px;
text-align: center;
margin-left: 50px;
margin-right: 100px;
}
.social a
{
text-decoration: none;
color: #231c23;
}
.footertop2
{
display: inline-block;
font-size: 25px;
margin-left: 50px;
margin-right: 50px;
margin-top: 15px;
color: #fff;
min-height: 100px;
}
.footertop2 a
{
color: #ffffff;
text-decoration: none;
display: block;
}
.footertop2:hover
{
color: #1d8db3;
}
.footertop2:hover > ul > li
{
display: block;
}
.footertop2 ul > li
{
list-style-type: none;
padding: 0;
margin: 0;
background-color: #3c4e69;
z-index: 100;
border-top: 1px dashed #2b3d59;
display: none;
}
.footertop
{
display: inline-block;
font-size: 25px;
margin-left: 50px;
margin-right: 50px;
min-height: 100px;
margin-top: 15px;
}
.footertop a
{
text-decoration: none;
color: white;
}
.footertop a:hover
{
color: #1d8db3;
}
.footertop ul > li
{
list-style-type: none;
padding: 0;
margin: 0;
height: 40px;
background-color: #3c4e69;
z-index: 100;
border-top: 1px dashed #2b3d59;
display: none;
}
.footerbot
{
background-color: #212730;
margin-top: 30px;
font-size: 15px;
clear: both;
}
.sticky
{
width: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 100;
}
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title></title>
<meta name="author"content="">
<meta name="description"content="">
<meta name="keywords"content="">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="dodatki/css/fontello.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<header class="head">
<h1></h1>
<p class="mainhead">Szukam mentora ;)</p>
<nav>
<ul class="topnav">
<li><a href="#">Źródła wiedzy</a></li>
<li><a href="#">O stronie</a></li>
<li><a href="#">Artykuły</a></li>
<li><a href="#">Programista</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
</header>
<div class="content">
<main>
<article>
<section>
<header>
<h2>Z CZYM TO SIĘ JE?!</h2>
</header>
</section>
<section>
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="paragraph">auris, tincidunt eget quam eget, accumsan placerat felis. .</p>
<p class="paragraph"> enenatis, tellus eros cursus mauris, vel pharetra lacus.</p>
<p class="paragraph">facilisis. Donec mattis vulputate odio, id l.</p>
</section>
<section>
<div class="add">
</div>
<div class="add2">
</div>
<div style="clear:both"></div>
</section>
<p class="paragraph">Cras tincidunt ante sed est pellentesque, </p>
<p class="paragraph">Nam tristi.</p>
<p class="paragraph">Mauris sed maximus ar.</p>
<p class="paragraph">Suspendisse turpis massa,.</p>
</article>
</main>
</div>
<section class="social">
<a href="#"><div class="fb"><i class="icon-youtube"></i></div></a>
<a href="#"><div class="tw"><i class="icon-twitter"></i></div></a>
<a href="#"><div class="portfolio"><i class="icon-emo-grin"></i></div></a>
</section>
<footer>
<div id="męczarnia">
<div class="footertop"><a href="#">Kim jestem</a></div>
<div class="footertop2">Ostatnie wpisy
<ul>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
</ul>
</div>
<div class="footertop2">Polecane
<ul>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
</ul>
</div>
<div class="footertop"><a href="#">Gra</a></div>
<div class="footerbot">Wszelkie prawa zastrzeżone © Dziękuję za wizytę</div>
</div>
</footer>
<script src="jquery.js"></script>
<script>
$(function() {
var NavY = $('.topnav').offset().top;
var stickyNav = function(){
var Scrolly = $(window).scrollTop();
if(Scrolly > NavY) {
$('.topnav').addClass('sticky');
} else {
$('.topnav').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
</script>
</body>
</html>
