12 {{ upvoteCount | shortNum }}
12 {{ upvoteCount | shortNum }}

I'm stumped!

by Ant West
10 replies
  • WEB DESIGN
    • |
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 ?
#stumped
  • Profile picture of the author CBSnooper
    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
    Signature

    Mike
    ~~~~
    CBSnooper - Take the hard work out of finding hot Clickbank products.

    {{ DiscussionBoard.errors[780682].message }}
  • Profile picture of the author Gimme4Free
    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
    {{ DiscussionBoard.errors[780948].message }}
    • Profile picture of the author Minisite Nerd
      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.
      {{ DiscussionBoard.errors[781376].message }}
  • Profile picture of the author Kezz
    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.
    {{ DiscussionBoard.errors[781529].message }}
    • Profile picture of the author Ant West
      Thanks Kezz,

      I'll give this a try






      Originally Posted by Kezz View Post

      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.
      Signature
      "This time next year I'm Going to be a Millionaire"
      {{ DiscussionBoard.errors[782482].message }}
  • Profile picture of the author dzairy
    Banned
    [DELETED]
    {{ DiscussionBoard.errors[782349].message }}
    • Profile picture of the author Minisite Nerd
      Originally Posted by dzairy View Post

      design a website in photoshop it is not hard and it is not easy

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

      But getting it from Photoshop and into code is a different story.
      {{ DiscussionBoard.errors[782737].message }}
      • Profile picture of the author Ant West
        The coding bit i'm stuck on,

        i really wanna learn this and i aint giving up!!



        Originally Posted by Minisite Nerd View Post

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

        But getting it from Photoshop and into code is a different story.
        Signature
        "This time next year I'm Going to be a Millionaire"
        {{ DiscussionBoard.errors[782747].message }}
      • Profile picture of the author Minisite Nerd
        Judging by what you described - everything to the left and white space, etc - you are simply trying to take the HTML Photoshop gives you.

        That's not going to work. You need to take those slices and use them as you code the site.

        Your best bet may be to pay someone else to take that PSD and code it in CSS. Lots of experts who can do what might take a n00b a week in a few hours.

        Google "PSD to CSS" - Google
        {{ DiscussionBoard.errors[782750].message }}
        • Profile picture of the author Ant West
          I aint paying for nothing mate, I'm dertermained to learn it if it takes me months to learn!








          Originally Posted by Minisite Nerd View Post

          Judging by what you described - everything to the left and white space, etc - you are simply trying to take the HTML Photoshop gives you.

          That's not going to work. You need to take those slices and use them as you code the site.

          Your best bet may be to pay someone else to take that PSD and code it in CSS. Lots of experts who can do what might take a n00b a week in a few hours.

          Google "PSD to CSS" - Google
          Signature
          "This time next year I'm Going to be a Millionaire"
          {{ DiscussionBoard.errors[783164].message }}
  • Profile picture of the author Anrkist
    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.
    {{ DiscussionBoard.errors[785018].message }}

Trending Topics