ÿþ<html> <head> <title> PaweB Aapa 1.4 </title> <style> .kontener{ position: relative; background-color: lightgreen; width: 1100px; padding: 0px; margin: 0px auto; height: 1000px; border: 1px solid green; } } body {margin:0;} ul.topnav { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } ul.topnav li {float: left;} ul.topnav li a { display: inline-block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; transition: 0.3s; font-size: 17px; } ul.topnav li a:hover {background-color: #555;} ul.topnav li.icon {display: none;} @media screen and (max-width:680px) { ul.topnav li:not(:first-child) {display: none;} ul.topnav li.icon { float: right; display: inline-block; } } @media screen and (max-width:680px) { ul.topnav.responsive {position: relative;} ul.topnav.responsive li.icon { position: absolute; right: 0; top: 0; } ul.topnav.responsive li { float: none; display: inline; } ul.topnav.responsive li a { display: block; text-align: left; } } .pasek{ width: 1100px; height: 200px; margin: 50px auto; border: 1px black; background-color: red; } .obrazek{ background-image: url(http://static.comicvine.com/uploads/original/14/148363/4146487-v-for-vendetta-psd72879.png); background-repeat: no-repeat; height: 400px; width: 400px; margin: 200px 300px auto; border: 1px solid green; </style> </head> <body> <div class="kontener"> <ul class="topnav" id="myTopnav"> <li><a class="active" href="index.html">Strona gBówna</a></li> <li><a href="opis.html">Opis</a></li> <li><a href="galeria.html">Galeria</a></li> <li><a href="wiadomosci.html">Wiadomo[ci</a></li> <li class="icon"> <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">0&</a> </li> </ul> <div class="pasek"></div> <div class="obrazek"></div> <script> function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } </script> </div> </body> </html>