3
Contributors
9
Replies
10
Views
8 Years
Discussion Span
Last Post by ingeva
0

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

0

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.

0

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

0

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?

0

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)

0

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

0

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.

0

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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.