A rant on CSS
8 posts
• Page 1 of 1
A rant on CSS
I am not sure how I've NEVER picked up on this until tonight.
Apparently when you're working with lists in CSS, and they are inline, there is absolutely NO way to center them on the page AND center the text itself vertically in the user list itself.
OK, there is... but let me explain fully what I mean by "NO" way.
My lists have a background image that changes when you mouse over. Now usually you can just use padding to fix this problem. I can simply make an area 24 pixes tall by smartly using the padding. When I mouse over, it works - top to bottom. But, oh, shoot... my text is flush to the top of the user list.
And that's the problem. The text will ALWAYS stay inline (thus at the top and not padded down). So if you want to align your text (vertically) in the middle of a 24px bar for example, you can't.
You either have to float them all left, and then center them horizontally, or you have to center them horizontally, but live with them flushed to the top inline.
I suppose I could always put margins on the outside of the user list, but when you have a submenu list that changes sizes (depending on what items are in it from page to page) that doesn't always work either.
Argh... talk about a PITA. But that explains why you never see them centered.
If I'm wrong... someone tell me. I want examples too.
"Greatness is not a function of circumstance. Greatness, it turns out, is largely a matter of conscious choice, and discipline." - Jim Collins
- kanaloa
- President
- Posts: 11795
- Joined: Sun Mar 10, 2002 1:18 am
- Location: HI & SC
- Real Name: John Derrick
Check out this: http://www.ampsoft.net/webdesign-l/vert ... -list.html
I am not sure if that is exactly what you wanted to do and I don't know if it will work with images but it looks promising.
- jbullard
- VP - Software
- Posts: 3653
- Joined: Sun Jun 06, 2004 10:17 pm
- Location: Utah
- Real Name: Jason Bullard
Hey that did part of the trick.
Now I just have to figure out how to get the background image to fill the whole space again. It only goes half way currently.
Now I just have to figure out how to get the background image to fill the whole space again. It only goes half way currently.
"Greatness is not a function of circumstance. Greatness, it turns out, is largely a matter of conscious choice, and discipline." - Jim Collins
- kanaloa
- President
- Posts: 11795
- Joined: Sun Mar 10, 2002 1:18 am
- Location: HI & SC
- Real Name: John Derrick
Whoa, just figured it out. The math doesn't exactly make sense... but it works. Let me test this in IE.
Nice find Jason.
Nice find Jason.
"Greatness is not a function of circumstance. Greatness, it turns out, is largely a matter of conscious choice, and discipline." - Jim Collins
- kanaloa
- President
- Posts: 11795
- Joined: Sun Mar 10, 2002 1:18 am
- Location: HI & SC
- Real Name: John Derrick
Usually, I find that there is a way to do just about anything but I would have never thought to design it in that given way. Usually for me it's just a matter of getting into touch with the right people or sites that give instructions on what to do.
Mac OS 10.6.7 - Personal
Ubuntu Server 11.04 - Server
You're right, it's usually just a matter of finding the right website now days. Someone's found a way around almost everything.
My problem went from being "impossible" to working even better than I'd hoped. Even figured out how to do those Microsoft-like web buttons I always wanted to use.
My problem went from being "impossible" to working even better than I'd hoped. Even figured out how to do those Microsoft-like web buttons I always wanted to use.
"Greatness is not a function of circumstance. Greatness, it turns out, is largely a matter of conscious choice, and discipline." - Jim Collins
- kanaloa
- President
- Posts: 11795
- Joined: Sun Mar 10, 2002 1:18 am
- Location: HI & SC
- Real Name: John Derrick
I always figured it was three buttons... it's just two. And basically you make the larger part of the button, the right side appear when you mouse over. That all takes place within a span tag. You also add some padding during the mouse over, which reveals the background of the list item behind it... or in this case, the left side of the button. It's actually a simple but genius idea.
I had just assumed it was three buttons... I'll post a link for others to see when I'm done with the site. I'm not ready for Google to start indexing it yet, and I know if I post the link it'll start.
I had just assumed it was three buttons... I'll post a link for others to see when I'm done with the site. I'm not ready for Google to start indexing it yet, and I know if I post the link it'll start.
"Greatness is not a function of circumstance. Greatness, it turns out, is largely a matter of conscious choice, and discipline." - Jim Collins
- kanaloa
- President
- Posts: 11795
- Joined: Sun Mar 10, 2002 1:18 am
- Location: HI & SC
- Real Name: John Derrick
8 posts
• Page 1 of 1
Return to HTML, CSS, and Scripts
Who is online
Users browsing this forum: No registered users and 4 guests