Buttons and liquid design

Forum Moderators: not2easy

Message Too Old, No Replies

Buttons and liquid design

How to get a button with a flexible width / height

KeesH

12:28 pm on Sep 27, 2010 (gmt 0)

Hi,

I'm busy with the redesign of my website and almost everything is now flexible.

The final challenge is to use buttons on my webpage that will shrink and expand depending on the resolution / screen size of my visitor's monitor.

I couldn't find any solution so far!

Is this possible with CSS?
A short example would help me!

Thanks for your feedback, Kees

birdbrain

1:56 pm on Sep 27, 2010 (gmt 0)

Hi there KeesH,

and a warm welcome to these forums. ;)

For what it is worth, here is an example...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<meta name="language" content="english">  
<meta http-equiv="Content-Style-Type" content="text/css"> 
 
<title>buttonesque</title> 
 
<style type="text/css"> 
#button-holder { 
 width:78%; 
 padding:1%; 
 margin:auto; 
 text-align:center; 
 background-color:#f0f0f0; 
 } 
#button { 
 padding:5%; 
 } 
</style> 
 
</head> 
<body> 
 
<div id="button-holder"> 
 <input id="button" type="button" value="I am a button, OK!"> 
</div> 
 
</body> 
</html>

birdbrain

Major_Payne

2:46 pm on Sep 27, 2010 (gmt 0)

Making pages adjust to the web browser's working window size is a waste of time in most cases. There are too many window sizes being used and shrinking can only be done down to a certain point. Enlarging pretty much the same problem.

Images HAVE to maintain their aspect ratio to not distort, but can only be enlarged to a certain point before they become pixelated. Higher res images wouldn't be the answer as that means a higher file size and slower load times for the page. Even with a pre-loader, some people just will not wait for pages to load unless they just have to see the page.

Choosing Dimensions for Your Web Page Layout:

[elated.com...]
How to create flexible sites quickly using standards like CSS and XHTML: [ibm.com...]
In Search of the Holy Grail: [alistapart.com...]

Care With Font Size: [w3.org...]

Ron

KeesH

4:31 pm on Sep 27, 2010 (gmt 0)

Well Birdbrain,

That's indeed a great example. It works fine and helps me a lot to service clients on smartphones or netbooks.

Major_Payne,I agree that you can't make everybody happy. But in the design of the website, I have 3 buttons in one line / navigation bar that look horrible on a smartphone or netbook.

Thanks again.

Kees

birdbrain

4:45 pm on Sep 27, 2010 (gmt 0)

No problem, you're very welcome. ;)

milosevic

9:30 am on Sep 28, 2010 (gmt 0)

I agree with Major_Payne - fluid layouts aren't worth the effort for most people, it is possible without a lot of hassle to make something that doesn't really bring any benefits over a static layout, but to go past that point and make something that can make content presentation better across a range of resolutions is a massive step.

This is still something I play around with and there's a lot of pitfalls, it's easy to write awful hacked code and have to use Javascript fixes if you don't have advanced knowledge of how float, position, display and overflow work - when to use display:inline-block for example.