Jump to content

DIV changes to Browser Screen Size changes [Solved]


J2913
 Share

Recommended Posts

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 by J2913
Link to comment
Share on other sites

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 by J2913
Link to comment
Share on other sites

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...