update 2 fixed "edit 2" below, contents of bodysection div scrolling on top of navlogo/navelements divs. position: relative culprit there, , have no position (so, defaults static, understand) on bodysection class, , works expected.
i still think of things within code little funky (updated fiddle , code embedded below). instance, have line want to, have very, strange width properties;
left, mid, , rightsection set 30% width, take ~1/3 of available space. makes perfect sense.
bodysection class has width of 98%, along 1% padding left, , 2% padding right. why isn't 100% width , 1% padding on both sides? sits inside of 'container' div, 100% width. figured inherit boundaries parent div.
.navelements class has width of 95%, , if bump 100%, acts kinds of funny, pushing text off viewable screen. why that?
.navlogo class has width of 100%, , img tagged @ 100%, can tell you, size see not 100% actual image size. is size want, it's not 100%, why that?
even on 32" monitor (my external monitor laptop), see scroll bar horizontally (across bottom). don't want this. why here?
updated fiddle: fiddle here
updated code:
html:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="description" content=""> <meta name="keywords" content=""> <title>frick solutions - technology consulting small business</title> <meta name="keywords" content="html,css"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <link rel="stylesheet" type="text/css" href="/redesign/css/fricksolutions.css"/> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=roboto"> </head> <body id="home"> <div class ="container"> <div class="navlogo"> <a href="/index.html"><img src="/redesign/img/fricksolutionslogowhite.png" style="height:100%; width:auto%;"> </a> <!-- style="max-width:40%;max-height:3%;"></a> --> <div class="navelements" align="right"> <li> <a href="/why.html">why us?</a></li> <li> <a href="/smallbusiness.html">small business</a></li> <li><a href="/servers.html"> servers </a></li> <li><a href="/athome.html"> @home </a> </li> <li> <a href="/contact.html">contact</a> </li> </div> <!--close navlogo div --> </div> <!--close navelements div --> <div class = "bodysection"> here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br> here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br> here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br> here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br> here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br> here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br> here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br> here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br> <div id = "leftsection"> left text test </div><!-- close leftsection --> <div id = "midsection"> mid text test </div> <!-- close midsection --> <div id = "rightsection"> right text test </div><!-- close rightsection --> </div> <!-- close bodysection --> </div> <!-- close container --> </body> </html> css:
body { color: black; font-family: "roboto", sans-serif; background-color: white; margin: 0; /*use ensure left content goes way border of page */ } @media screen , (min-width:30em) { /* used 600 px */ .navlogo { padding-left: 1%; padding-right: 1%; position: fixed; background-color: #373737; width: 100%; height: 8%; } .navelements { padding-right: 1%; font-family: "roboto", sans-serif; background-color: transparent; position: absolute; bottom: 0px; width: 95%; padding-bottom: .25%; } .navelements li { color: white; background-color:transparent; display: inline-block; padding: 5px 10px 0 0; } .navelements { text-deocration: none; } a:link { color: white } a:visited { color: white } a:hover { color: grey; } .bodysection{ padding-left: 1%; padding-right: 2%; padding-top: 5%; /*this here hack make sure bodysection div shows under navlogo/navelement divs*/ width: 98%; /* position: relative;*/ /* overflow: hidden;*/ } #leftsection, #midsection, #rightsection { width: 30%; min-width: 30%; height: 100px; border: 1px solid red; margin-left: 10px; float:left; padding-left: 1%; padding-right: 1%; padding-top: 1%; padding-bottom: 1%; } .container{ width: 100%; height: auto; /*overflow: hidden;*/ } } update (minus updated fiddle/code) thank (its been less hour, , i've got lot of tips already!). love community, though come here rarely. need change that!
this live version of redesign -- , edit 2, realized i've got doesn't let me click of links i've put in top nav. assume because of bodysection overlap (with 5% padding), love hear ideas.
as of now, haven't implemented many of suggestions, know (i need root through them , test them well). can see, got scrolling working, , have solved 'bodysection' issues putting top-padding of 5% on div, drop down below nav. unfortunately, not stop content of bodysection div covering navelements , navlogo divs once start scrolling.
i going remove code , fiddle below (to avoid confusion) , post updated code/fiddle here.
original post (minus code , fiddle link)
so relatively novice css (as may able discern css file attached in fiddle), working on getting better it. technology consulting professionally, , want expand skills/services include web design (besides, want own website great looking, without having pay it!).
after bunch of trial , error, had top nav looking way wanted it.
then started playing content, wanted 3x2 table display icons , text in. got working (a 3x1, text now) expected, after did that, decided needed have between header bar , css table, figured i'd throw in bunch of dummy text , make sure scrolling went expected. found was unable make body of page scroll @ all.
i have done ton of research trying fix this, posts 'stop using fixed position' or else point. unfortunately, if remove fixed position, nav bar either breaks, or doesn't stay visibile.
in short, i'm looking for: nav bar needs on screen 100% of time. don't need crazy jquery pop top @ scroll point - want there.
my content needs below nav bar, in main div (bodysection). within bodysection, need have ability embed 3x1 (or 3x2) css table, composed of leftsection, midsection, rightsection.
any hints/tips/tricks clean css , implementation of within html appreciated. self taught (html , css - started learning html in mid 90s pre-teen), expect learn bit every time interact folks here on forum.
there quite few things wrong (no offence, had start somewhere). i'm going post code fix , write bit of analysis tips in couple hours or so.
body { color: black; font-family:"roboto", sans-serif; background-color: white; margin: 0; /*use ensure left content goes way border of page */ } @media screen , (min-width:30em) { /* used 600 px */ .navlogo { padding-left: 1%; padding-right: 1%; position: fixed; /* max-width: 40%; */ background-color: #373737; width: 100%; height: 30px; } .navelements { padding-right: 5%; font-family:"roboto", sans-serif; background-color: transparent; position: fixed; padding-top: 5px; padding-left: 25%; } .navelements li { color: white; background-color:transparent; display: inline-block; padding-left: 15px; } .navelements { text-deocration: none; } a:link { color: white } a:visited { color: white } a:hover { color: grey; } #bodysection { padding-top: 25px; padding-left: 1%; padding-right: 2% width: 98%; } #leftsection, #midsection, #rightsection { width: 30%; min-width: 30%; height: 100px; /* border: 1px solid red; */ margin-left: 10px; float:left; padding-left: 1%; padding-right: 1%; padding-top: 1%; padding-bottom: 1%; } #container { width: 100%; height: auto; } }<body id="home"> <div class ="container"> <div class="navlogo"> <a href="/index.html"> <img src="/img/fricksolutionslogowhite.png" style="height:100%; width:auto%;"> </a> </div> <div class="navelements" align="right"> <li><a href="/why.html">why us?</a></li> <li><a href="/smallbusiness.html">small business</a></li> <li><a href="/servers.html"> servers </a></li> <li><a href="/athome.html"> @home </a></li> <li><a href="/contact.html">contact</a></li> </div> <div id = "bodysection"> here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br> here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br> here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br> here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br> here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br> here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br> here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br> here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br>here text <br> <div id = "leftsection"> <p>left text test</p> </div><!-- close leftsection --> <div id = "midsection"> <p>mid text test</p> </div> <!-- close midsection --> <div id = "rightsection"> right text test </div><!-- close rightsection --> </div> <!-- close bodysection --> </div> </body>first , foremost, suggest downloading web development tools understand issues. use chrome developer tools (comes pre-installed chrome). right click , inspect element pull plethora of tools web development.
i suggest reading on w3 schools , massive library of simple examples , tutorials.
alrighty, tip time:
- 2 body tags not recommended.
- id's on body tags not recommended.
- using not recommended, use padding attribute instead.
- tab out elements organizational purposes , easy error spotting.
one of bigger errors noticed understanding "position" attribute options. 99% of page want default "static" positioning, places content relative other content. navigation , objects should stay in view regardless of scrolling use "fixed". there few cases require use of "absolute".
now unrelated webpage, if want nice aesthetics , don't want spend 400 hours developing style sheets. recommend responsive css template such bootstrap.
for great (i may biased) example of front-end web development gladly point resume website. http://www.brennen-sprimont.com/. right click , inspect page code behind it.
update 1 text appearing "above" navbar. need edit z-index of either "bodysection" lower or "navlabel" higher desired result.
update 2
@media screen , (min-width: 30em) .bodysection { padding-left: 1%; padding-right: 1%; padding-top: 5%; } your total width 101% before causes scroll bar appear. of course 3 divs not centered, because padding left 1% in parent (bodysection) , have margin-left of 10px on leftsection div.
the reason navelements weird because in navlogo has % based margins throws 102%. adding absolute ignores parent divs margins.
Comments
Post a Comment