Get Paid to Participate - up to $1 per post!     Twitter     Facebook     Google+
Hosting Discussion
 

Hosting Discussion > Web Hosting Forums > Website Development & Design > Making page adapt to monitor resolution
forgot password?



Reply


Old
  Post #1 (permalink)   05-09-2011, 02:17 PM
HD Addict
 
Join Date: Aug 2006
Posts: 127

Status: aditd is offline
I have a to make web page containing 2 columns. This is done.
Now what I would like to insert in the code is something like this:
The 2 columns should be full screen on any resolutions. Something like the page would adapt to the monitor resolution.
The percent would be 80% for the first column 20% for the second one.

What I don't know - is how to do that. Would a table resolve this problem?
What would be the code for this?

Suggestion are well appreciated.
__________________
Coupon Site Script - Turnkey Affiliate Moneymaking Business

Code Coupon Discount - Coupon Site Script in Action
 
 
 


Old
  Post #2 (permalink)   05-09-2011, 05:24 PM
HD Wizard
 
Join Date: Mar 2005
Location: Atlanta, GA
Posts: 2,264

Status: handsonhosting is offline
A table at 100% would resolve that for you however for the most part in design these days, tables are dead and CSS is the recommended method. Here's a site that will help you - http://css-tricks.com/the-perfect-fluid-width-layout/
__________________
Emerson Nogueira
http://www.HandsOnWebHosting.com
cPanel Web Hosting, Domain Registration, Managed VPS Servers
 
 
 


Old
  Post #3 (permalink)   05-13-2011, 09:16 AM
HD Newbie
 
Join Date: Apr 2011
Location: London, UK
Posts: 42

Status: SimplyShared is offline
I'd opt for CSS. You make a container which is say 90% of the browser width, then within that, one which is 80% and the other which is 20, and I'd use float: left; so that they're on either side.

Something like the following:

<div id="container">
<div id="left">
<div id="right">
</div>
__________________
SimplyShared.net - Europe based shared hosting solutions
Fast & friendly UK based support, with 99.9% uptime!
 
 
 


Old
  Post #4 (permalink)   05-14-2011, 01:21 PM
HD Addict
 
Join Date: Aug 2006
Posts: 127

Status: aditd is offline
I used the table idea. As I'm not a programmer even that was hard for me but I managed to do what I wanted.
__________________
Coupon Site Script - Turnkey Affiliate Moneymaking Business

Code Coupon Discount - Coupon Site Script in Action
 
 
 


Old
  Post #5 (permalink)   05-15-2011, 02:23 AM
HD Newbie
 
Join Date: Apr 2011
Posts: 11

Status: cycom22 is offline
what to hear more on this one..
 
 
 


Old
  Post #6 (permalink)   05-15-2011, 12:52 PM
HD Wizard
 
Join Date: Mar 2005
Location: Atlanta, GA
Posts: 2,264

Status: handsonhosting is offline
Be careful on the tables, too many nested tables and Google won't like you - not to mention that now that it's all inside one big table, your visitors will have to wait for ALL contents in the page to load before it will display anything. Using the CSS method is the preferred method.
__________________
Emerson Nogueira
http://www.HandsOnWebHosting.com
cPanel Web Hosting, Domain Registration, Managed VPS Servers
 
 
 


Old
  Post #7 (permalink)   05-15-2011, 07:18 PM
HD Addict
 
Join Date: Feb 2011
Posts: 223

Status: ServerSea is offline
I agree, table technique is old now. You should be learning to use Div instead of table, it will help you a lot. You should also learn CSS as good sites can not be make with out its implementation.
__________________
ServerSea – Low Cost High Quality Web Hosting & Designing
Domain For Life– 99.9% Up time – Super Fast Servers – Backups – True 24/7 Support
Money Back Guarantee – Special Discounts – Unlimited Downloads
http://www.serversea.com
 
 
 


Old
  Post #8 (permalink)   05-16-2011, 11:04 PM
Account Disabled
 
Join Date: Jul 2009
Location: Vancouver, BC, Canada
Posts: 21

