Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Having a little design problem

N

nStyle

macrumors 68000
Original poster
Dec 6, 2009
1,524
1,084
I am fairly new to CSS and HTML. Actually, I am very new.

Here is the site:

http://www.basedonstyle.com

I was reading a tutorial on how to get my background to not scroll and be able to resize it nicely without having scroll bars. I got that effect.

I am now trying to simply center the content (logo and text) in the middle of the page to where when I resize, the content will stay centered no matter what.

Also, I need scroll bars for when the content is not all shown (when a user resizes the window to a position where the content is invisible.

Can anyone examine my code and tell me what is wrong? The CSS is included in the HTML.
 
For starters, your background image is too big. Instead of making it a big rectangle like that, cut it down so it's only about 5-10 pixels tall but still as wide. Then in your body tag, add this code:

HTML: 
background-image: url(images/bkgd_img.jpg); background-position: left top; background-repeat: repeat-y

That will make that little horizontal strip repeat verically all the way down the page, giving you the same look you have now but with a significantly smaller file size.

To get your image to be centered at all times on the page, you need to make the width on your "box" div have a set pixel size, but keep the margin as is.
 
The reason for the large background is because it is not only a gradient (which would work for your suggestion) but it is a diagonal gradient, and I don't think there is a way to do it with a diagonal gradient like that? So I see it more as a picture that you can't repeat like that versus something that is uniform all the way through.

I tried doing this: " width: 500px;"

Under the box class, but it still didn't work. Also will that even solve my scrolling problem? I assumed the "overflow: auto" would let it scroll but it doesn't.
 
use margin: 0 auto; in #cont, not the .box. See if that works for you.

Im pretty sure you can get rid of the positioning stuff too...

Here is the code that should be used for this:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>BasedOnStyle.com - The future awaits</title>
        <style type="text/css">
            body {
                background-image: url("bg.jpg");
                font-family: Arial, Helvetica, sans-serif;
                font-size: 10px;
                text-align: center;
            }
            .cont {
                margin: 0 auto;
                width: 720px;
            }
        </style>
    </head>
    <body>
        <div class="cont">
            <img src="stp.png" alt="BasedOnStyle.com - Unlock the potential" width="720" height="600" longdesc="http://www.basedonstyle.com" />
            <p>A holding for a future personal and graphic blog.</p>
        </div>
    </body>
</html>
 
Thanks, Ron!

I guess I was trying to make the code more complex than it needed to be, only for the benefit of resizing the background... but this works better anyway.
 
Using tables for layout is not a good idea and generally frowned upon so try to stay away from that in the future. CSS takes some getting use to but is very powerful once you get the hang of it.
 
RonCarr said:
Using tables for layout is not a good idea and generally frowned upon so try to stay away from that in the future. CSS takes some getting use to but is very powerful once you get the hang of it.
Click to expand...

Until mainstream browsers adequately support the display: table tag and its ilk, there are a few tasks which still require tables.
 
nStyle said:
The reason for the large background is because it is not only a gradient (which would work for your suggestion) but it is a diagonal gradient, and I don't think there is a way to do it with a diagonal gradient like that? So I see it more as a picture that you can't repeat like that versus something that is uniform all the way through.

I tried doing this: " width: 500px;"

Under the box class, but it still didn't work. Also will that even solve my scrolling problem? I assumed the "overflow: auto" would let it scroll but it doesn't.
Click to expand...

My bad telling you the wrong class name; good catch by RonCarr. Also didn't realize your gradient was diagonal. You might consider adding a background color that's a similar green so when the image is loading (I have a fast connection but it still takes a moment to load) it won't be as obvious.

I also agree that you should avoid using tables when at all possible.
 
Another useful tip is to not use the width and height attributes for images, rather make them the size you want using Photoshop or something similar. Use the save for web feature to do this if using Photoshop. This takes some load off of the browser when displaying your site.
 
RonCarr said:
Another useful tip is to not use the width and height attributes for images, rather make them the size you want using Photoshop or something similar. Use the save for web feature to do this if using Photoshop. This takes some load off of the browser when displaying your site.
Click to expand...

Hi Ron, just to jump in here... I've always used height/width on my images (which are always sized to what I want them), mainly to help the layout. Content will normally flow around an image. If the height/width is specified, then the content doesn't move at all when the image is downloaded. Before the image is downloaded, the browser doesn't know how large to make that area, not until after the image is finished downloading.
 
umiwangu said:
Hi Ron, just to jump in here... I've always used height/width on my images (which are always sized to what I want them), mainly to help the layout. Content will normally flow around an image. If the height/width is specified, then the content doesn't move at all when the image is downloaded. Before the image is downloaded, the browser doesn't know how large to make that area, not until after the image is finished downloading.
Click to expand...

That is fine as long as the image is actually the size that you use within the attributes. I am talking more when it comes to having a huge image and using the attributes to size it down to fit where you want it. That is not a good idea because it can cause the images to load slower than if you size them to cut down on file size.
 
RonCarr said:
That is fine as long as the image is actually the size that you use within the attributes. I am talking more when it comes to having a huge image and using the attributes to size it down to fit where you want it. That is not a good idea because it can cause the images to load slower than if you size them to cut down on file size.
Click to expand...

Right. No one likes scaled images. :)
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back