Attention: PROnetworks has upgraded our forum from phpbb2 to phpbb3!!

Please head over to our new converted forum at: http://www.pronetworks.org/forums/

This old forum will remain 'read-only' until approximately February 2009. We look forward to seeing you at the new forum!
Author Message
kanaloa
John C. Derrick
PostPosted: Fri Jan 11, 2008 9:50 pm Reply with quote

President
 
 


Joined: 09 Mar 2002
Posts: 43768
Location: Columbia, SC
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
 
Back to top
jbullard
Jason Bullard
PostPosted: Fri Jan 11, 2008 10:46 pm Reply with quote

VP - Software
 
 


Joined: 06 Jun 2004
Posts: 3304
Location: Utah
Check out this: http://www.ampsoft.net/webdesign-l/vertical-aligned-nav-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. smile
 
Back to top
kanaloa
John C. Derrick
PostPosted: Sat Jan 12, 2008 12:05 am Reply with quote

President
 
 


Joined: 09 Mar 2002
Posts: 43768
Location: Columbia, SC
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.
 
Back to top
kanaloa
John C. Derrick
PostPosted: Sat Jan 12, 2008 12:13 am Reply with quote

President
 
 


Joined: 09 Mar 2002
Posts: 43768
Location: Columbia, SC
Whoa, just figured it out. The math doesn't exactly make sense... but it works. Let me test this in IE.

Nice find Jason.
 
Back to top
gries818
PostPosted: Sat Jan 12, 2008 4:46 pm Reply with quote

PROfessional Member
 
 


Joined: 07 Jul 2004
Posts: 6572
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.
 
Back to top
kanaloa
John C. Derrick
PostPosted: Sat Jan 12, 2008 7:32 pm Reply with quote

President
 
 


Joined: 09 Mar 2002
Posts: 43768
Location: Columbia, SC
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.
 
Back to top
jbullard
Jason Bullard
PostPosted: Sat Jan 12, 2008 7:41 pm Reply with quote

VP - Software
 
 


Joined: 06 Jun 2004
Posts: 3304
Location: Utah
How do you do those MS buttons? Since you bring it up and all. lol
 
Back to top
kanaloa
John C. Derrick
PostPosted: Sun Jan 13, 2008 2:13 am Reply with quote

President
 
 


Joined: 09 Mar 2002
Posts: 43768
Location: Columbia, SC
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.
 
Back to top
Back to top
Index >> Webmaster Domain & Code Room >> A rant on CSS

Page 1 of 1

 


Tired of the Ads? Registered users have 80% less adverts.