WebProWorld Part of WebProNews.com
Page One Link To Us Edit Profile Private Messages Archives FAQ RSS Feeds  
 

Go Back   WebProWorld > Webmaster, IT and Security Discussion > Web Programming Discussion Forum
Subscribe to the Newsletter FREE!


Register FAQ Members List Calendar Arcade Chatbox Mark Forums Read

Web Programming Discussion Forum Working with an API? Developing a plugin? Writing a Mod or script for your favorite blog, Web 2.0 site or Forum? Welcome.

Reply
 
LinkBack Thread Tools Display Modes
  #1 (permalink)  
Old 09-14-2006, 01:10 PM
arvana's Avatar
WebProWorld Pro
 

Join Date: Jul 2003
Location: Guelph, Ontario, Canada
Posts: 157
arvana RepRank 0
Default Center inline < li > elements

This is an issue that has flummoxed me so far, and I haven't been able to find anything on the web that addresses it.

I have a site with a horizontal menu made up of inline[*] elements, which wraps into multiple lines. I would like to have each line centered, but it seems as though when an[*] is set to inline it will only text-align left. I can get the entire div containing the menu items to center, but not the individual lines of menu items relative to each other.

I've tried everything I can think of, but no joy. Anybody faced this issue in the past who can shed some light on it for me?

I don't have the option of changing to a different element than[*] since the menu is generated by a content management system.

Many thanks!
__________________
Arvana
arvanadesign.com
Reply With Quote
  #2 (permalink)  
Old 09-14-2006, 05:36 PM
WebProWorld Veteran
 

Join Date: Jul 2003
Location: Spain
Posts: 335
computergenius RepRank 1
Default CSS?

Not sure what you mean by 'inline', but wouldn't CSS solve your problem?
__________________
Pete Clark
Advertise events locally in Spain for free - http://hotcosta.com/events.php
Reply With Quote
  #3 (permalink)  
Old 09-14-2006, 05:45 PM
WebProWorld New Member
 

Join Date: Feb 2006
Location: Austin, TX
Posts: 17
dsmasters RepRank 0
Default Here is my CSS

This some CSS that I use for a horizontal menu.

Maybe it will help -

#navigation{
background:url(images/nav.jpg) no-repeat bottom center;
height:44px;
line-height:44px;
}

#navigation ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#navigation ul li {
display: inline;
}

#navigation ul li a
{
text-decoration: none;
padding: 15px 1em;
color: #fff;
text-transform:uppercase;
font-size:12px;
letter-spacing:1px;
}

#navigation ul li a:hover
{
color: #FFFF00;
background:url(images/nav_hover.jpg) bottom center;
}

The thing that makes it center is the ul set to center. I think that if you removed the height and line height references from "navigation" that it should wrap and horizontal center.

You can see it in action here - http://dan.idano.net

Dan
Reply With Quote
  #4 (permalink)  
Old 09-14-2006, 05:52 PM
arvana's Avatar
WebProWorld Pro
 

Join Date: Jul 2003
Location: Guelph, Ontario, Canada
Posts: 157
arvana RepRank 0
Default

Thanks for the replies -- the issue is when the menu wraps onto a second line. The second (and subsequent) lines always seem to align to the left of their container, even if that container is centered.

Here's the page I'm having the issue with:
http://www.control-access8.com/~soulconnection/

If you scroll down to the bottom, you'll see that the links in the footer are centered as a whole, but the individual lines aren't centered relative to each other, and I can't get them to, no matter how many elements I make text-align:center.
__________________
Arvana
arvanadesign.com
Reply With Quote
  #5 (permalink)  
Old 09-14-2006, 05:56 PM
WebProWorld New Member
 

Join Date: Feb 2006
Location: Austin, TX
Posts: 17
dsmasters RepRank 0
Default This one works

Actually I could not let it go. This works and you can see a sample of it here -

http://temp.idano.net/

Here is the modified CSS -

#navigation{
background:url(images/nav.jpg);
}

#navigation ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#navigation ul li {
display: inline;
line-height:44px;
}

