What is the best way to code a web site so that it will be the same no matter the monitor size you look at? The site in question is www.catbent.com and there should be 5 links on the bottom.

The W3c Recommendation for element sizes is %
example : excluding <head>

<div style='text-align:center; width:100%;'>
<a href="Body.html">Welcome to the World of Cat Bent</a>
</div>
<div style='text-align:center; width:100%;'>
<img src="Images/Purple_lips.gif" width="385" height="481" />
</div>
<div style='text-align:center; width:100%; bottom:0;'>
<a href="about.html" onmouseover="MM_swapImage('About','','Images/CatBent_aa_rollover.gif',1)" onmouseout="MM_swapImgRestore()"><img src="Images/CatBent_aa.gif" name="About" width="15%" height="100" border="0" id="About" /></a>
<a href="yourvoice.html" onmouseover="MM_swapImage('Your Voice Vocal Studio','','Images/CatBent_yv_rollover.gif',1)" onmouseout="MM_swapImgRestore()"><img src="Images/CatBent_yv.gif" name="Your Voice Vocal Studio" width="20%" height="100" border="0" id="Your Voice Vocal Studio" /></a>
<a href="mmss.html" onmouseover="MM_swapImage('Musical Mischeif','','Images/CatBent_mmss_rollover.gif',1)" onmouseout="MM_swapImgRestore()"><img src="Images/CatBent_mmss.gif" name="Musical Mischeif" width="20%" height="100" border="0" id="Musical Mischeif" /></a>
<a href="creative.html" onmouseover="MM_swapImage('Creative','','Images/CatBent_cc_rollover.gif',1)" onmouseout="MM_swapImgRestore()"><img src="Images/CatBent_cc.gif" name="Creative" width="20%" height="100" border="0" id="Creative" /></a>
<a href="contact.html" onmouseover="MM_swapImage('Contact','','Images/CatBent_contact_rollover.gif',1)" onmouseout="MM_swapImgRestore()"><img src="Images/CatBent_contact.gif" name="Contact" width="15%" height="100"  border="0" id="Contact" /></a><a href="catbent.com/contact" onmouseover="MM_swapImage('Contact','','Images/CatBent_cc_rollover.gif',1)" onmouseout="MM_swapImgRestore()"></a></div>

framesets are so passe

the styles would normally be in an external css file, but I got lazy

That's what I had originally, but it seemed to make each link unbearably small. I've changed it and it looks all right on my widescreen monitor when I frig around with the size of the window. Problem now is, I'm moving and I had to pack my big monitor away so I have no way of testing it.

it may take redesigning the link images, so that they scale well
after all, blackberry is 200*200px screen, NO image button looks good on a blackberry
not an answer to the question, but - trying to work out why the heavy overhead of image buttons and javascripts, when css can do the same thing very short code

<style type='text/css'>
a.menu { font-family:'script'; font-size:1.5em; font-weight:normal; }
a.menu:hover { font-family:'script'; font-size:2em; font-weight:bold;  }
</style>

Note: 'script' is not necessarily correct, didnt bother to look up a proper font name
Note 2: "em" font sizes rescale automatically to screen resolution

<a class='menu' href="contact.html">Contact Us</a>

to make sure, http://www.browsershots.org is a useful aid, to make sure your site works in different browsers

Thanks for the tip on the ems! Looks good except now that the hover is bold, it displaces the rest of the links. Any suggestions?

Thanks for the tip on the ems! Looks good except now that the hover is bold, it displaces the rest of the links. Any suggestions?

<style type='text/css'>
a.menu { width:19%; bottom:0; font-family:'script'; font-size:1.5em; font-weight:normal; }
a.menu:hover {  width:19%; bottom:0; font-family:'script'; font-size:2em; font-weight:bold;  }
</style>

and push the menu to the bottom of the screen (maybe- its been a while)

It still seems to be pushing the other links over a bit when I mouseover a link...

That's the sortt of thing I'm looking for, I just don't want the rest of the page to be displaced by my rolling over the link.

Member Avatar

That's the sortt of thing I'm looking for, I just don't want the rest of the page to be displaced by my rolling over the link.

That's easy. Just don't set another size for the <a> tag, like I have done.
I like to see that small displacement ... :)