Grow your CSS skills. Land your dream job.

XHTML CSS Static Site Help

  • # July 28, 2010 at 8:23 pm

    Hello Guys

    I’m working on a site ( as some of you already know) and I’m getting stuck every now and then. I would greatly appreciate some help in dealing with difficulties as they appear.

    Here are the issues currently bugging me:

    1) the Background image doesn’t show for the body tag !

    2) What’s the best way to position the frog ? the current method looks different for each of the browsers !

    Thank You.

    # July 28, 2010 at 10:09 pm

    1 – Try putting a comma between html and body where you have the background image.

    2 – More importantly, where do you want it to appear? In any case it should be behind the text. Did you layout your site before you started coding it?

    # July 28, 2010 at 10:15 pm

    Hi Virtual

    For number 1, I have added a comma but now the whole background is white (on local machine) .. though I don’t know if this has something to do with the small resolution of my 10" screen (Samsung NC10)

    For 2, Yes I have laid out the site in photoshop first. The frog should be near the centre and have its fingers above the white content box.

    Thanks

    # July 28, 2010 at 10:33 pm

    #1 – Where is the image located? I have a feeling it should be: url(../images/bg_img.jpg)

    # July 29, 2010 at 1:28 pm

    Sorry, I meant if you are declaring html and body you need to put a comma in between. In your case I don’t think you need to declare the html tag, just use the body tag and put your background image on it. The Doc is right if your image is in a folder called images and you are calling it from the css file which is in a folder called css then you need to change the code to url(../images/bg_img.jpg)

    For the frog, you are positioning absolute and it is showing relative to the body not relative to the containing div. You need to add position: relative; to the containing div. See this article which explains it visually:
    http://css-tricks.com/absolute-position … sitioning/

    # July 29, 2010 at 6:27 pm

    Thank You The Doc and Virtual.

    Even though I have edited the url to the background image .. it is still not showing ! :cry:

    Thanks for the link Virtual, will get to that once I sort out the background issue.

    Thank You.

    # July 29, 2010 at 6:52 pm

    The background problem is because in the reset.css you have a value set for background. If you remove that your background appears, but then we have another problem which you will see immediately. I don’t have time to look at it now, but will see if I can figure it out later.

    # July 29, 2010 at 7:02 pm

    Found it, you need to add no-repeat. When you rewrite your background code, write it like this

    Code:
    background: #163146 url(../images/bg_img.jpg) no-repeat;

    Don’t forget to leave a space between the closing bracket after .jpg and the no-repeat or you will have problems with IE displaying it.

    # July 29, 2010 at 7:45 pm

    I don’t know what I have done, but the whole thing is a mess now ! lol at least the background image is finally showing.

    What I did was remove the { body } from the [ reset.css ] and Copy / Pasted the attribute to the { body } in the [ styles.css ] file.

    What’s causing the mess ?

    Thanks

    # July 29, 2010 at 8:17 pm

    I think you have too many bodies LOL :D and too many style sheets which are overriding each other. I’ll take a look and get back to you.

    # July 29, 2010 at 8:28 pm

    Put the body tag back in the reset.css, it is there for a reason, and just remove the line with the background code from the reset.css. Then add the code for the background I gave you previously in the styles.css, but add it to the body tag not the #container.
    Let me know 8-)

    # July 31, 2010 at 9:50 am

    Thanks Virtual. That worked .. Kind of !!

    I want the background image around the content box ! How do I get it to be like that ?

    Thank You.

    # July 31, 2010 at 12:45 pm

    I think you need to remove the white from your background image and just leave the glow. You already have a white background for your content. Try that first.

    # July 31, 2010 at 3:03 pm

    Hi Virtual I know what you mean, but the issue isn’t in the white in the background image.

    The issue is in the position of the background image. Because that pale yellow bit is suppose to go behind the frog.

    Thanks

    # July 31, 2010 at 5:06 pm

    I think we are getting ourselves confused here and I’m not quite getting what you wanted.

    I think you need to rework the way you have cut up the photoshop psd. I would do it like so:

    Cut a sliver from the side of the background, say 5px wide by 50px high, enough to go beyond the black topbar then apply that to the body tag with the background color then the small image to repeat x.

    Cut the part that you want as the container with the black topbar and glow and put that on the container tag with a width and margin: 0 auto; this will sit over the body background image. Remove the white part. That will be the background for the content tag.

    Your html should then look like this:

    Code:
    <body>
    <div id="container">
    <div id="header">
    <ul id="navigation">bla bla bla</ul>
    <div id="logo">
    <img src="images/logo.png" alt="Logo, Text, Zanist Wist" />
    </div>
    <div id="frog">
    <img src="images/frog.png" alt="The Zanist Wist Friendly Frog" />
    </div>
    </div>
    <div id="content">etc etc etc
    </div>

    </div><!–Close container–>
    </body>

    Give the content a bg color of white.

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".