A Digital Age Deserves A Digital Leader

A rant on CSS

A rant on CSS

Postby kanaloa » Sat Jan 12, 2008 1:50 am

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. :whistle
"Greatness is not a function of circumstance. Greatness, it turns out, is largely a matter of conscious choice, and discipline." - Jim Collins
President
User avatar
Posts: 11795
Joined: Sun Mar 10, 2002 1:18 am
Location: Columbia, SC
Real Name: John Derrick

Postby jbullard » Sat Jan 12, 2008 2:46 am

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. :)
VP - Software
User avatar
Posts: 3653
Joined: Sun Jun 06, 2004 10:17 pm
Location: Utah
Real Name: Jason Bullard

Postby kanaloa » Sat Jan 12, 2008 4:05 am

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.
"Greatness is not a function of circumstance. Greatness, it turns out, is largely a matter of conscious choice, and discipline." - Jim Collins
President
User avatar
Posts: 11795
Joined: Sun Mar 10, 2002 1:18 am
Location: Columbia, SC
Real Name: John Derrick

Postby kanaloa » Sat Jan 12, 2008 4:13 am

Whoa, just figured it out. The math doesn't exactly make sense... but it works. Let me test this in IE.

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
President
User avatar
Posts: 11795
Joined: Sun Mar 10, 2002 1:18 am
Location: Columbia, SC
Real Name: John Derrick

Postby gries818 » Sat Jan 12, 2008 8:46 pm

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

Mac OS 10.6.7 - Personal
Ubuntu Server 11.04 - Server
Software Development
User avatar
Posts: 3991
Joined: Wed Jul 07, 2004 6:28 pm

Postby kanaloa » Sat Jan 12, 2008 11:32 pm

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.
"Greatness is not a function of circumstance. Greatness, it turns out, is largely a matter of conscious choice, and discipline." - Jim Collins
President
User avatar
Posts: 11795
Joined: Sun Mar 10, 2002 1:18 am
Location: Columbia, SC
Real Name: John Derrick

Postby jbullard » Sat Jan 12, 2008 11:41 pm

How do you do those MS buttons? Since you bring it up and all. :lol:
VP - Software
User avatar
Posts: 3653
Joined: Sun Jun 06, 2004 10:17 pm
Location: Utah
Real Name: Jason Bullard

Postby kanaloa » Sun Jan 13, 2008 6:13 am

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.
"Greatness is not a function of circumstance. Greatness, it turns out, is largely a matter of conscious choice, and discipline." - Jim Collins
President
User avatar
Posts: 11795
Joined: Sun Mar 10, 2002 1:18 am
Location: Columbia, SC
Real Name: John Derrick

Return to HTML, CSS, and Scripts

Who is online

Users browsing this forum: No registered users and 0 guests

cron
cron