Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › New Site, New Problems

  • This topic is empty.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • January 10, 2010 at 10:24 pm #27532
    TheN00b
    Participant

    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 #69230
    TheDoc
    Member

    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 #69243
    TheN00b
    Participant

    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 #69247
    TheDoc
    Member

    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 #69249
    TheN00b
    Participant

    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 #69255
    TheDoc
    Member

    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 #69260
    TheN00b
    Participant

    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 #69221
    TheDoc
    Member

    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 4:38 pm #69332
    TheN00b
    Participant

    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 #69156
    TheDoc
    Member

    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 #69159
    TheN00b
    Participant

    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 #69337
    TheDoc
    Member

    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.

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The forum ‘CSS’ is closed to new topics and replies.