html - How can I make a DIV element Fixed but non-Scaleable? -
hopefully i'm asking question right.
basically, i'm trying implement drop down menu design. i've been looking around coding it, since i'm still relatively new html/css , found few great tutorials have altered bit match have in mind.
the problem have don't want stuff scaled ever. when browser resized, moves div holding drop down menu. not how want design. description wrote can identify i'm looking for.
i have read can achieve using wrapper div set resolution of site. have tried doing this, breaks current code, @ least way i'm trying implement it.
here example of display wish accomplish:
below snippets of code html , css projects:
html: <!--nav wrapper--> <div class="wrapper"> <ul class="nav"> <li><a href="#">final cut</a> <!--begin main div--> <div class="navmain"> <!--begin sub nav--> <div class="navleft"> <span class="nav-titles">dbz final cut: navi</span><br><br><br> <div class="navdroplinks"><img class="navicon" src="images/general/site/4staricon.png"><a href="#"> home</a></div> <div class="navdroplinks"><img class="navicon" src="images/general/site/4staricon.png"><a href="#"> archived news</a></div> <div class="navdroplinks"><img class="navicon" src="images/general/site/4staricon.png"><a href="#"> us</a></div> <div class="navdroplinks"><img class="navicon" src="images/general/site/4staricon.png"><a href="#"> contact us</a></div> <br><br><span>this random text describing current article. picture above relate article. filler text. filler text.this filler text.this filler text.this filler text.this filler text.this filler text.this filler text. filler text.this filler text.this filler text.this filler text.this filler text.this filler text.this filler text.</span> </div> <!--end sub nav--> <li><a href="#">articles</a></li> <li><a href="#">sets</a></li> <li><a href="#">resources</a></li> </ul> <!--end nav list--> </div> <!--end of nav wrapper--> css:
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; } body { font-family: serif, sans-serif; background: white; font-size: 62.5%; color: black; } .wrapper { font-size: 1em; padding: 2em; margin: 0 auto; width: 80%; background-color: white; } .nav { list-style:none; width:940px; margin:30px auto 0px auto; height:43px; padding:0px 20px 0px 20px; background: #014464; background: -moz-linear-gradient(top, #0272a7, #013953); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953)); border: 1px solid #002232; } .nav li { float:left; display:block; text-align:center; position:relative; padding: 4px 10px 4px 10px; margin-right:30px; margin-top:7px; border:none; } .nav > li > { font-family:arial, helvetica, sans-serif; font-size:14px; color: #eeeeee; display:block; outline:0; text-decoration:none; text-shadow: 1px 1px 1px #000; text-transform:uppercase; } .nav > li:hover { left: -1px; border: 1px solid #777777; padding: 4px 9px 4px 9px; /* background color , gradients */ background: #f4f4f4; background: -moz-linear-gradient(top, #f4f4f4, #eeeeee); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f4f4f4), to(#eeeeee)); } .nav > li:hover > div { left: -1px; display: block; } .nav > li > div { position: fixed; right: 0px; top: 87px; height: 300px; display: none; padding: 10px 10px; box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.4); background:#f4f4f4; overflow: hidden; } .navmain { margin:-4px auto; position:fixed; text-align:left; border:1px solid #777777; border-top:none; width: 900px; /* gradient background */ background:#f4f4f4; background: -moz-linear-gradient(top, #eeeeee, #bbbbbb); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eeeeee), to(#bbbbbb)); } .nav-titles { display: inline-block; font-size: 1.2em; font-weight: bold; text-align: left; padding-right: 3px; } .navicon { width: 15px; height: 15px; } .navdroplinks { font-family:arial, helvetica, sans-serif; font-size:14px; display:block; padding-bottom: 6px; } .navdroplinks > { color: black; text-decoration: none; font-weight: bold; } .navleft { position: absolute; left: 10px; width: 288px; display: inline-block; font-size: 11px; text-align: left; padding-right: 3px; } .navcenter { position: absolute; width: 280px; left: 313px; font-size: 11px; text-align: center; } .navright { position: absolute; right: 10px; width: 280px; display: inline-block; font-size: 11px; text-align: center; padding-left: 3px; } .navimage { display: inline-block; width: 275px; height: 120px; }
as fixed not react parent div. fix make wrapper fixed instead way can center , content adjust around parent i.e wrapper.
i made new wrapper inside of wrapper , called navwrapper;
<div id="navwrapper"> <ul class="nav"> <li><a href="#">final cut</a> <!--begin main div--> <div class="navmain"> <!--begin sub nav--> <div class="navleft"> <span class="nav-titles">dbz final cut: navi</span><br><br><br> <div class="navdroplinks"><img class="navicon" src="images/general/site/4staricon.png"><a href="#"> home</a></div> <div class="navdroplinks"><img class="navicon" src="images/general/site/4staricon.png"><a href="#"> archived news</a></div> <div class="navdroplinks"><img class="navicon" src="images/general/site/4staricon.png"><a href="#"> us</a></div> <div class="navdroplinks"><img class="navicon" src="images/general/site/4staricon.png"><a href="#"> contact us</a></div> <br><br><span>this random text describing current article. picture above relate article. filler text. filler text.this filler text.this filler text.this filler text.this filler text.this filler text.this filler text. filler text.this filler text.this filler text.this filler text.this filler text.this filler text.this filler text.</span> </div> <!--end sub nav--> <li><a href="#">articles</a></li> <li><a href="#">sets</a></li> <li><a href="#">resources</a></li> </ul> <!--end nav list--> </li> </ul> </div> </div> and added css can see below.
#navwrapper { width: 982px; position: fixed; top: 30px; left: 0px; right: 0px; margin: 0px; margin-left: auto; margin-right: auto; }
Comments
Post a Comment