- This topic is empty.
-
AuthorPosts
-
October 2, 2010 at 6:00 pm #79941Quintin_SMember
This is really getting frustrating now. I’m setting #pillar-left and #pillar-right to “position:relative” and the bottom pillar bits to “position:absolute; bottom:0”, and by all accounts this SHOULD work, but instead they’re displayed halfway down the page.
The reason for this is that the pillars both have a height of “height:100%”, meaning they take their height from the #mid div… which is exactly 0. Uh… what?
As I understand it, the #mid div should take the height of the content inside it… i.e., the content of #content. But it doesn’t. It’s just “0”.
Could really use some help from some wise CSS ninjas. :(
Ah, I see what you mean now. Unfortunately, it’s not going to suit my purposes… that space isn’t black in the design; it’s got a tiling graphic running down it. Thanks, though.
October 2, 2010 at 6:07 pm #79482Quintin_SMemberOkay, another thing I just noticed:
The pillar-bottom divs don’t stay in the same place all the time. When you resize the browser window, they shift up or down with it. WTF?
I’ve checked Firebug and it seems that the #pillar-left and #pillar-right divs change their height value when you resize the window. I have NO clue why this is happening… both are set to “height: 100%; position:relative; float:left”!
October 2, 2010 at 7:16 pm #78702ralcParticipanti always have trouble with height 100% i don’t really trust it so don’t often use it. If i hover over your #mid element in firebug it’s much smaller then it should be considering the #content extends right down to the bottom of the page. And because the pillars are taking their height from the #mid section i guess this is why there not going to the bottom.
I think this is happening because of the three child elements inside the #mid element are all floated, have you heard of the clearfix (https://css-tricks.com/snippets/css/clear-fix/) method? applying it to your #mid element might just sort it out.
October 2, 2010 at 7:27 pm #78703Quintin_SMemberI’ve suspected that it might be because of the floats as well.
I hadn’t heard of the clearfix method, and I tried it, but no luck. Thanks anyway, ralc.
October 2, 2010 at 9:08 pm #78704ralcParticipantah i see at least your #mid element now registers its height to the bottom of the page. But the 100% height on pillars still is’nt working.
(ive made a demo of the explanation below: http://ralcus.com/band/ )
Ok how about a change in tactics, instead of having the two pillars either side you could lose them, just make the #content div take the full width, give it a border on the left and right of 1 pixel of that brown for the outer border. Then making another div inside the #content div and give that another 1 px brown left and right border for the inner part of the colum. pad out #content by 48pixels on the left and right and make sure your inner div has the 20 pixel padding for left and right.
At this point you would have the borders running the full width of the page, now you just need to put the tops and bottoms of the pillars in place. Instead of having two pillar divs with the tops and bottoms inside how about taking the tops and bottoms out and placing them on their own leaving you with four divs ( pillar-left-top, pillar-right-top, pillar-right-bottom, pillar-left-bottom ) inside the #mid element.
Now what you could do is position them by taking them out of the flow of the document so they don’t interfer with the #content div. To do this you can position each one absolutely. Positiong something absolutely will by default position them relative to the browser view port. But the extremely handy thing is, if a parent element is positioned relative any child elements positioned absolutely will now be relative to them rather then the browser view port. So putting position:relative on the #mid div allows you to position each of the four pillar divs in the top-left, top-right, bottom-left and bottom-right position of the #mid div without disturbing the #content div.
October 2, 2010 at 9:41 pm #78705Quintin_SMemberWow! I’d never have seen that solution. That’s amazing!
It looks great and I’m busy implementing it now. Thanks a lot for your help!
My only worry is how cross-browser compatible it is, since it’s a rather roundabout way of doing things. I’ve checked in all current versions of Firefox, Chrome, Safari and Opera, but I don’t have a Windows machine here and I just KNOW IE is going to ruin the party.
October 2, 2010 at 9:44 pm #78706jasonMemberHow about this –
the grouping isn’t the greatest but – move the pillar-left-bottom and pillar-right-bottom directly into the #mid div. Give #mid position:relative; and then use absolute positioning on the pillar-bottom divs and set their bottom to 0
The pillar wrapper divs do not have the full height of #mid, but if you look at the size of mid, it is the perfect size for what you want to do, the pillars will always be at the bottom of the post list
October 2, 2010 at 10:02 pm #78707Quintin_SMemberHi Jason,
Thanks man, I tried that as well actually, but I realised that I couldn’t accommodate for the borders running down the sides. I’ll stick with ralc’s solution for now.
Before I mark this solved, I have another side-question… The links in my sprite navs aren’t working. I’m guessing this is because I assigned the graphics to the “li” elements and not to the “a” elements (didn’t want to disobey the block/inline rule). How can I fix this?
Thanks everyone.
October 2, 2010 at 10:13 pm #78708Quintin_SMemberAlso, for the comments section:
I’d like to connect a little arrow to the comment pointing to the poster’s avatar to make it a speech bubble (my design: http://www.airtimeproductions.co.za/sites/isochronous/index.html ). What is the best way to go about this?
October 2, 2010 at 10:23 pm #78709ralcParticipantregarding the the links, they appear to be missing if you inspect them with firebug, or at least a width and height isn’t registering. If you display block the links and then inspect them with firebug you will see that they now appear and are the correct width, now all you have to do is specify their height.
October 2, 2010 at 10:26 pm #78710ralcParticipantfor the speech bubbles i would use a similar method to the pillar tops and bottoms. position:relative on each of the speech bubbles ( .comment .text ) and then place a div inside them with the arrow as a background image and with absolute positiong to get it in the correct place.
October 2, 2010 at 10:40 pm #78711ralcParticipanti wondered why the button text wasn’t showing when i was disabling the background images in firebug and then noticed the text-indent:-9999px, thats a good trick i’ve never thought of doing that.
I noticed that by placing the background images on the li tags your then using the :hover pseudo class on them to change the image. I think you could just put the background images on the anchor tags instead. It’s ok to have block elements inside block elements so using the anchor tags to apply the backgrounds and displaying them block is fine. This way your image rollover effects will also work in ie6 which doesnt support the :hover pseudo selector on anything except the anchor tag
October 2, 2010 at 10:43 pm #78712Quintin_SMemberI’ve assigned a class “spritenav” to the ul elements in the sprite navs and have added this CSS:
.spritenav { padding:0; }
.spritenav li a {display: block;}Hover, it doesn’t seem to have worked. At least for the header and footer navs – the social media links work.
October 2, 2010 at 10:49 pm #78713ralcParticipantthis should sort out your top nav links
#nav-top a{ display:block; height:83px }
October 2, 2010 at 10:51 pm #78714Quintin_SMemberThe text-indent trick is quite widely-used in sprite navs, as far as I know. The advantage is that it doesn’t hide the text (the way “display:none” would do), so it’s in a sense more SEO-friendly… although it does also try to “fool” the search engines in a way. I’m not sure whether it’s detrimental either way.
Thanks, that did the trick… I’ll have to reposition them, but the rollovers and the links work. Tomorrow, though. *yawn*
Again, thanks for all your help!
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.