Having a little design problem

Discussion in 'Web Design and Development' started by nStyle, Jan 23, 2010.

  1. nStyle macrumors 6502a

    Joined:
    Dec 6, 2009
    #1
    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.
     
  2. IgnatiusTheKing macrumors 68040

    IgnatiusTheKing

    Joined:
    Nov 17, 2007
    Location:
    das Fort
    #2
    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.
     
  3. nStyle thread starter macrumors 6502a

    Joined:
    Dec 6, 2009
    #3
    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.
     
  4. RonCarr macrumors regular

    RonCarr

    Joined:
    Sep 12, 2007
    Location:
    Tennessee
    #4
    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>
     
  5. nStyle thread starter macrumors 6502a

    Joined:
    Dec 6, 2009
    #5
    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.
     
  6. RonCarr macrumors regular

    RonCarr

    Joined:
    Sep 12, 2007
    Location:
    Tennessee
    #6
    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.
     
  7. savar macrumors 68000

    savar

    Joined:
    Jun 6, 2003
    Location:
    District of Columbia
    #7
    Until mainstream browsers adequately support the display: table tag and its ilk, there are a few tasks which still require tables.
     
  8. IgnatiusTheKing macrumors 68040

    IgnatiusTheKing

    Joined:
    Nov 17, 2007
    Location:
    das Fort
    #8
    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.
     
  9. RonCarr macrumors regular

    RonCarr

    Joined:
    Sep 12, 2007
    Location:
    Tennessee
    #9
    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.
     
  10. umiwangu macrumors 6502

    Joined:
    Sep 4, 2006
    Location:
    Malawi
    #10
    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.
     
  11. RonCarr macrumors regular

    RonCarr

    Joined:
    Sep 12, 2007
    Location:
    Tennessee
    #11
    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.
     
  12. umiwangu macrumors 6502

    Joined:
    Sep 4, 2006
    Location:
    Malawi
    #12
    Right. No one likes scaled images. :)
     

Share This Page