954,604 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Have something to say? Contribute New Article Reply to this Article

Web site visual problem in CSS and HTML

Hi There;
I have designed a web site. There are buttons at the top of the web site, similar with daniweb.com has "Hardware&Software" , "Software Development" ,"Web development" and so on. But my web site looks perfect in my computer, however, positions of buttons corrupted in different computer that have different resolution settings.I've made visual settings in CSS and I've gave left, right position values in pixels. How can I overcome that problem?

Thanks in advance.

varoluscu_prens
Light Poster
25 posts since Jul 2011
Reputation Points: 10
Solved Threads: 0
 

pixels are not a layout tool, the size of a pixel is dependant on screen resolution
current best practice is to use em or % as dimensions for layout, these are scalar quantities that automatically adjust to window size screen resolution and user preference
a page laid out (example) as

body { width:100%; margin:1%; padding:1%;}
.menu { width:98%; margin:auto; padding:1%;}


always looks the same

added benefits of scalar dimensions;
content remains onscreen in partscreen windows, without horizontal scroll bars (Which absolutely P__ off users), on a large range of devices from phones(200px screen) to my laptop, plugged into a wall projector (3072px screen),,
and text auto adjusts to visual impairment font settings, making the site disability friendly

almostbob
Posting Sensei
3,149 posts since Jan 2009
Reputation Points: 571
Solved Threads: 376
 

This question has already been solved

Post: Markdown Syntax: Formatting Help
You
View similar articles that have also been tagged: