943,735 Members | Top Members by Rank

Web Development > Web Design > HTML and CSS > Squishing
Ad:
Permalink
Aug 26th, 2009
0

Squishing

Expand Post »
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.
Similar Threads
Reputation Points: 10
Solved Threads: 0
Newbie Poster
cab_driver is offline Offline
20 posts
since Oct 2008
Permalink
Aug 26th, 2009
0

Re: Squishing

The W3c Recommendation for element sizes is %
example : excluding <head>
html Syntax (Toggle Plain Text)
  1. <div style='text-align:center; width:100%;'>
  2. <a href="Body.html">Welcome to the World of Cat Bent</a>
  3. </div>
  4. <div style='text-align:center; width:100%;'>
  5. <img src="Images/Purple_lips.gif" width="385" height="481" />
  6. </div>
  7. <div style='text-align:center; width:100%; bottom:0;'>
  8. <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>
  9. <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>
  10. <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>
  11. <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>
  12. <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
Last edited by almostbob; Aug 26th, 2009 at 11:23 pm.
Reputation Points: 562
Solved Threads: 368
Posting Maven
almostbob is offline Offline
2,970 posts
since Jan 2009
Permalink
Aug 26th, 2009
0

Re: Squishing

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.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
cab_driver is offline Offline
20 posts
since Oct 2008
Permalink
Aug 27th, 2009
0

Re: Squishing

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
css Syntax (Toggle Plain Text)
  1. <style type='text/css'>
  2. a.menu { font-family:'script'; font-size:1.5em; font-weight:normal; }
  3. a.menu:hover { font-family:'script'; font-size:2em; font-weight:bold;  }
  4. </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
html Syntax (Toggle Plain Text)
  1. <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
Last edited by almostbob; Aug 27th, 2009 at 1:04 am.
Reputation Points: 562
Solved Threads: 368
Posting Maven
almostbob is offline Offline
2,970 posts
since Jan 2009
Permalink
Aug 27th, 2009
0

Re: Squishing

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?
Reputation Points: 10
Solved Threads: 0
Newbie Poster
cab_driver is offline Offline
20 posts
since Oct 2008
Permalink
Aug 27th, 2009
0

Re: Squishing

Click to Expand / Collapse  Quote originally posted by cab_driver ...
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?
css Syntax (Toggle Plain Text)
  1. <style type='text/css'>
  2. a.menu { width:19%; bottom:0; font-family:'script'; font-size:1.5em; font-weight:normal; }
  3. a.menu:hover {  width:19%; bottom:0; font-family:'script'; font-size:2em; font-weight:bold;  }
  4. </style>
and push the menu to the bottom of the screen (maybe- its been a while)
Last edited by almostbob; Aug 27th, 2009 at 2:01 am.
Reputation Points: 562
Solved Threads: 368
Posting Maven
almostbob is offline Offline
2,970 posts
since Jan 2009
Permalink
Aug 27th, 2009
0

Re: Squishing

It still seems to be pushing the other links over a bit when I mouseover a link...
Reputation Points: 10
Solved Threads: 0
Newbie Poster
cab_driver is offline Offline
20 posts
since Oct 2008
Permalink
Aug 27th, 2009
0

Re: Squishing

Is this something like what you're looking for?

http://upandforward.com
Reputation Points: 16
Solved Threads: 9
Junior Poster
ingeva is offline Offline
106 posts
since Jul 2008
Permalink
Aug 27th, 2009
0

Re: Squishing

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.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
cab_driver is offline Offline
20 posts
since Oct 2008
Permalink
Aug 28th, 2009
0

Re: Squishing

Click to Expand / Collapse  Quote originally posted by cab_driver ...
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 ...
Reputation Points: 16
Solved Threads: 9
Junior Poster
ingeva is offline Offline
106 posts
since Jul 2008

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: CSS and color transparency
Next Thread in HTML and CSS Forum Timeline: CSS and iframes





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC