By sv3n@www.newsfrombabylon.com on

I am a CSS novice unfortunately. I'm trying to figure out how to center the primary links in the garland theme, instead of having them be right justified. I've been hacking away, guessing at which section controls the positioning of the primary links.

I figure I probably just need to add something like:

margin: auto auto;

to some CSS section, but I can't figure out which one because I sux

can anyone please point me in the right direction?

thanks for any help you might be able to offer

⋅ Categories: Drupal 5.x

Comments

Rowanw’s picture

Rowanw commented

Find this:

ul.links li, ul.inline li {
  background-image: none;
  margin-left: 0pt;
  margin-right: 0pt;
  padding-left: 0pt;
  padding-right: 1em;
}

And replace with:

#header ul.links li, ul.inline li {
  background-image: none;
  margin-left: 0pt;
  margin-right: 0pt;
  padding-left: 0pt;
  padding-right: 0em;
}

Then find this:

ul.primary-links {
float: right;
margin: 0pt;
padding: 0pt;
position: relative;
z-index: 4;
}

And replace with:

#header ul.primary-links {
float: none;
margin: 0pt;
padding: 0pt;
position: relative;
text-align: center;
z-index: 4;
}

Edit: You will also need to remove display:block from the links.

Find:

ul.primary-links a {
background: transparent url(images/bg-navigation-item.png) no-repeat scroll 50% 0pt;
color: #FFFFFF;
display: block;
margin: 0pt 1em;
padding: 0.75em 0pt 0pt;
}

And replace with:

ul.primary-links a {
background: transparent url(images/bg-navigation-item.png) no-repeat scroll 50% 0pt;
color: #FFFFFF;
margin: 0pt 1em;
padding: 0.3em 0pt 0pt;
}
sv3n@www.newsfrombabylon.com’s picture

sv3n@www.newsfrombabylon.com commented

Thanks for your help

It's not working for me though - your original code seems a bit different from what I'm seeing. For instance I don't have a "ul.primary-links a" section

I'm starting with the default garland that comes with drupal 5.1. And when I attempt to make the changes you suggest, the menu doesn't become centered, it becomes aligned to the left side instead of the right.

Jeremy Toaster’s picture

Jeremy Toaster commented 
/**
 * Primary navigation
 */
ul.primary-links {
  margin: 0;
  padding: 0;
  float: none; /* LTR */
  position: relative;
  text-align: center;
  z-index: 4;
}

ul.primary-links li {
  margin: 0;
  padding: 0;
  float: none; /* LTR */
  background-image: none;
}

ul.primary-links li a, ul.primary-links li a:link, ul.primary-links li a:visited {
  margin: 0 1em;
  padding: .75em 0 0;
  color: #ffffff;
  background: transparent url(bg-navigation-item.png) no-repeat 50% 0;
}

ul.primary-links li a:hover, ul.primary-links li a.active {
  color: #ffffff;
  background: transparent url(bg-navigation-item-hover.png) no-repeat 50% 0;
}