Status: Sabrina is offline
Quote:
Originally Posted by ServerSea View Post
I agree, table technique is old now. You should be learning to use Div instead of table, it will help you a lot. You should also learn CSS as good sites can not be make with out its implementation.
Indeed. Also, CSS+DIV is good for SEO.
 
 
 


Old
  Post #9 (permalink)   05-22-2011, 08:56 PM
HD Newbie
 
Join Date: May 2011
Posts: 21

Status: depictedminds is offline
The other problem with tables is based on accessibility.

Based on W3C Accessibility Guidelines, Priority 5.4:
If a table is used for layout, do not use any structural markup for the purpose of visual formatting.

Web Browsers in today's market now support CSS positioning correctly (or at least to a level that we can manage) so positioning should only be done with CSS.

One problem with using tables is if the user is reading the page on a text-only browser - while this might not generically be a problem or a concern, this user may be using a browser of this nature due to a disability (such as aa screen reader). The last thing you'd want to do as a professional is disregard accessibility.

Sounds scary, I know - but in truth, it's quite easy to achieve in CSS. Therefore, we should do it that way.
 
 


Old
  Post #10 (permalink)   05-24-2011, 10:05 AM
HD Newbie
 
Join Date: Nov 2010
Posts: 33

Status: VPS Unlimited is offline
You can certainly do that with CSS. I really like the tutorial at W3 Schools: http://www.w3schools.com/css/css_dimension.asp
__________________
VPS Unlimited - Xen VPS
Follow us on Twitter
www.vpsunlimited.com
 
 
 


Old
  Post #11 (permalink)   06-02-2011, 09:52 AM
HD Addict
 
Join Date: Aug 2006
Posts: 127

Status: aditd is offline
Quote:
Originally Posted by handsonhosting View Post
Be careful on the tables, too many nested tables and Google won't like you - not to mention that now that it's all inside one big table, your visitors will have to wait for ALL contents in the page to load before it will display anything. Using the CSS method is the preferred method.
Only need it for something internal where google does not have access. But what you said is to keep in mind for other projects.
__________________
Coupon Site Script - Turnkey Affiliate Moneymaking Business

Code Coupon Discount - Coupon Site Script in Action
 
 
 


Old
  Post #12 (permalink)   06-05-2011, 01:37 PM
HD Newbie
 
Join Date: May 2011
Posts: 22

Status: Midpulse is offline
I personally like fluid-fixed layouts that set a minimum width and maximum width that adjust to browser sizes, but won't be re-sized to the point where your layout looks horrible due to extreme resizing.

I do recommend you get away from nesting tables. As others have suggested, CSS is a much cleaner way to go.
 
 


Old
  Post #13 (permalink)   07-06-2011, 11:44 AM
HD Addict
 
Join Date: Sep 2009
Posts: 112

Status: 24khost is offline
Use the em unit of measurements as those are the most friendly to the browser screen resolution.
__________________
*~ Shared,Reseller, and Cloud VPS Provider 24Khost.com ~*
*~ Birchtreelane.com - Crafts, Gifts, Antiques ~*
*~ Black Friday Deals Still Going Deals
 
 
 


Old
  Post #14 (permalink)   07-11-2011, 02:14 PM
HD Newbie
 
Join Date: Jun 2011
Posts: 37

Status: veoloo is offline
This can easily be done with a little bit of CSS/Javascript if you're up for that.

I personally don't like the idea of auto-adapting (assuming that this is different from fluid sites), but I do think that fluid sites are great, and fixed resolution is on its way out.

If you want to get a fluid site started, just go to http://csseasy.com/ and select "Fluid". They can get you going in no time.
__________________
Veoloo - Enjoy the Difference
Grid Hosting - $10/month
24 Hour Ticket Response Guarantee, Load-Balanced Servers, Weekly & On-demand Snapshot Backups
 
 


Old
  Post #15 (permalink)   07-31-2011, 03:31 PM
HD Addict
 
Join Date: Aug 2006
Posts: 127

Status: aditd is offline
Thanks guys managed to do also with your help.
__________________
Coupon Site Script - Turnkey Affiliate Moneymaking Business

Code Coupon Discount - Coupon Site Script in Action
 
 
 
Reply

Thread Tools

New Post New Post   Old Post Old Post
Posting Rules:
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On
Sponsored By: