Forums

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

Home Forums CSS [Solved] Noobie Layout Question

  • This topic is empty.
Viewing 15 posts - 16 through 30 (of 31 total)
  • Author
    Posts
  • #79941
    Quintin_S
    Member

    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. :(


    @rudynorman
    :

    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.

    #79482
    Quintin_S
    Member

    Okay, 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”!

    #78702
    ralc
    Participant

    i 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.

    #78703
    Quintin_S
    Member

    I’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.

    #78704
    ralc
    Participant

    ah 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.

    #78705
    Quintin_S
    Member

    Wow! 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.

    #78706
    jason
    Member

    How 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

    #78707
    Quintin_S
    Member

    Hi 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.

    #78708
    Quintin_S
    Member

    Also, 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?

    #78709
    ralc
    Participant

    regarding 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.

    #78710
    ralc
    Participant

    for 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.

    #78711
    ralc
    Participant

    i 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

    #78712
    Quintin_S
    Member

    I’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.

    #78713
    ralc
    Participant

    this should sort out your top nav links

    #nav-top a{ display:block; height:83px }
    #78714
    Quintin_S
    Member

    The 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!

Viewing 15 posts - 16 through 30 (of 31 total)
  • The forum ‘CSS’ is closed to new topics and replies.