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.
cab_driver 0 Newbie Poster
almostbob 866 Retired: passive income ROCKS
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
cab_driver 0 Newbie Poster
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.
almostbob 866 Retired: passive income ROCKS
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
cab_driver 0 Newbie Poster
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?
almostbob 866 Retired: passive income ROCKS
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)
cab_driver 0 Newbie Poster
It still seems to be pushing the other links over a bit when I mouseover a link...
ingeva
cab_driver 0 Newbie Poster
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.
ingeva
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 ... :)
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.