J2913 Posted August 15, 2015 Share Posted August 15, 2015 (edited) Hello Again! Currently this is the webpage I've been working on. http://j2913.weebly.com/ My goal this time is to figure out how to code situational changes. Currently the width and height for my divs are strictly related to my own google chrome browser without the tabs. I would like to learn how to code it differently it terms of how to set it in order so that no matter what the screen/browser size, the .container would always be center of the screen, the .top would always be on top of the .container, the .bottom would always be on the bottom of the .container, the .left would always be on the left of the . container, and the .right would always be on the right of the .container. Furthermore, what I'm ultimately desiring would be this situation. An example is this website. https://css-tricks.com/forums/topic/setting-a-div-height-to-the-window-viewport-size/ I do not know the term of what I'm hoping to accomplish but it is this. If I resize my current webpage in Chrome by decreasing the width only I would like it that at a certain size, only my .right would be visible and the .left would be hidden. Just as the example website, as the width of the browser window decrease to a certain size only their left div is visible whereas their "log in" div on the right is hidden. What is this term called, and how do you to this? The example site mentioned jQuery. I'm only learning html and css so far, is it necessary? Thanks! Edited August 18, 2015 by J2913 Link to comment Share on other sites More sharing options...
J2913 Posted August 15, 2015 Author Share Posted August 15, 2015 (edited) CSS html {background: url(Autumn.jpg) no-repeat center center fixed;} body { margin: 0px;border: 0px;padding: 0px;} .container { width: 1000px; height: 956px; margin: 0 auto;} .top { width: 100%; height: 18px; line-height: 18px; margin-bottom: 1px; background-color:rgba(255,255,255,0.8); font-size:18px; text-align: center;} .top a { color: inherit; text-decoration: none;} .left {width: 310px; height: 920px; margin-right: 1px; margin-bottom: 1px; background-color:rgba(255,255,255,0.8); float: left; padding-top: 2px;} .left h1 { margin: 0px; border: 0px; padding: 0px; line-height: 1em; font-size: 24px; font-family: Georgia; text-align: center; } .right { width: 669px; height: 920px; margin-bottom: 1px; background-color:rgba(255,255,255,0.8); float: left; padding-top: 2px; padding-left: 10px; padding-right: 10px; overflow:scroll;} /*Right: Parable Title*/.right h1 { margin: 0px; border: 0px; padding: 0px; line-height: 1em; font-size: 28px; font-family: Georgia; } /*Right: Parable Verse*/.right h2 { margin: 0px; border: 0px; padding: 0px; line-height: 1em; font-size: 18px; font-family: Georgia;} /*Right: Parable Verse Content*/.right p { margin-top: 7px; margin-left: 21px; margin-bottom: 15px; line-height: 1.25em; border: 0px; padding: 0px; font-family: Georgia; } .bottom { width: 100%; height: 15px; line-height: 15px; background-color:rgba(255,255,255,0.8); font-size: 15px; text-align: center; clear:both;} Edited August 15, 2015 by J2913 Link to comment Share on other sites More sharing options...
J2913 Posted August 15, 2015 Author Share Posted August 15, 2015 Or is this a javascript problem? Link to comment Share on other sites More sharing options...
J2913 Posted August 15, 2015 Author Share Posted August 15, 2015 I think it is @media codes am I right? http://www.w3schools.com/cssref/css3_pr_mediaquery.asp Or is there a different way of coding this? Link to comment Share on other sites More sharing options...
dsonesuk Posted August 15, 2015 Share Posted August 15, 2015 As the devices get smaller you usually lose left, right columns OR they stack below or above main content depending how relevant it is that must be shown, as in images for page links, that would be to heavy for smaller devices, same with full broswer width background images for desktop layout but would be not practical for smaller mobile devices.This can be controlled using media queries, javascript should be used to make useability easier and enhance the site AFTER you have usable site that works without javascript because this is what search engine bots pick up, it will not pick up dynamic content, links created using javascript. Link to comment Share on other sites More sharing options...
J2913 Posted August 18, 2015 Author Share Posted August 18, 2015 Thanks! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now