html - Make element position fixed while width = 100% stays valid -
i'm having problem html , css(still learning both). i'm trying make standard layout image in div fixed top of page, under horizontal navigation bar, footer, , news module in between.
this how looks currently:
http://pokit.org/get/?05aadb16da601f1aa68bc3321e891107.jpg
you can see problem(2 actually). can't position list on navigation bar image, nor can make footer image wide navigation image.
this html:
<!doctype html> <html> <head> <meta charset="utf-8"> <link rel = "stylesheet" href = "/servis/stilovi/standardstyle.css"> <title>granulo - re d.o.o</title> </head> <body> <!-- element koji cini header --> <div id = "headers"> <img id="aparat_slika" src="/servis/resursi/slike/aparat_slika.png" alt="slika nije ucitana"> <img id="logo_slika" src="/servis/resursi/slike/granulo_logo.png" alt="slika nije ucitana"> <p id="naziv_firme">granulo - re d.o.o</p> <p id="djelatnost_firme" class="djelatnost">promet, inženjering servis protivpožarnih uređaja<br>bojnička 47, sarajevo</p> </div> <!-- element koji cini vertikalni meni --> <nav id = "navbar"> <ul id="lista_meni"> <li ><a class="djelatnost" href="#">link 1</a></li> <li ><a class="djelatnost" href="#">link 2</a></li> <li ><a class="djelatnost" href="#">link 3</a></li> <li ><a class="djelatnost" href="#">link 4</a></li> <li ><a class="djelatnost" href="#">link 5</a></li> </ul> <img id="navbar_bg" src="/servis/resursi/slike/horizontal_stripe.png" alt="slika nije ucitana"> </nav> <!-- element u kojem se nalaze novosti --> <div id = "news"></div> <!-- element koji cini footer --> <div id = "footers"> <img id="footer_image" src="/servis/resursi/slike/horizontal_stripe.png" alt="slika nije ucitana"> </div> </body> </html> and css:
@import url(http://fonts.googleapis.com/css?family=roboto:700); body{ margin-left: 10%; margin-right: 10%; background-color: white; } ul{ list-style-type: none; } /* images */ #aparat_slika{ float:right; } #logo_slika{ float:left; } #navbar_bg{ width: 100%; margin: 0; padding: 0; } #footer_image{ width: 100%; } /* div style */ #headers{ background-color: #e6e1e1; width: 100%; float: right; border: 1px solid black; } #naziv_firme{ font-family: 'roboto', bold; font-size: 30pt; float: top; margin-top: 10px; } #navbar{ width: 100%; border: solid 1px black; float: right; padding: 0; text-align: center; } #navbar ul{ width: 100%; list-style: none; margin: 0; padding: 0; } #navbar ul li{ margin: 0; padding: 50px; display: inline; } #navbar a:visited{ margin: 0; padding: .3em .4em .3em .4em; text-decoration: none; font-weight: bold; font-size: medium; } #navbar ul a:active{ margin: 0; padding: .3em .4em .3em .4em; text-decoration: none; font-weight: bold; font-size: medium; } #navbar ul a:hover{ margin: 0; padding: .3em .4em .3em .4em; text-decoration: none; font-weight: bold; font-size: medium; background-color: #227755; } #footers{ position: fixed; bottom: 0; width: 100%; border: solid 1px black; } #news{ border:solid 1px black; } /* klasa za male natpise za firme */ .djelatnost{ font-family: 'roboto', italic; font-size: 10pt; float:top; margin-top: -40px; color: black; } .linksize{ height: 120px; }
first i'd recommend wrap code inside inside of wrapper instead of giving margin actual body, this
<div class="container"> <div id = "headers">...</div> <nav id = "navbar">...</div> <div id = "news">...</div> <div id = "footers">...</div> </div> css
body{ background-color: white; } .container{ width:1000px; margin: 0 auto; } 2nd footer position:fixed; won't obey container width, in case won't obey margin-right:10%; of body, can fix little trick this:
#footers { position: fixed; bottom: 0; left: 50%; /* tells footer horizontally centered */ margin-left: -502px; /* need half of width (+2px because of 1px added border both left , right site in case) */ width: 1000px; border: solid 1px black; } and @ last make navbar/links on header image add position: absolute; class .navbar
here's online example. did not include links on header image said, position: absolute; way it, need play around it.
solve problem of .navbar going off container because of new position:absolute; wrap .navbar inside of new div or better wrap content belongs header on new div class , add new class tag position: relative;
Comments
Post a Comment