Indie-Resource.com

Posted: **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;
}

Posted: **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

Posted: **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

Posted: **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.

Posted: **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.

Indie-Resource.com

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.