Log in

View Full Version : best way to make things fit on screen


mdcloud
04-25-2007, 08:18 PM
hey guys,

i have tried several different approaches and am not really sure what is the best way to get my web pages sized for resolution differences.

i have used a javascript that went to different pages based on resolution, but then when i had to update i had to change 5 pages per one. it got real old.

is there a better way? what way do all of you guys prefer?
boogyman
04-25-2007, 08:39 PM
don't use tables.

invest your time to learn and use DIV's Cascading Style Sheets @ w3schools.com (http://www.w3schools.com)
it isn't very difficult, and it is very easily maintainable / customizable / updatable.
boxxertrumps
04-25-2007, 10:50 PM
use percents?
demo: http://boxxertrumps.bo.funpic.org/?%25
mdcloud
04-26-2007, 06:01 PM
i do use style sheets. i have tried to use percents on some things, but for instance i have a nav bar. it is pics. a pic is x amount wide. i have many things positioned absolute. how do i get things to still look right using style sheets? for instance, here is my site

www.beinhealth.com

many things there that are set sizes.
nwalton
04-26-2007, 07:17 PM
This is from your page source:


<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<table class="countrytable">
<tr>
<td>
... (All of your images here)
</td>
</tr>
</table>

You're using some style sheets, but you've still got some tables that don't need to be there. You could replace that whole thing with:


<div>
... (images here)
</div>



You can set the position and everything with your CSS rather than having to use all the <br> tags. Your whole page body could be something like this:


<body>
<div id="sitewrapper">
<div id="header">...(logo here) </div>
<div id="navbar">...(navigation here) </div>
<div id="flashcontent">...(flash here) </div>
<div id="footer">...(maps here) </div>
</div>
</body>

Since each section is used only once on the page, it's better to use "id" instead of "class". The styles would correspond like this:


#sitewrapper{
...
}
#header{
...
}
...

It may take some work to get the css working correctly, but it's not a really complicated layout.

As for making it work for different screen resolutions, it looks to me like most everything on your site is a pretty fixed size. You might want to consider just centering the content in the window:


#sitewrapper {
margin:15px auto;
}

(The 15 px is for top and bottom, the auto is for left and right). This may not be how everyone would do it, but it's a good start, I think.
mdcloud
04-26-2007, 08:25 PM
hmm. thanks for the input. i am kinda new to all this, but i will give it a go with the div tag.