CSS centering inline lists

Page 1 of 2 1, 2  Next

View previous topic View next topic Go down

CSS centering inline lists

Post by AMV_Ph34r on Sun Jan 30 2011, 22:51

So I'm making a website for my robotics team. I'm using an unordered list with CSS to make the navbar, but I'd like to be centered horizontally across the screen. Only problem is, I didn't make the list the same way most would to center it, so it's not working.

Basically, stuff like this is what I'm finding for tutorials online:
Code:
CSS CODE
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #036;
}

#navcontainer ul li a:hover
{
color: #fff;
background-color: #369;
}


HTML CODE
<div id="navcontainer">
<ul>
<li><a href="#">Milk</a></li>
<li><a href="#">Eggs</a></li>
<li><a href="#">Cheese</a></li>
<li><a href="#">Vegetables</a></li>
<li><a href="#">Fruit</a></li>
</ul>
</div>

However, my HTML code is set up like this:
Code:
<ul id="homenav">
  <li class="mainNavigation"><span><a href="http://localhost/index.php" id="homenav">Home</a></span></li>
</ul>

<ul id="newsnav">
   <li class="mainNavigation"><span><a href="http://localhost/news.php" id="newsnav">News</a></span></li>
</ul>

<ul class="sf-menu" id="aboutnav">
  <li class="mainNavigation"><span><a href="http://localhost/aboutUs.php" id="aboutnav">About</a></span></li>
</ul>

<ul class="sf-menu" id="gallerynav">
  <li class="mainNavigation"><span><a href="http://localhost/pictures.php" id="gallerynav">Gallery</a></span></li>
</ul>
<ul class="sf-menu" id="calnav">
  <li class="mainNavigation"><span><a href="http://localhost/calendar.php" id="calnav">Calendar</a></span></li>
</ul>

<ul class="sf-menu" id="resnav">
  <li class="mainNavigation"><span><a href="http://localhost/reqd.php" id="resnav">Resources</a></span></li>
</ul>

<ul>
  <li class="mainNavigation"><span><a href="http://localhost/contact.php">Contact Us</a></span></li>
</ul>

Instead of one ul with many li's, I have many ul's with one li each. I did this because I had a different navbar format in mind when I first made the site, but have since altered it. Is there a simple way to edit the above CSS code so it will work with my navbar's format, or do I have to remake the navbar?

Also, this is what my CSS code looks like so far (after throwing text-align: center everywhere, hoping it would work):
Code:
#mainNavigation {
   position:relative;
   z-index:99;
   width:100%;
   /*border-bottom: 1px solid #cccccc;*/
   height:40px;
   background-color: #c46407;
   text-align: center;
}

#mainNavigation ul:hover {
   background:url(../images/rollover.jpg) repeat-x;
   background-repeat: repeat-x;
}

body#home a#homenav {
   background:url(../images/selected.jpg) repeat-x;
   background-repeat: repeat-x;
}

#mainNavigation ul {
   float: left;
   list-style-type: none;
   cursor: pointer;
   text-align: center;
   margin: 0;
   padding: 0;
   width:auto;
}

#mainNavigation li {
   display: inline;
   text-align: center;
}

#mainNavigation a {
   /*padding: 0 25px;*/
   padding: .2em 1em;
   display: block;
   color:#FFFFFF;
   text-decoration: none;
   border: none;
   background: none;
   text-align: center;
}

.mainNavigation {
   margin: 0;
   font-size: 14px;
   font-weight: bold;
   display: block;
}

#mainNavigation .mainNavigation a {
   padding-top: 11px;
   font-weight:bold;
   color: white;
}

.sf-menu li:hover, .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
   background: none;
}

Thanks!
avatar
AMV_Ph34r
Runecats Helper
Runecats Helper

Number of posts : 802
Runecats Explorer Version : 1.7 Beta 4
Runecats Reputation : 5
Male Age : 23
Location : North Carolina
Registration date : 2008-05-11
Points : 1040

View user profile http://teamawkwardturtle.org

Back to top Go down

Re: CSS centering inline lists

Post by Support on Mon Jan 31 2011, 19:37

Hmm everything I was going to suggest you have already done.

It maybe a matter of a syntax problem or just an ordering problem, i'll have a bigger look at it once I actually get some free time!


Last edited by Nathan on Mon Jan 31 2011, 19:48; edited 1 time in total

......................................
avatar
Support
Admin
Admin

