CSS solve-me-do Page 2

  • Deleted user 25 November 2008 16:30:23
    Nope, I'll explain more clearly :)

    [-----LOGO-----]
    [-----LOGO-----]
    [-----LOGO-----] _______blank space_________ MENU1 MENU2 MENU3

    All centred within the main content div, which is working fine.

    So the header is 64px high (or 3 lines in this example) and the logo is 64px high (3 lines) and I've made the div that holds the ul for the navigation also 64px (3 lines) and would like the menu stuff to sit along the bottom of that div so that the bottom of the nav is the same height as the bottom of the logo graphic.

    I can drop it down there by using margins on the ul a stuff (the actual text) but it's not precise and moves around between browsers by miniscule amounts, and I'd like it just sit on the bottom of the 64px high nav div.
  • christourlord 25 Nov 2008 16:34:50 2,679 posts
    Seen 10 hours ago
    Registered 15 years ago
    The only way to bottom-align the logo would be to make it a background-image of the containing div.
  • burns 25 Nov 2008 16:42:27 1,138 posts
    Seen 3 months ago
    Registered 14 years ago
    hmm padding might be the easiest method. You could try:

    Set the containing div to position:relative. Then for the menu div position: absolute; bottom:0; right:0;

    I have it working here.
  • Deleted user 25 November 2008 16:43:31
    No the logo is fine where it is. It's the text that makes up the MENU1 etc in the navigation div on the left. I want the text to run along the bottom of it's div and be positioned such that the bottom of that div is the same as the bottom of the logo.

    At the moment it always runs along the top.

    So I've made the navigation div the same height as the logo div and want the text to run along the bottom. That isn't working. I've also tried making the navigation div an unspecified height and then placing that div along the bottom of it's container div (also 64 px, and holding both the logo and navigation divs) but that doesn't work either for some reason.

    Maybe I'll just have to use margin positioning. I suppose I could use relative/absolute positioning on the container div and the navigation div so that I can use the bottom:0; statement...
  • Deleted user 25 November 2008 16:44:06
    burns wrote:
    hmm padding might be the easiest method. You could try:

    Set the containing div to position:relative. Then for the menu div position: absolute; bottom:0; right:0;

    I have it working here.
    Hehe exactly what I just decided to try myself ;)
  • burns 25 Nov 2008 16:46:44 1,138 posts
    Seen 3 months ago
    Registered 14 years ago
    cool, what do I win ;)
  • Deleted user 25 November 2008 17:44:39
    Isn't working. It sticks to the furthest right and bottom-most point of the window, regardless of the height and width settings of the parent (container) div.

    o_O
  • Deleted user 27 January 2009 16:11:25
    Woo, any good sites showing off transparency? I'd like to make the flat coloured background of a div 50% transparent, whilst the content in it is not.

    Is this doable or not recommended?
  • pjmaybe 27 Jan 2009 16:12:10 70,666 posts
    Seen 10 years ago
    Registered 18 years ago
    Not cross browser compatible so I wouldn't. I'd probably fake the look with a bit of clever GIFfage
  • Deleted user 27 January 2009 16:18:46
    That's what I was thinking, would it be easier just to set a transparent png as the background?
  • pjmaybe 27 Jan 2009 16:19:48 70,666 posts
    Seen 10 years ago
    Registered 18 years ago
    Again, not sure that would be a 100% cross-browser compatible solution either...

    Then again, do most browsers accept PNG now? I thought Moz / ie stuff could end up being really fussy about PNGs...
  • Deleted user 27 January 2009 16:20:59
    I've no-idea, was testing out the Filter:Alpha(Opacity=50%) thingy, and it doesn't apear to work at all.
  • burns 27 Jan 2009 16:37:06 1,138 posts
    Seen 3 months ago
    Registered 14 years ago
    You could use a transparent png but you would need to fudge support in ie6 and below using something like this http://www.twinhelix.com/css/iepngfix/. But it can be a real pain in the arse and sometimes doesn't work at all.
  • pjmaybe 27 Jan 2009 16:38:00 70,666 posts
    Seen 10 years ago
    Registered 18 years ago
    Transparent gifs are usually OK though, but depends what you're trying to do.
  • Deleted user 27 January 2009 16:46:24
    burns wrote:
    You could use a transparent png but you would need to fudge support in ie6 and below using something like this http://www.twinhelix.com/css/iepngfix/. But it can be a real pain in the arse and sometimes doesn't work at all.
    Oh, so there's no simple way of just making an ID's backgrounf 50% transparent then?
  • Deleted user 27 January 2009 16:46:46
    pjmaybe wrote:
    Transparent gifs are usually OK though, but depends what you're trying to do.
    They're all or nothing are they not?
  • catterz 27 Jan 2009 17:01:18 8,763 posts
    Seen 6 years ago
    Registered 17 years ago
    You could try something sneaky. Zoom in to your gif and make every other pixel bright yellow (or whatever colour you want to set to transparent). Might achieve what you're after.
  • pjmaybe 27 Jan 2009 17:04:12 70,666 posts
    Seen 10 years ago
    Registered 18 years ago
    CrispyXUK wrote:
    pjmaybe wrote:
    Transparent gifs are usually OK though, but depends what you're trying to do.
    They're all or nothing are they not?

    Ahh I see your point. In that case, the only truly cross-browser way to do it is to fake it, baby :)
  • thehat 27 Jan 2009 17:11:44 1,831 posts
    Seen 8 years ago
    Registered 14 years ago
    CrispyXUK wrote:
    burns wrote:
    You could use a transparent png but you would need to fudge support in ie6 and below using something like this http://www.twinhelix.com/css/iepngfix/. But it can be a real pain in the arse and sometimes doesn't work at all.
    Oh, so there's no simple way of just making an ID's backgrounf 50% transparent then?
    Not that's got decent browser support, no.
  • Deleted user 27 January 2009 18:05:44
    Cunting fuckery.
  • Deleted user 28 January 2009 08:44:23
    Use a transparent PNG and then just forget about it in IE6. It's presumably just a decorative effect, right?
  • Deleted user 5 March 2009 12:30:39
    I'm being a spanner again, trying to do this un-assisted and by hand in coda, I can't seem to get the right side bar to 'float' properly;

    why am i fucking up my floats?

    It's probably something really simple too :(
  • Spanky 5 Mar 2009 12:34:26 14,965 posts
    Seen 17 hours ago
    Registered 16 years ago
    cause you need to float the two content panels and give the first one a width, chuck that padding on the right of it n'all.

    First one float left, the other float right, your padding is making the right panel clear cause it's forkin hooge.

    /sends invoice
  • Deleted user 5 March 2009 12:37:44
    Yeah, I tried that, but now I've lost the background white :(

    /is thick.
  • Deleted user 5 March 2009 12:37:47
    Yeah, I tried that, but now I've lost the background white :(

    /is thick.
  • Spanky 5 Mar 2009 12:39:26 14,965 posts
    Seen 17 hours ago
    Registered 16 years ago
    you need to also float that content wrap to the left, come on crispy!
  • Deleted user 5 March 2009 12:41:56
    What do you mean? Why?

    Anyway, I put a clear:both after the floatage and all is well. Sorry if I'm being thick, this is only the second time if done this by hand sans assistance.
  • Spanky 5 Mar 2009 12:44:02 14,965 posts
    Seen 17 hours ago
    Registered 16 years ago
    Why? Because you should know that any div containing floated elements loses it's inheritable height unless it is also floated.

    You do have firebug don't you? You can edit the css on the fly to see your code live in action.
  • Deleted user 5 March 2009 12:45:47
    No, I didn't know that. I'm still relatively new to all this.

    I use coda, it's full of winnage.
  • Spanky 5 Mar 2009 12:47:55 14,965 posts
    Seen 17 hours ago
    Registered 16 years ago
    Not as much winnage as firebug in firefox. Hold on... coda? Is that a mac thing?

    /prepares shaking fist action!
Log in or register to reply

Sometimes posts may contain links to online retail stores. If you click on one and make a purchase we may receive a small commission. For more information, go here.