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 .
maacyuga 0 Newbie Poster
almostbob 866 Retired: passive income ROCKS
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&/
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
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.