Number of posts : 5000
Roccat Version : 6.6 BETA
Runecats Explorer Version : 1.8 BETA
Runecats Reputation : 32
Location : Runecats HQ
Registration date : 2008-04-16
Points : 3095

View user profile http://runecats.com

Back to top Go down

Re: CSS centering inline lists

Post by AMV_Ph34r on Mon Jan 31 2011, 19:40

I don't have an absolute deadline, but I'd like it done by this Friday or Saturday.
avatar
AMV_Ph34r
Runecats Helper
Runecats Helper

Number of posts : 802
Runecats Explorer Version : 1.7 Beta 4
Runecats Reputation : 5
Male Age : 23
Location : North Carolina
Registration date : 2008-05-11
Points : 1040

View user profile http://teamawkwardturtle.org

Back to top Go down

Re: CSS centering inline lists

Post by Support on Mon Jan 31 2011, 19:49

Okies well I will have a look again soon then Smile

......................................
avatar
Support
Admin
Admin

Number of posts : 5000
Roccat Version : 6.6 BETA
Runecats Explorer Version : 1.8 BETA
Runecats Reputation : 32
Location : Runecats HQ
Registration date : 2008-04-16
Points : 3095

View user profile http://runecats.com

Back to top Go down

Re: CSS centering inline lists

Post by AMV_Ph34r on Mon Jan 31 2011, 22:15

Awesome, thanks. Don't wanna have to rewrite it entirely, because I'm too lazy to do it the right way XD
avatar
AMV_Ph34r
Runecats Helper
Runecats Helper

Number of posts : 802
Runecats Explorer Version : 1.7 Beta 4
Runecats Reputation : 5
Male Age : 23
Location : North Carolina
Registration date : 2008-05-11
Points : 1040

View user profile http://teamawkwardturtle.org

Back to top Go down

Re: CSS centering inline lists

Post by Hellblade on Tue Feb 01 2011, 20:37

Change your HTML Code to this:

Code:
<div id="mainNavigation">
        <ul id="homenav">
            <li class="mainNavigation"><span><a href="http://localhost/index.php">Home</a></span></li>
        </ul>
        <ul id="newsnav">
            <li class="mainNavigation"><span><a href="http://localhost/news.php">News</a></span></li>
        </ul>
        <ul class="sf-menu" id="aboutnav">
            <li class="mainNavigation"><span><a href="http://localhost/aboutUs.php">About</a></span></li>
        </ul>
        <ul class="sf-menu" id="gallerynav">
            <li class="mainNavigation"><span><a href="http://localhost/pictures.php">Gallery</a></span></li>
        </ul>
        <ul class="sf-menu" id="calnav">
            <li class="mainNavigation"><span><a href="http://localhost/calendar.php">Calendar</a></span></li>
        </ul>
        <ul class="sf-menu" id="resnav">
            <li class="mainNavigation"><span><a href="http://localhost/reqd.php">Resources</a></span></li>
        </ul>
        <ul>
            <li class="mainNavigation"><span><a href="http://localhost/contact.php">Contact Us</a></span></li>
        </ul>
    </div>

(I took out the ID's for the anchors, that wasn't the problem (you just needed that DIV container, because of how you did your CSS) but you shouldn't have two things with the same ID Wink )

......................................
avatar
Hellblade
Moderator
Moderator

Number of posts : 1485
Runecats Reputation : 1
Male Age : 23
Location : New Zealand
Registration date : 2008-04-19
Points : 1129

View user profile http://www.aliencreationstudios.net23.net

Back to top Go down

Re: CSS centering inline lists

Post by AMV_Ph34r on Tue Feb 01 2011, 21:02

That didn't seem to work. It still isn't centered.
avatar
AMV_Ph34r
Runecats Helper
Runecats Helper

Number of posts : 802
Runecats Explorer Version : 1.7 Beta 4
Runecats Reputation : 5
Male Age : 23
Location : North Carolina
Registration date : 2008-05-11
Points : 1040

View user profile http://teamawkwardturtle.org

Back to top Go down

Re: CSS centering inline lists

Post by Hellblade on Tue Feb 01 2011, 21:13

Oh right. Well, one way I can think of is to give the navbar a set width, and use margins - like this:

Code:

#mainNavigation {
  position:relative;
  z-index:99;
  /*border-bottom: 1px solid #cccccc;*/
  height:40px;
  background-color: #c46407;
  text-align: center;
  width:800px;
  margin:0 auto;
}

