Grow your CSS skills. Land your dream job.

New Site, New Problems

  • # January 10, 2010 at 10:24 pm

    Hi Guys

    I’m working on a new site. It is going to be like a portal with everything in it. news, articles, music, videos ..etc

    I’m just trying to sort out the backbone of the site at the moment and I’m stuck with two things.

    1) How to get the mini article footer to always appear underneath the photo in the Main Content block in the middle
    2) Why isn’t the background color for my footer showing when I have it set it to grey.

    I’d greatly appreciate any help with this.

    Thank You.

    # January 10, 2010 at 11:18 pm

    For the footer, it is because it doesn’t have a declared height and all items within it are being floated. The best thing to do in this case is to add a clearing div after your floated items, and before the footer div gets closed.

    You can pop this in there:

    <div style="clear:both;"></div>

    I’m not exactly sure what you’re asking in the first question.

    # January 11, 2010 at 10:50 am

    Thanks Doc

    That sorted out number 2.

    Here is a screenshot of what I want to achieve for number 1:

    [img]http://i49.tinypic.com/9iy8gg.jpg[/img]

    It is hard to see, but at the moment I have a:

    Code:

    in there, but the problem is that also clears outside its current container. I only want it to clear within its container. How can I do this ?

    Thanks Doc.

    # January 11, 2010 at 12:19 pm

    It seems to me as simple as moving the clearing line break to after the article footer, unless that’s not what you want.

    If you have a screenshot of what you’re trying to do, that would help greatly!

    # January 11, 2010 at 12:54 pm

    hehe ok let’s try again.

    OK Check the Site out now. See how the "mini article footer" is stuck to the right ! it should be like the image in my previous post.

    By the way, by "mini article footer" I mean the Date and Read More.

    I want that to always appear underneath everything and be like the image in my previous post.

    Thanks Doc :D

    # January 11, 2010 at 3:39 pm

    I think the reason I am confused is because that’s exactly what I was seeing the first time. The date and Read More were both under the image and the article.

    # January 11, 2010 at 4:26 pm

    hehe I know, but if you look closely to the left and right of it .. it clears on both sides (outside of its div) .. which I do not want :(

    # January 11, 2010 at 6:48 pm

    So I’m looking at it now, and it looks exactly how I think you want it. I’m not sure I can help much more.

    # January 12, 2010 at 9:26 am

    Your problem is because you are causing Internet Explorer to work in Quirks mode. You need to remove this line
    <html xmlns="http://www.w3.org/1999/xhtml"&gt; from your doctype or change your doctype to HTML 4.01.

    # January 12, 2010 at 4:38 pm

    OK I went and changed my code slightly, so that my problem can clearly be seen.

    Check out the blue bar in the middle column of the layout. See how they show to the right of the photo. I want them Always showing underneath the photo.

    How can I achieve this ?

    Thank You. :(

    # January 12, 2010 at 4:56 pm

    1) Remove this:

    Code:

    Make sure the Doctype is the first thing that shows up.

    2) You are missing your opening <html xmlns="http://www.w3.org/1999/xhtml&quot; xml:lang="en" lang="en"> (before <head>)

    3 Add "clear:both;" to the articleFooter styling (this causes there to be a big gap in the first article which I cannot explain)

    # January 12, 2010 at 6:08 pm

    Thanks the Doc I just did all of that and like you said I get a huge white space.

    What’s more is .. I know why it does it .. It is because it tries to clear on both side BUT no only within its Div, but outside it too.

    Is there no way to fix this ?

    Thanks

    # January 12, 2010 at 11:18 pm

    It should only be within its own div. If it’s clearing on both sides (I finally understand what you were trying to explain!) something else must be wrong with the code. I’ll have a look tomorrow.

    # January 13, 2010 at 7:51 am

    I managed to get the article footer to clear by changing this

    Code:
    .thrColElsHdr #mainContent {
    width: 535px;
    float: left;
    margin: 0 5px; /* the right margin can be given in ems or pixels. It creates the space down the right side of the page. */
    }

    It works in Firefox, IE7 and 8.

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

You must be logged in to reply to this topic.

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