moving elements within a nav bar

[sgflowers]

I am trying to replicate the look of a 1.2.6 site in 1.3
I managed to create all the elements in a 2nd nav bar but they are positioned wrong

here is my 1.3 development site

http://sulserv.dyndns.org/sgf/

** it will take a while to come up **


here is the existing live

http://www.secretgardenflowers.com

1) how do i move the search form in the nav bar to the center
2) how do i center the new text link elements i created in navbar2 (ie all products etc) so that they are centered?
3) how to i have borders around the nav bars?

Thanks,

I have found the classes for the nav bars i just can't figure out what element to add or modify to drive this

- Kevin

[clydejones]

use border: 1px solid #000000; and text-align: center;

[sgflowers]

use border: 1px solid #000000; and text-align: center;

thanks but on what class

here are the classes i figured drive it

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {

margin: 0em;

background-color: #C00000;

font-weight: bold;

color: #ffffff;

height: 1%;

width: 100%;

}



#navMainWrapper2 {

margin: 0em;

background-color: #C00000;

font-weight: bold;

color: #ffffff;

height: 1%;

width: 100%;

}



#navMain ul, #navSupp ul, #navCatTabs ul {

margin: 0;

padding: 0.5em 0em;

list-style-type: none;

text-align: center;

line-height: 1.5em;

}

#navMain2 ul {

margin: 0;

padding: 0.5em 0em;

list-style-type: none;

text-align: center;

line-height: 1.5em;

}

#navMain ul li, #navMain2 ul li, #navSupp ul li, #navCatTabs ul li {

display: inline;

white-space: nowrap;

}



#navMain2 ul li {

display: inline;

white-space: nowrap;

}



#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {

text-decoration: none;

padding: 0em 0.5em;

margin: 0;

color: #ffffff;

}



#navMain2 ul li a {

text-decoration: none;

padding: 0em 0.5em;

margin: 0;

color: #ffffff;

}

[clydejones]

Add a new ID to the stylesheet

#navMain2 { border: 1px solid #000000; text-align: center;}
This should center everything in this Navbar.

looking at the search in the source it renders like this <div class="navMainSearch forward"> which aligns it to the right. You'll have to find the template file that handles this search form and remove the forward class. I'd then add the class
.navMainSearch {text-align: center;} to the stylesheet

thanks but on what class

here are the classes i figured drive it

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {

margin: 0em;

background-color: #C00000;

font-weight: bold;

color: #ffffff;

height: 1%;

width: 100%;

}



#navMainWrapper2 {

margin: 0em;

background-color: #C00000;

font-weight: bold;

color: #ffffff;

height: 1%;

width: 100%;

}



#navMain ul, #navSupp ul, #navCatTabs ul {

margin: 0;

padding: 0.5em 0em;

list-style-type: none;

text-align: center;

line-height: 1.5em;

}

#navMain2 ul {

margin: 0;

padding: 0.5em 0em;

list-style-type: none;

text-align: center;

line-height: 1.5em;

}

#navMain ul li, #navMain2 ul li, #navSupp ul li, #navCatTabs ul li {

display: inline;

white-space: nowrap;

}



#navMain2 ul li {

display: inline;

white-space: nowrap;

}



#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {

text-decoration: none;

padding: 0em 0.5em;

margin: 0;

color: #ffffff;

}



#navMain2 ul li a {

text-decoration: none;

padding: 0em 0.5em;

margin: 0;

color: #ffffff;

}

[clydejones]

I just noticed one other thing in the source:

<div id="navMain2">
<ul class="back"> this aligns everything to the left;

You'll need to remove the class="back" from the template file (tpl_header.php)

[sgflowers]

I just noticed one other thing in the source:

<div id="navMain2">
<ul class="back"> this aligns everything to the left;

You'll need to remove the class="back" from the template file (tpl_header.php)

thanks for all the help

no i know why my edits wern't taking!

[sgflowers]

ok i am getting there .... slowly

again:

here is original :

http://www.secretgardenflowers.com (1.2.6)

new site

http://sulserv.dyndns.org/sgf


css:

http://sulserv.dyndns.org/sgf/stylesheet.css.txt

tpl_header.php:

http://sulserv.dyndns.org/sgf/tpl_header.php.txt

I am still having problem postioning the text properly and getting a border around the 2 navbars any help would be appreciated

[seethrou]

A small suggestion, get some tools to help the works. Very easy to use and with visual help.

The link
Tools For Fast Find Items In Css


Good luck.

.

[sgflowers]

A small suggestion, get some tools to help the works. Very easy to use and with visual help.

The link
Tools For Fast Find Items In Css


Good luck.

.

i am using the firefox webdev extension
but i am having difficulty figuring out which class overides which

It seems like many of the inputs i am making have no effect

[sgflowers]

I am trying to replicate the look of a 1.2.6 site in 1.3
I managed to create all the elements in a 2nd nav bar but they are positioned wrong

here is my 1.3 development site

http://sulserv.dyndns.org/sgf/

** it will take a while to come up **


here is the existing live

http://www.secretgardenflowers.com

1) how do i move the search form in the nav bar to the center
2) how do i center the new text link elements i created in navbar2 (ie all products etc) so that they are centered?
3) how to i have borders around the nav bars?

Thanks,

I have found the classes for the nav bars i just can't figure out what element to add or modify to drive this

- Kevin

ok so i have most of it done

just the bars are way to big now

i can figure out how to reduce them in size

can anyone assist

here is current

tpl_header http://sulserv.dyndns.org/sgf/tpl_header.php.txt

css http://sulserv.dyndns.org/sgf/stylesheet.css.txt