......................................
avatar
Hellblade
Moderator
Moderator

Number of posts : 1485
Runecats Reputation : 1
Male Age : 23
Location : New Zealand
Registration date : 2008-04-19
Points : 1129

View user profile http://www.aliencreationstudios.net23.net

Back to top Go down

Re: CSS centering inline lists

Post by AMV_Ph34r on Tue Feb 01 2011, 23:01

Still didn't work. I'm thinking the problem is that in the tutorials I found, the entire navbar was one list, with each link being an item. This was originally set up so there was one list per link, with a drop-down menu. I might have to just alter it so it's set up the correct way. Wish I didn't have to do that, though.

Edit: Ah, found the old file. Here's a sample of what it used to look like
Code:
<ul>
  <li class="mainNavigationTop"><span></span></li>
  <li class="mainNavigationBottom"><span><a href="index.php">Home</a></span></li>
</ul>
<ul class="sf-menu">
  <li class="mainNavigationTop"><span></span></li>
  <li class="mainNavigationBottom top_drop"><span><a href="#">About
Us</a></span>
    <ul id="dropDown">
      <li><a href="aboutTeam.php">About the Team</a></li>
      <li><a href="aboutFRC.php">About FIRST</a></li>
      <li><a href="ourRobots.php">About our
Robots</a>
      </li>
     
    </ul>
  </li>
</ul>
avatar
AMV_Ph34r
Runecats Helper
Runecats Helper

Number of posts : 802
Runecats Explorer Version : 1.7 Beta 4
Runecats Reputation : 5
Male Age : 23
Location : North Carolina
Registration date : 2008-05-11
Points : 1040

View user profile http://teamawkwardturtle.org

Back to top Go down

Re: CSS centering inline lists

Post by Support on Wed Feb 02 2011, 12:41

What Hellblade said should have worked, I can't think why it's not i'll do a Runesearch on it and see what I can find, haven't found anything yet though :/

......................................
avatar
Support
Admin
Admin

Number of posts : 5000
Roccat Version : 6.6 BETA
Runecats Explorer Version : 1.8 BETA
Runecats Reputation : 32
Location : Runecats HQ
Registration date : 2008-04-16
Points : 3095

View user profile http://runecats.com

Back to top Go down

Re: CSS centering inline lists

Post by AMV_Ph34r on Wed Feb 02 2011, 21:47

Hmm... okay, I'll keep messing around with it to see if I can get anything working. Thanks!
avatar
AMV_Ph34r
Runecats Helper
Runecats Helper

Number of posts : 802
Runecats Explorer Version : 1.7 Beta 4
Runecats Reputation : 5
Male Age : 23
Location : North Carolina
Registration date : 2008-05-11
Points : 1040

View user profile http://teamawkwardturtle.org

Back to top Go down

Re: CSS centering inline lists

Post by Hellblade on Wed Feb 02 2011, 23:18

My way worked fine for me...

Use the updated HTML, and replace the CSS style I updated.
I had quickly put it in an html file when trying to get it working for you, this is the file, save it and is should work...

Code:
<html><head>

<style type="text/CSS">

#mainNavigation {
  position:relative;
  z-index:99;
  /*border-bottom: 1px solid #cccccc;*/
  height:40px;
  background-color: #c46407;
  text-align: center;
  width:800px;
  margin:0 auto;
}

#mainNavigation ul:hover {
  background:url(../images/rollover.jpg) repeat-x;
  background-repeat: repeat-x;
}

body#home a#homenav {
  background:url(../images/selected.jpg) repeat-x;
  background-repeat: repeat-x;
}

#mainNavigation ul {
  float: left;
  list-style-type: none;
  cursor: pointer;
  text-align: center;
  margin: 0;
  padding: 0;
  width:auto;
}

#mainNavigation li {
  display: inline;
  text-align: center;
}

#mainNavigation a {
  /*padding: 0 25px;*/
  padding: .2em 1em;
  display: block;
  color:#FFFFFF;
  text-decoration: none;
  border: none;
  background: none;
  text-align: center;
}

.mainNavigation {
  margin: 0;
  font-size: 14px;
  font-weight: bold;
  display: block;
}

#mainNavigation .mainNavigation a {
  padding-top: 11px;
  font-weight:bold;
  color: white;
}


.sf-menu li:hover, .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
  background: none;
}

</style>

</head><body>
<div id="mainNavigation">
<ul id="homenav">
  <li class="mainNavigation"><span><a href="http://localhost/index.php">Home</a></span></li>
