Witam
Jestem w trakcie nauki HTML i CSS, podczas 3 odc. "Kurs CSS odc. 3: Rozwijane, przyklejane menu główne (sticky)" pokazywane było jak zrobić owy sticky bar.
Problemem jest że mam prawie identycznie (różnie się tym że nie używałem class ) a sticky bar nawet nie drgnie :P
Jakby ktoś mi wytłumaczył czym to jest spowodowane byłbym wdzięczny :D
HTML
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title>Gry retro</title>
<meta name="description" content="Wszytsko o grach z lat 90' i wcześniej" />
<meta name="keywords" content="gry,stare,retro,beka" />
<link rel="stylesheet" href="gry.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link rel="stylesheet" href="fontello-50b96ec5/css/fontello.css" type="text/css" />
</head>
<body>
<div id="container" >
<div id="header">
<div id="logo">
<img src="pad.png" style="float:left;" style="margin-right:3px;"/>
<span style="color:#cc0000"> Retro</span>gry.com
</div>
<div style="both:clear;"></div>
</div>
<div id="nav">
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla hendrerit dapibus erat ac laoreet. Sed ut elit eget nisi bibendum sagittis. Quisque sed posuere purus. Nulla non arcu mauris. Aenean convallis tortor in pharetra tristique. Cras tincidunt ligula quam. In lectus tortor, ullamcorper ac pellentesque sit amet, tristique condimentum libero. Ut odio ex, cursus nec ex vitae, consectetur sodales sem.</p>
<p>Ut ac leo justo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum blandit leo non erat bibendum condimentum. Maecenas dapibus elit ante, sed aliquet mi semper in. Nullam iaculis magna arcu, nec laoreet turpis pretium eget. Nulla sit amet pellentesque lectus. Vivamus fringilla a tellus vel pellentesque. In dignissim, ipsum eu feugiat vulputate, purus nibh malesuada diam, ornare semper nisl lectus a dolor. Fusce in imperdiet lectus, scelerisque rutrum justo. Cras laoreet condimentum neque, vitae ultrices est tempus sit amet. Etiam pellentesque ipsum vel mi aliquet dignissim in in nulla. Sed posuere, diam facilisis consectetur hendrerit, ex nibh rutrum sapien, eu feugiat erat ex ut turpis. In justo justo, ornare a commodo id, venenatis eu nulla.</p>
<p>Praesent ornare, nulla sit amet posuere elementum, orci risus auctor ligula, sit amet placerat massa tortor sit amet sem. Quisque a tincidunt urna. Praesent at velit nec mauris malesuada sagittis. Suspendisse efficitur malesuada eleifend. Mauris porttitor pretium magna, a imperdiet lorem egestas eget. Etiam placerat, dolor sed condimentum faucibus, metus velit gravida orci, ut maximus ligula diam eu urna. Duis aliquam justo quis diam elementum lacinia. Morbi dapibus sed velit ut efficitur. Nulla fermentum placerat lectus, id cursus ipsum laoreet id. Phasellus at turpis placerat, aliquam nunc tristique, semper sem. Nulla in viverra enim. Nullam porta, orci vitae dapibus iaculis, quam neque maximus arcu, id interdum enim augue eget orci.</p>
<p>Curabitur eu suscipit nibh, eu dignissim nisi. Curabitur mauris elit, porttitor in libero vel, convallis blandit ex. Vivamus maximus porttitor nulla, nec interdum risus ullamcorper quis. In hac habitasse platea dictumst. Vestibulum ultrices venenatis libero ut tincidunt. Aliquam laoreet blandit quam nec feugiat. Mauris placerat nisl at sapien scelerisque, vel mattis risus aliquet. Cras id enim ut dolor varius ultricies. Sed laoreet lorem massa, sed hendrerit nulla efficitur eu. Mauris porttitor urna ac nisi vehicula tempus.
Mauris pulvinar ante sit amet gravida efficitur. Pellentesque lectus est, euismod eget dapibus suscipit, tincidunt eget leo. Suspendisse tempus nisi felis, et ornare risus tristique et. Vestibulum tincidunt libero ac felis mattis lacinia. Curabitur convallis imperdiet tortor, ut tristique orci ultricies vel.</p>
<p>Vestibulum lacinia et est eu auctor. Phasellus rhoncus urna sed ipsum posuere scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec aliquet tortor. Fusce ac nulla in lorem interdum tincidunt ac id est. Nulla condimentum enim tellus, a molestie nisl bibendum a. Sed elit orci, vehicula eu ex a, hendrerit faucibus sem. Vivamus turpis ex, suscipit ut sodales in, auctor et ipsum. Pellentesque posuere posuere quam a molestie. Nullam posuere interdum massa varius tempor. Aenean venenatis ipsum et erat eleifend hendrerit.</p>
</div>
<div id="socials">
<div id="socdivs">
<div class="yt"><a href="https://www.youtube.com/" class="sociallink" target="_blank">
<i class="icon-youtube"></i> </a> </div>
<div class="fb"><a href="https://www.facebook.com/" class="sociallink" target="_blank">
<i class="icon-facebook-official"> </i> </a> </div>
<div class="tw"><a href="https://twitter.com/" class="sociallink" target="_blank">
<i class="icon-twitter"> </i> </a> </div>
<div class="go"><a href="https://plus.google.com/?hl=pl" class="sociallink" target="_blank">
<i class="icon-gplus"> </i> </a> </div>
<div style="clear:both;"></div>
</div>
</div>
<div id="footer">Mateusz Biskup © 2018 Wszelkie prawa zastrzeżone</div>
</div>
<script src="jquery-3.3.1.min.js"></script>
</body>
</html>
CSS
body
{
background-color:#303030;
color:#ffffff;
font-family: 'Lato', sans-serif;
font-size:20px;
margin: 0 !important;
}
#container
{
width:100%;
}
#header
{
width:100%;
padding:40px 0;
}
#logo
{
width:450px;
margin-left:auto;
margin-right:auto;
font-size:50px;
padding:10px 0;
}
#nav
{
width:100%;
background-color:#cc0000;
height:70px;
margin-top:10px;
margin-bottom:10px;
margin-right:5px;
margin-left:5px;
}
#content
{
width:1000px;
margin-left:auto;
margin-right:auto;
text-align:justify;
padding:5px;
}
#socials
{
width:100%;
background-color:#202020;
height:175px;
margin-top:20px;
text-align:center;
}
#socdivs
{
width:970px;
height:135px;
padding:20px;
margin-left:auto;
margin-right:auto;
}
.yt
{
float:left;
margin-left:15px;
margin-right:15px;
width:210px;
height:110px;
}
.yt:hover
{
background-color:#f00f0f;
cursor:pointer;
}
.fb
{
float:left;
margin-left:15px;
margin-right:15px;
width:210px;
height:110px;
}
.fb:hover
{
background-color:#3333ff;
cursor:pointer;
}
.tw
{
float:left;
margin-left:15px;
margin-right:15px;
width:210px;
height:110px;
}
.tw:hover
{
background-color:#66b3ff;
cursor:pointer;
}
.go
{
float:left;
margin-left:15px;
margin-right:15px;
width:210px;
height:110px;
}
.go:hover
{
background-color: #dd4b39;
cursor:pointer;
}
a.sociallink
{
display:block;
text-decoration:none;
width:210px;
height:110px;
color:#ffffff;
}
#footer
{
background-color:#101010;
text-align:center;
width:100%;
padding:20px;
}
.sticky
{
width:100%;
position:fixed;
top:0;
left:0;
z-index:100;
}
Z góry dziekuje
