height 95 % not get it to work.

tomtefan · Post by **tomtefan** » Thu Mar 28, 2013 12:23 pm

Hello.

Iam trying to make my site auto adjust depending on the screen people have.
Iam using 1920x1080 resolution on my monitor.. some may have more.. or less.

Now, if i change my screen to 1280x.. the website looks ok. its a little margin at bottom, wich is good.

But on my 1920x.. the website is realy small.

<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="layout.css" type="text/css">
<title> Eldain-Design.com </title>
</head>
<body>

<div class="wrapper">

<div class="header"></div>

<div class="navbar">
<div class="button"><a href="index.php?page=home">Home</a></div>
<div class="button"><a href="news.php?page=news">News</a></div>
<div class="button"><a href="gallery.php?page=gallery">Gallery</a></div>
<div class="button"><a href="contact.php?page=contact">Contact</a></div>
<div class="button"><a href="about.php?page=about">About</a></div>

</div>

<div class="mainbody">
<div style="width: 1000px; height: 375px; overflow: auto";>
<center>
This is where i have a bunch of images... ...
</center>
</div>
</div>

<div class="footer">------------------- Copyright: Daniel Stenlund-------------------------------------------------------------- Contact: Daniel_Stenlund@hotmail.com-----------------</div>
</body>
</html>

The image place.. Mainbody. is the one i want bigger, (so it adjust depending on screen resolution). but to do that, i figure i must first increase the wrapper, wich is the big one, containing everything else.

i just dont know how. and i have been messing around pretty much with it. but obviously iam missing something
tried with %. but probably in the wrong way. but i still figure % is the way to make it auto adjust depending on resolution.

Best, whould be to style the CSS file i think.. so it affect all my other pages aswell with just 1 part code.

This is the css file look if you need to see it.
------------------------------------------
*{
margin: 0px;
padding: 0px;
}

a{
text-decoration: none;
}

body {
background-image: url(images/background4.png);
background-repeat: no-repeat;
background-size: 100% auto;
}

.wrapper{
width: 1000px;
height: 550px;
border: 1px solid #e1e1e1;
margin: 10px auto 0 auto;
}

.header{
width: 1000px;
height: 125px;
background-image: url(images/logo.jpg);
background-repeat: no-repeat;
}
.navbar{
width: 1000px;
height: 25px;
border: 2px;
background-image: url(images/navbar_grad.jpg);
background-repeat: repeat-x;
}
.button a{
float: left;
width: 100px;
height: 25px;
line-height: 22px;
font-family: verdana;
font-size: 13px;
color: #000;
font-weight: bold;
text-align: center;
}
.button a:hover{
float: left;
width: 100px;
height: 25px;
line-height: 22px;
font-family: verdana;
font-size: 13px;
color: #fff;
font-weight: bold;
text-align: center;
}
.mainbody{
width: 1000px;
height: 375px;
font-family: verdana;
font-size: 11px;
color: #515151;
background: #FFFFFF;
}

.footer{
width: 1000px;
height: 25px;
border: 2px;
background-image: url(images/navbar_grad.jpg);
background-repeat: repeat-x;
}

tomtefan · Post by **tomtefan** » Thu Mar 28, 2013 8:20 pm

ty for reply.

after taking a break by playing a game abit.. i went back to mess around with it and managed to get the result i wanted.
No idea if its "correct". but it works for me

vitinho444 · Post by **vitinho444** » Thu Mar 28, 2013 9:46 pm

Thats my problem building websites.. i have the 1920x1080 too and its a pain in the ass to get it right to the "small" ones..

The hard part is that if you put width=% the margin-left and margin-right dont work

Chris · Post by **Chris** » Wed Apr 03, 2013 1:27 pm

Generally we work with a width of 960px as it's easy to divide by 2 and by 3.

Check out http://foundation.zurb.com/

It's an easy to learn CSS library and grid that automatically scales and transitions your website layout. You basically create a template for on a tablet, smartphone and PC by defining the columns the element takes up on small and large screens.

Example:

Code: Select all

<div class="row">
    <div class="small-12 large-4 columns">
        This div will be the full width on smaller screens and only takes up a third on larger screens
    </div>
    <div class="small-12 large-4 columns">
        Same here
    </div>
    <div class="small-12 large-4 columns">
        And again
    </div>
</div>

I highly dis-advise the use of percentages when working with layouts. It's nice that it makes the layout more "fluid" but always ends up a pain in the ass.

Post by **Jackolantern** » Wed Apr 03, 2013 5:16 pm

Yeah, fluid and elastic layouts are largely dead. They were big for a while back in the early 2000's, but that was back when pretty much everyone was looking at the site on a monitor between 12 - 17 inches. The fluidity was there just to deal with legacy resolutions, pretty much. However, the explosion in screen sizes from very small (about 3 inches) to huge (over 30 inches) means that you will never be able to have one layout that can adjust to all monitors in a satisfactory way.

Fixed layouts that simply have some unused space on each side are now the norm, and then having another CSS stylesheet for mobile and very small screens.

height 95 % not get it to work.

height 95 % not get it to work.

Re: height 95 % not get it to work.

Re: height 95 % not get it to work.

Re: height 95 % not get it to work.

Re: height 95 % not get it to work.