</ul>

<ul id="newsnav">
  <li class="mainNavigation"><span><a href="http://localhost/news.php">News</a></span></li>
</ul>

<ul class="sf-menu" id="aboutnav">

  <li class="mainNavigation"><span><a href="http://localhost/aboutUs.php">About</a></span></li>
</ul>

<ul class="sf-menu" id="gallerynav">
  <li class="mainNavigation"><span><a href="http://localhost/pictures.php">Gallery</a></span></li>
</ul>
<ul class="sf-menu" id="calnav">
  <li class="mainNavigation"><span><a href="http://localhost/calendar.php">Calendar</a></span></li>
</ul>

<ul class="sf-menu" id="resnav">
  <li class="mainNavigation"><span><a href="http://localhost/reqd.php">Resources</a></span></li>
</ul>

<ul>
  <li class="mainNavigation"><span><a href="http://localhost/contact.php">Contact Us</a></span></li>
</ul>
</div>
</body>
</html>
(Mind you, I hope you have your CSS in a CSS file)
If iit doesn't work, maybe there's something wrong with your browser Wink

......................................
avatar
Hellblade
Moderator
Moderator

Number of posts : 1485
Runecats Reputation : 1
Male Age : 23
Location : New Zealand
Registration date : 2008-04-19
Points : 1129

View user profile http://www.aliencreationstudios.net23.net

Back to top Go down

Re: CSS centering inline lists

Post by Support on Thu Feb 03 2011, 07:33

Works for me to so it shoudl work for Alex.

......................................
avatar
Support
Admin
Admin

Number of posts : 5000
Roccat Version : 6.6 BETA
Runecats Explorer Version : 1.8 BETA
Runecats Reputation : 32
Location : Runecats HQ
Registration date : 2008-04-16
Points : 3095

View user profile http://runecats.com

Back to top Go down

Re: CSS centering inline lists

Post by Hellblade on Fri Feb 04 2011, 04:45

Yeah, if that doesn't work, I currently don't have any other ideas.
But seeing as it works for Nathan too, it should be the fix you're after Very Happy

......................................
avatar
Hellblade
Moderator
Moderator

Number of posts : 1485
Runecats Reputation : 1
Male Age : 23
Location : New Zealand
Registration date : 2008-04-19
Points : 1129

View user profile http://www.aliencreationstudios.net23.net

Back to top Go down

Re: CSS centering inline lists

Post by AMV_Ph34r on Sat Feb 05 2011, 11:23

Okay, I tried it again. A little better, but it centers the bar itself, but not the words. I want the orange bar to have a width of 100%, with the words centered. This centers the bar, but the list items are still set to the left of the bar.

Edit: Also, I'd like to have the items evenly spaced across the navbar. How could I do that? (I really should take the time to go back and relearn CSS. It's been a long time since I've done much with it.)
avatar
AMV_Ph34r
Runecats Helper
Runecats Helper

Number of posts : 802
Runecats Explorer Version : 1.7 Beta 4
Runecats Reputation : 5
Male Age : 23
Location : North Carolina
Registration date : 2008-05-11
Points : 1040

View user profile http://teamawkwardturtle.org

Back to top Go down

Re: CSS centering inline lists

Post by Hellblade on Sun Feb 06 2011, 03:28

To do evenly spaced, you'd probably have to give each thing a set width (all being the same). Using one UL might allow the items to be centered properly, and have even spacing.

Maybe, if using one UL and perhaps some set sizing allows proper centering, you could put the navigation div in another div that is set to 100% - so it looks like it's just one bar - if you can't get anything else working.

......................................
avatar
Hellblade
Moderator
Moderator

Number of posts : 1485
Runecats Reputation : 1
Male Age : 23
Location : New Zealand
Registration date : 2008-04-19
Points : 1129

View user profile http://www.aliencreationstudios.net23.net

Back to top Go down

Re: CSS centering inline lists

Post by AMV_Ph34r on Sun Feb 06 2011, 10:32

Alright, so I tried out giving each one a set width of 14.2-something percent, since there's 7 items. It works almost perfectly now. There's a tiny 1-or-2-pixel width of unused space at the end, but it's barely noticeable, so I don't really care. Bottom line is I got it working, so yay!
avatar
AMV_Ph34r
Runecats Helper
Runecats Helper

