Nope, I'll explain more clearly .gif) [-----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. |
CSS solve-me-do • Page 2
-
-
christourlord 2,877 posts
Seen 6 days ago
Registered 17 years agoThe only way to bottom-align the logo would be to make it a background-image of the containing div. -
burns 1,138 posts
Seen 2 years ago
Registered 16 years agohmm 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. -
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... -
burns wrote:
Hehe exactly what I just decided to try myself
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.
-
burns 1,138 posts
Seen 2 years ago
Registered 16 years agocool, what do I win -
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 -
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 70,666 posts
Seen 12 years ago
Registered 20 years agoNot cross browser compatible so I wouldn't. I'd probably fake the look with a bit of clever GIFfage -
That's what I was thinking, would it be easier just to set a transparent png as the background? -
pjmaybe 70,666 posts
Seen 12 years ago
Registered 20 years agoAgain, 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... -
I've no-idea, was testing out the Filter:Alpha(Opacity=50%) thingy, and it doesn't apear to work at all. -
burns 1,138 posts
Seen 2 years ago
Registered 16 years agoYou 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 70,666 posts
Seen 12 years ago
Registered 20 years agoTransparent gifs are usually OK though, but depends what you're trying to do. -
burns wrote:
Oh, so there's no simple way of just making an ID's backgrounf 50% transparent then?
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 wrote:
They're all or nothing are they not?
Transparent gifs are usually OK though, but depends what you're trying to do. -
catterz 8,763 posts
Seen 8 years ago
Registered 19 years agoYou 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 70,666 posts
Seen 12 years ago
Registered 20 years agoCrispyXUK wrote:
pjmaybe wrote:
They're all or nothing are they not?
Transparent gifs are usually OK though, but depends what you're trying to do.
Ahh I see your point. In that case, the only truly cross-browser way to do it is to fake it, baby.gif)
-
thehat 1,831 posts
Seen 10 years ago
Registered 16 years agoCrispyXUK wrote:
Not that's got decent browser support, no.
burns wrote:
Oh, so there's no simple way of just making an ID's backgrounf 50% transparent then?
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. -
Cunting fuckery. -
Use a transparent PNG and then just forget about it in IE6. It's presumably just a decorative effect, right? -
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 15,037 posts
Seen 5 days ago
Registered 18 years agocause 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 -
Yeah, I tried that, but now I've lost the background white
/is thick. -
Yeah, I tried that, but now I've lost the background white
/is thick. -
Spanky 15,037 posts
Seen 5 days ago
Registered 18 years agoyou need to also float that content wrap to the left, come on crispy! -
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 15,037 posts
Seen 5 days ago
Registered 18 years agoWhy? 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. -
No, I didn't know that. I'm still relatively new to all this.
I use coda, it's full of winnage. -
Not as much winnage as firebug in firefox. Hold on... coda? Is that a mac thing?
/prepares shaking fist action!
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.
