Hi, I have designed a web layout (1366x768) in photoshop, and converted into xhtml/css. now the issue is i have a large horizontal scrolling in 1024x768(and smaller) monitors. plz help me how to fix it to view my website without horizontal scrolling .

6 Years
Discussion Span
Last Post by almostbob

photoshop is not a web design tool
photoshop is an image tool, and is very good at it
the photoshop layout html and css, is likely in pixels, the dimension of choice for images, alter all the css to %
example:the page you laid out is 1366*768, an irrational size that has no resemblance to window sizes, probably fits dead-on inside Your browser window with menu borders tab bars, but fixed dimension layouts only work in the window they were laid out in
the element <a id='ralph'><img bla bla></a> is 137px*76px in the 1366*768 window
in css #ralph { width:10%;height:10%; } ralph will then be 10% of window width in any window, fluid layouts, scaled in em and %, instead of fixed layouts scaled in px pt in cm, look very simliar in everything from handheld devices to widescreen and wall projection screens.
If photoshop is smart and produced an external css file, then that edit is easy, and need only be done once for the entire site
If photoshop is not smart and produces in<head> styles then the edit can be done once and an external style made from one of the in<head> styles and applied to every page
If photoshop is dumb and produces inline styles, the edit will be tedious, and may be easier to get a different layout tool, but also need only be done once, create an external css file and apply to every page

try to disregard window height, other than getting important information 'above the fold' so that it is visible when the page opens, users will scroll down forever, mice have scroll wheels, but get the width right(total of 100%) so there are no H-scroll bars, mice dont have h-scroll wheels

these standard test beds may assist you (yoursite.com : replace with your real url)

SPEED http://analyze.websiteoptimization.com/authenticate.php?url=http://www.yoursite.com&/

HTML http://validator.w3.org/check?uri=http%3A%2F%2Fwww.yoursite.com&charset=%28detect+automatically%29&doctype=Inline&group=0

CSS http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.yoursite.com&profile=css21&usermedium=all&warning=1&lang=en

handheld http://demo.opera-mini.net/demo.html?www.yoursite.com

other browsers http://www.browsershots.org

many problems (if present) will show serious code errors shown by the w3c validator sites will produce blankscreens in browsershots
Valid code does not ensure the site will work ...
Invalid code does ensure the site will not work ...
.. in all browser OS combinations

not all layouts work in handheld devices, user_agent detectors (browser sniffers) can alter the page to send simpler layouts to phones and ipads because the devices are limited and wireless bandwidth charges large

strictly code based, you understand your content more than I would,

hope it helps

Edited by almostbob: n/a

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.