Number of posts : 802
Runecats Explorer Version : 1.7 Beta 4
Runecats Reputation : 5
Male Age : 23
Location : North Carolina
Registration date : 2008-05-11
Points : 1040

View user profile http://teamawkwardturtle.org

Back to top Go down

Re: CSS centering inline lists

Post by Support on Sun Feb 06 2011, 11:10

Horray, I am sure no one is going to be critical over a mere 1-2 pixels Razz

......................................
avatar
Support
Admin
Admin

Number of posts : 5000
Roccat Version : 6.6 BETA
Runecats Explorer Version : 1.8 BETA
Runecats Reputation : 32
Location : Runecats HQ
Registration date : 2008-04-16
Points : 3095

View user profile http://runecats.com

Back to top Go down

Re: CSS centering inline lists

Post by Hellblade on Sun Feb 06 2011, 23:29

1-2 pixels, that's waaaay too bigger space :@
haha. Good job Very Happy

......................................
avatar
Hellblade
Moderator
Moderator

Number of posts : 1485
Runecats Reputation : 1
Male Age : 23
Location : New Zealand
Registration date : 2008-04-19
Points : 1129

View user profile http://www.aliencreationstudios.net23.net

Back to top Go down

Re: CSS centering inline lists

Post by AMV_Ph34r on Mon Feb 07 2011, 07:21

Thanks for the help! Very Happy
Now I've actually got a nice-looking page here:
http://dl.dropbox.com/u/2780202/hitchhikers_beta_new.png
avatar
AMV_Ph34r
Runecats Helper
Runecats Helper

Number of posts : 802
Runecats Explorer Version : 1.7 Beta 4
Runecats Reputation : 5
Male Age : 23
Location : North Carolina
Registration date : 2008-05-11
Points : 1040

View user profile http://teamawkwardturtle.org

Back to top Go down

Re: CSS centering inline lists

Post by Hellblade on Tue Feb 08 2011, 03:48

Hehe, yep, no problem.

That does look good Very Happy

......................................
avatar
Hellblade
Moderator
Moderator

Number of posts : 1485
Runecats Reputation : 1
Male Age : 23
Location : New Zealand
Registration date : 2008-04-19
Points : 1129

View user profile http://www.aliencreationstudios.net23.net

Back to top Go down

Re: CSS centering inline lists

Post by AMV_Ph34r on Sun Feb 13 2011, 22:44

Yay, so it's actually online now! http://thehitchhikers.org/
I feel special; I actually did something! Very Happy
avatar
AMV_Ph34r
Runecats Helper
Runecats Helper

Number of posts : 802
Runecats Explorer Version : 1.7 Beta 4
Runecats Reputation : 5
Male Age : 23
Location : North Carolina
Registration date : 2008-05-11
Points : 1040

View user profile http://teamawkwardturtle.org

Back to top Go down

Re: CSS centering inline lists

Post by Support on Mon Feb 14 2011, 14:45

it's very very good, gunna be out of a job with my graphic design business before long!

......................................
avatar
Support
Admin
Admin

Number of posts : 5000
Roccat Version : 6.6 BETA
Runecats Explorer Version : 1.8 BETA
Runecats Reputation : 32
Location : Runecats HQ
Registration date : 2008-04-16
Points : 3095

View user profile http://runecats.com

Back to top Go down

Re: CSS centering inline lists

Post by AMV_Ph34r on Mon Feb 14 2011, 22:31

Lol, thanks Razz
Though I only did a bit of the graphics work. My friend made the background, I just touched it up, and did pretty much everything else XD
avatar
AMV_Ph34r
Runecats Helper
Runecats Helper

Number of posts : 802
Runecats Explorer Version : 1.7 Beta 4
Runecats Reputation : 5
Male Age : 23
Location : North Carolina
Registration date : 2008-05-11
Points : 1040

View user profile http://teamawkwardturtle.org

Back to top Go down

Re: CSS centering inline lists

Post by Support on Tue Feb 15 2011, 19:07

Yeah but graphic design also entails web design.

......................................
avatar
Support
Admin
Admin

Number of posts : 5000
Roccat Version : 6.6 BETA
Runecats Explorer Version : 1.8 BETA
Runecats Reputation : 32
Location : Runecats HQ
Registration date : 2008-04-16
Points : 3095

View user profile http://runecats.com

Back to top Go down

Re: CSS centering inline lists

Post by Sponsored content


Sponsored content


Back to top Go down

Page 1 of 2 1, 2  Next

View previous topic View next topic Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum