I'm stumped!

by 10 replies
12
Hi all ,

when i design a website in photoshop i set my width to 960 as i was told this was the best size for a site

but when i had finished the site and sliced it and opened it up in dreamweaver

the site was no where near as big as a web page it was to the left of the screen and had white all around it

can anyone tell me how to fit the website to full screen ?
#website design #stumped
  • I've never designed a website in photoshop, so I can't help you there, but perhaps these can:

    960 Grid System

    Photoshop Tutorials - Design a Web Template using the ?960 Grid System? | Layouts | Photoshop Tutorials
  • Could you not make your backgrond image bigger and use CSS to change the size of the image so that it appears better on all monitors
    • [1] reply
    • The HTML you get from Photoshop is not going to work when you open it in Dreamweaver or in a browser like IE or Firefox.

      What you are looking at there is HTML of all the images put together.

      To use what you created and sliced in Photoshop, you are going to have to code a site using the pieces/images you sliced....but you won't use all of them....

      It's really not an easy process, and it's definitely not as easy as simply exporting as HTML via Photoshop. Even though there are actually some online tutorials and videos that claim to teach you how to do just that....except they never mention the HTML you get really isn't usable.
  • Well, the white space around the site is probably your overall page margins. In dreamweaver, you can go into your page properties (CTRL + J) and make sure all for sides of the page are set to margin 0. But, I'll paste some code below for you to try instead

    To center the page, try this trick. It's a bit hacky and no guarantees it will work, because I can't see what you are doing and the code you already have, but give it a shot as it could be a quick fix. It should sort out your white space too, but again depending on what you already have there.

    Paste this code in your page head:

    HTML Code:
    <style type="text/css">
<!--
html {
	height: 100%;
	width: 100%;
	margin: 0px;
	padding: 0px;
}
body {
	width: 960px;
	margin: 0 auto;
}
-->
</style>
    What that is doing is telling your overall page to be full width and height with no space around it. Then it's telling the body of your site to be 960px wide, with 0 space at the top and bottom, and an automatic amount of space right and left. The automatic space right and left centers the content.

    So, this may or may not work depending on the code that Photoshop created for you, but hopefully that helps.
    • [ 2 ] Thanks
    • [1] reply
    • Thanks Kezz,

      I'll give this a try






  • Banned
    [DELETED]
    • [1] reply

    • Designing isn't the problem. Anyone who knows Photoshop can do that.

      But getting it from Photoshop and into code is a different story.
      • [2] replies
  • Can you post your site? There's a hundred ways to skin a cat and a hundred ways not to. Without seeing the code, it's almost impossible to understand your problem.
Join the discussion

Next Topics on Trending Feed