#navigation ul li a
{
text-decoration: none;
padding: 15px 1em;
color: #fff;
/*text-transform:uppercase;*/
font-size:12px;
letter-spacing:1px;
font-weight:bold;
}

#navigation ul li a:hover
{
color: #fee202;
background:url(images/nav_hover.jpg) bottom center;
}

It wraps to the second line and is centered.

Dan
Reply With Quote
  #6 (permalink)  
Old 09-14-2006, 06:00 PM
bj's Avatar
bj bj is offline
WebProWorld 1,000+ Club
 

Join Date: Apr 2005
Location: Delaware Valley, PA
Posts: 1,186
bj RepRank 2bj RepRank 2
Default

Add this to the bottom of your stylesheet:

#footer ul.menu {
text-align: center;
}

tested in firefox and found to work. It's possible you might have to get even more specific in IE.
Reply With Quote
  #7 (permalink)  
Old 09-14-2006, 06:02 PM
arvana's Avatar
WebProWorld Pro
 

Join Date: Jul 2003
Location: Guelph, Ontario, Canada
Posts: 157
arvana RepRank 0
Default

Ha! You're absolutely right, dsmasters & bj, that works! Thanks a million -- I tried centering everything *except* the <ul> element. CSS can be quite mystifying sometimes.....

*humbled*
__________________
Arvana
arvanadesign.com
Reply With Quote
  #8 (permalink)  
Old 09-14-2006, 06:08 PM
bj's Avatar
bj bj is offline
WebProWorld 1,000+ Club
 

Join Date: Apr 2005
Location: Delaware Valley, PA
Posts: 1,186
bj RepRank 2bj RepRank 2
Default

You're very welcome.

I've had quite a bit of practice . . . which means I have a permanent callus (sp?) on my forehead from banging my head against the desk.
Reply With Quote
  #9 (permalink)  
Old 09-14-2006, 06:11 PM
arvana's Avatar
WebProWorld Pro
 

Join Date: Jul 2003
Location: Guelph, Ontario, Canada
Posts: 157
arvana RepRank 0
Default

I'll have to send you a nice pumice stone for that....

Thanks again!
__________________
Arvana
arvanadesign.com
Reply With Quote
  #10 (permalink)  
Old 09-14-2006, 06:24 PM
magic_majax's Avatar
WebProWorld Member
 

Join Date: Jul 2004
Location: UK
Posts: 97
magic_majax RepRank 0
Default Re: Here is my CSS

Quote:
Originally Posted by dsmasters
This some CSS that I use for a horizontal menu.

Maybe it will help - Dan
It might help me I think, thanks for that, saved me a bit of googling.
Reply With Quote
  #11 (permalink)  
Old 09-14-2006, 11:41 PM
Orion's Avatar
WebProWorld Veteran
 

Join Date: Sep 2003
Location: Halton Hills, ON
Posts: 582
Orion RepRank 2
Default

fyi... your font in IE is almost illegible as it's soooo tiny.. in firefox it's nice and large (almost too large lol)..

not sure if that intended however if not it might be something you'll want to look at.

Nice design!
__________________
Ron Boyd
Web design & site management :: Ron's blog
Reply With Quote
  #12 (permalink)  
Old 09-15-2006, 02:18 PM
WebProWorld 1,000+ Club
 

Join Date: Jul 2003
Location: United Kingdom
Posts: 1,772
TrafficProducer RepRank 1
Default CSS or Tables

CSS or Tables

(Your Page look quite as it is good now :)

Well here's basic tables:-

Idea is to place code in a middle cell of three.

Youc can then do an align="left" that cell.

Code:
<table border="1" width="100%">
  <tr>
    <td width="33%"></td>
    <td width="33%">
      <ul>[*]1[*]2[*]3[*]4[/list]    </td>
    <td width="34%"></td>
  </tr>
</table>
__________________
Videos to Watch and Video Publishing
Affiliate Program! Our Affiliate Program Pays 50.00% Business Support
Reply With Quote
Reply

  WebProWorld > Webmaster, IT and Security Discussion > Web Programming Discussion Forum
Tags: , ,



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

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On


Search Engine Optimization by vBSEO 3.2.0