- This topic is empty.
January 10, 2010 at 10:24 pm #27532
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
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:
I’m not exactly sure what you’re asking in the first question.January 11, 2010 at 10:50 am #69243
That sorted out number 2.
Here is a screenshot of what I want to achieve for number 1:
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
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
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 :DJanuary 11, 2010 at 3:39 pm #69255
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
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
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
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
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" 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
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 ?
ThanksJanuary 12, 2010 at 11:18 pm #69337
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.
- The forum ‘CSS’ is closed to new topics and replies.