DTP


 
Lively discussions on the graphic arts and publishing — in print or on the web


Go Back   Desktop Publishing Forum > General Discussions > Web Design

Reply
 
Thread Tools Display Modes
Old 03-24-2009, 01:06 PM   #1
dacoyle
Member
 
dacoyle's Avatar
 
Join Date: Aug 2005
Location: Arlington, VA (across the river from Washington, DC)
Posts: 560
Default Vertical align for navigation lists with multiple lines

I'm using <ul> and CSS for a site navigation. I can't provide a link 'cause it's on my work development server (an intranet). In a nutshell, it's 7 buttons but three of the buttons have longer text so wrap to 2 lines. I want all the buttons the same size.

I found and article that explains how to do it, and it mostly work. The problem is, this solution requires each <li> to have an <a> tag. I prefer to remove the <a> tag from the page that's displaying, so the above article isn't enough.

Is there a way to get <li> buttons the same height if there's no <a> tag? line-height and height have no effect on the <li> alone.

Alternative: trying to talk the content owner into shorter text...

   
__________________
Dennis
dacoyle is offline   Reply With Quote
Old 03-24-2009, 04:05 PM   #2
iamback
Member
 
iamback's Avatar
 
Join Date: Oct 2005
Location: Amsterdam, NL
Posts: 4,894
Default

Maybe you could replace the a tag with a span for teh current page, and give it the same styling as the a in that context?

   
__________________
Marjolein Katsma
Look through my eyes on Cultural Surfaces (soon!), My ArtFlakes shop and Flickr.
Occasionally I am also connecting online dots... and sometimes you can follow me on Marjolein's Travel Blog
iamback is offline   Reply With Quote
Old 03-24-2009, 05:38 PM   #3
BobRoosth
Member
 
Join Date: Jan 2005
Location: Los Angeles, Ca.
Posts: 933
Default

Isn't that what
<a href="#" >
is good for?
BobRoosth is offline   Reply With Quote
Old 03-25-2009, 05:59 AM   #4
dacoyle
Member
 
dacoyle's Avatar
 
Join Date: Aug 2005
Location: Arlington, VA (across the river from Washington, DC)
Posts: 560
Default

Quote:
Originally Posted by BobRoosth View Post
Isn't that what
<a href="#" >
is good for?
I tried an empty <a> tag. Couldn't get it to work.

   
__________________
Dennis
dacoyle is offline   Reply With Quote
Old 03-25-2009, 06:00 AM   #5
dacoyle
Member
 
dacoyle's Avatar
 
Join Date: Aug 2005
Location: Arlington, VA (across the river from Washington, DC)
Posts: 560
Default

Quote:
Originally Posted by iamback View Post
Maybe you could replace the a tag with a span for teh current page, and give it the same styling as the a in that context?
By styling what? I think I tried spanning the <li> to no effect. Everything I've tried, I can only change the height of the <a> tag.

I love CSS but sometimes it doesn't play nice with others...

   
__________________
Dennis
dacoyle is offline   Reply With Quote
Old 03-25-2009, 09:04 AM   #6
Bo Aakerstrom
Member
 
Bo Aakerstrom's Avatar
 
Join Date: Mar 2005
Location: Derby,UK
Posts: 1,321
Default

Try using <p> and style the paragraph in the div same as the anchor.

   
__________________
www.boaakerstrom.com
Behance Portfolio
Bo Aakerstrom is offline   Reply With Quote
Old 03-26-2009, 03:39 AM   #7
iamback
Member
 
iamback's Avatar
 
Join Date: Oct 2005
Location: Amsterdam, NL
Posts: 4,894
Default

Quote:
Originally Posted by dacoyle View Post
By styling what? I think I tried spanning the <li> to no effect. Everything I've tried, I can only change the height of the <a> tag.
Don't span the <li> tag, span the content in side it, instead of making it a link with an <a> tag - instead of:
Code:
<li><a href="...">content</a></li>
use:
Code:
<li><span>content</span></li>
Then find how the li a is styled, and style li span exactly the same way.

You cannot set a height for the <a> tag by itself: that is because it's inline; so you have to make it a block first, and then you can give it a height. One way to do that is with li a { display: block; }, or by floating it: li a { float: left; }; you can do exactly the same thing for the span as well: first make it a block, then set a height.

   
__________________
Marjolein Katsma
Look through my eyes on Cultural Surfaces (soon!), My ArtFlakes shop and Flickr.
Occasionally I am also connecting online dots... and sometimes you can follow me on Marjolein's Travel Blog
iamback is offline   Reply With Quote
Old 03-27-2009, 06:46 AM   #8
dacoyle
Member
 
dacoyle's Avatar
 
Join Date: Aug 2005
Location: Arlington, VA (across the river from Washington, DC)
Posts: 560
Default

Trouble with that is our documented requirements ban empty <div> or <span> tags.

I'll play with this more later. For now, I talked the content owner into shorter text.

   
__________________
Dennis
dacoyle is offline   Reply With Quote
Old 03-27-2009, 01:47 PM   #9
iamback
Member
 
iamback's Avatar
 
Join Date: Oct 2005
Location: Amsterdam, NL
Posts: 4,894
Default

Quote:
Originally Posted by dacoyle View Post
Trouble with that is our documented requirements ban empty <div> or <span> tags.
No trouble cause they aren't empty! And to make it behave just like an a tag, a span is better cause by default it's also an inline element.

   
__________________
Marjolein Katsma
Look through my eyes on Cultural Surfaces (soon!), My ArtFlakes shop and Flickr.
Occasionally I am also connecting online dots... and sometimes you can follow me on Marjolein's Travel Blog
iamback is offline   Reply With Quote
Old 04-02-2009, 06:15 PM   #10
dacoyle
Member
 
dacoyle's Avatar
 
Join Date: Aug 2005
Location: Arlington, VA (across the river from Washington, DC)
Posts: 560
Default

Quote:
Originally Posted by iamback View Post
No trouble cause they aren't empty! And to make it behave just like an a tag, a span is better cause by default it's also an inline element.
<span> without an attribute is empty. Some validators flag that, so it's part of our requirements. Sorry I can't cite specifics, but we don't allow <div> or <span> without attributes.

I didn't write our requirements. (Well, I did write a lot of it, but not that bit.)

dac

   
__________________
Dennis
dacoyle is offline   Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Vertical Text in InDesign Ashlie Print Design 4 09-17-2008 02:47 PM
CSS vertical text positioning dacoyle Web Design 8 06-12-2008 05:56 PM
Lists for nav — semantic logic? ktinkel Web Design 28 06-26-2006 05:53 PM
CSS vertical navigation bar dthomsen8 Web Site Building & Maintenance 10 03-14-2006 06:41 AM
Fetch shortcut lists annc Web Site Building & Maintenance 14 04-16-2005 01:10 AM


All times are GMT -8. The time now is 09:31 PM.


Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Contents copyright 2004–2014 Desktop Publishing Forum and its members.