- This topic is empty.
-
AuthorPosts
-
February 17, 2010 at 2:21 pm #28048Dark AshelinMember
Hello all!
I made a web layout in Photoshop, and sliced it in pieces in Photoshop, and exported it as html. This automaticly generated an html page.
I linked a css to it, with a background color and standard font. Now I’m trying to get my whole layout centered (multiple images). My entire layout is a fairly big size, 1680×1100px. I made it that big so a user with high resolution wouldn’t see ugly bars at the side of my layout. My content area is about 800-900px width, so any user with any resolution can see all of the content.The problem I’m getting is that it centers all of the images when you have a resolution bigger than 1680×1100px, but if you have a lower resolution, it would just align the image to the left, and show horizontal scrollbars.
Here’s my current page, with the problem: http://www.bangerracing.be/Bangerracing … ayout.html
And here’s the css with it: http://www.bangerracing.be/bangerracing_layout.cssI hope someone can help me find a solution, I’ve been trying to get it to work for ages. ^^
February 18, 2010 at 3:18 pm #71108TheDocMemberWell, for starts you are using tables.
You have the right idea with a big background but a smaller content area, but the tables are ruining it for you.
What you should do is just have one big background image (try to keep the file size small), apply it to the body and center it. Something like:
Code:body {
background: url(../images/your-bg-image.jpg) top center no-repeat #color;
}February 18, 2010 at 3:20 pm #71109Dark AshelinMemberI know how to do it with 1 background image, but what about multiple images?
The reason I have multiple images is that I have sliced them up. On my other website I have a 1-piece background, but it takes aaaages to load. With multiple smaller images it loads way faster.February 18, 2010 at 3:23 pm #71110TheDocMember"Dark Ashelin" wrote:I know how to do it with 1 background image, but what about multiple images?
The reason I have multiple images is that I have sliced them up. On my other website I have a 1-piece background, but it takes aaaages to load. With multiple smaller images it loads way faster.Right, but it’s not going to work with tables like that.
I think you’re just going to have to go one-piece. With people’s internet connection getting better and better, if you can keep the image under 200KB you might be ok.
February 18, 2010 at 4:01 pm #71114Dark AshelinMember"TheDoc" wrote:"Dark Ashelin" wrote:I know how to do it with 1 background image, but what about multiple images?
The reason I have multiple images is that I have sliced them up. On my other website I have a 1-piece background, but it takes aaaages to load. With multiple smaller images it loads way faster.Right, but it’s not going to work with tables like that.
I think you’re just going to have to go one-piece. With people’s internet connection getting better and better, if you can keep the image under 200KB you might be ok.
1) I know most of the people this website is aiming for do NOT have a strong computer. For them even the simplest websites load slow.
2) I don’t think I can get the image under 200kb and still have a decent look.There’s got to be another way, right? I’ve seen other websites with multiple-piece backgrounds before, so it can’t be impossible.
February 18, 2010 at 5:20 pm #71126Dark AshelinMember"virtual" wrote:Then as The Doc says you can’t use tables. Most modern sites use html and css for layout which permits the usage of multiple background images.Ok sure, I wasn’t planning on using tables in the start but that’s what Photoshop standard gave me when I exported as html. I’ll gladly remove any tables if you can help me on getting it to work ^^
February 19, 2010 at 6:04 am #71160Dark AshelinMemberWell I guess I’ll have to do it that way. Thanks anyways.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.