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

Code:

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

Code:

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

Code:

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

Code:

#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:

Code:

#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.

Thread: best way to make things fit on screen

Thread Tools

Search Thread

best way to make things fit on screen

Bookmarks

Bookmarks

Posting Permissions