moving elements within a nav bar

[clydejones]

You might want to change the height from 1% to say 30px:

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
	margin: 0em;
	background-color: #C00000;
	font-weight: bold;
	color: #ffffff;
	height: 30px;
	width: 100%;
  border: 1px solid #9a9a9a
}

#navMain2Wrapper {
	margin: 0em;
	background-color: #C00000;
	font-weight: bold;
	color: #ffffff;
	height: 30px;
	width: 100%;
  border: 1px solid #9a9a9a
}

Try it and see how it works.

[sgflowers]

You might want to change the height from 1% to say 30px:

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
	margin: 0em;
	background-color: #C00000;
	font-weight: bold;
	color: #ffffff;
	height: 30px;
	width: 100%;
  border: 1px solid #9a9a9a
}

#navMain2Wrapper {
	margin: 0em;
	background-color: #C00000;
	font-weight: bold;
	color: #ffffff;
	height: 30px;
	width: 100%;
  border: 1px solid #9a9a9a
}

Try it and see how it works.

damn this is hard to figure out

i reduced it to 20px but then the text moves off the bar into the other bar
what the he** is going on

ahhhhhhhhh

ok i'm allright



can anyone look at the 2 files at tell me what to edit to mimic

the original site - i need to fix the size of the navbars and reposition the text vertically

[clydejones]

Here's my CSS for the top navbars:

#navMainWrapper {margin: 0em; padding: 0 0 2px 0; border-bottom: 1px solid #66006B; background-color: #c459aa; font-weight: bold; height: 20px; width: 100%;}
#navMain  {margin: 0; padding: 3px 0 0 10px; list-style-type: none; text-align: center;	color: #580C84;}

#navMainWrapper2 {margin: 0em; padding: 0 0 2px 0; text-align: center; border-bottom: 1px solid #66006B; background-color: #c459aa; font-weight: bold; height: 20px; width: 100%;}
#navMain2  {margin: 0; padding: 3px 0 0 10px; list-style-type: none; text-align: center;	color: #fff;}

take a look here for a demo

[sgflowers]

Here's my CSS for the top navbars:

#navMainWrapper {margin: 0em; padding: 0 0 2px 0; border-bottom: 1px solid #66006B; background-color: #c459aa; font-weight: bold; height: 20px; width: 100%;}
#navMain  {margin: 0; padding: 3px 0 0 10px; list-style-type: none; text-align: center;	color: #580C84;}

#navMainWrapper2 {margin: 0em; padding: 0 0 2px 0; text-align: center; border-bottom: 1px solid #66006B; background-color: #c459aa; font-weight: bold; height: 20px; width: 100%;}
#navMain2  {margin: 0; padding: 3px 0 0 10px; list-style-type: none; text-align: center;	color: #fff;}

take a look here for a demo

bloody hell i really messed it up now

is the tpl header causing it??

any help would be appreciated

i attached latest tpl_header & stylesheet

[sgflowers]

ok i corrected some of the css

but now the text for one of the navbars is not staying in the bar

any ideas??

again reattached

here is site i am working on:

http://sulserv.dyndns.org/sgf

[clydejones]

You included tpl_box_header.php in the zip file and not tpl_header.php

I've included my tpl_header.php and the navbar portion of my css in the attached.

My changes in tpl_header.php are in red.

Attachment 57

[sgflowers]

You included tpl_box_header.php in the zip file and not tpl_header.php

I've included my tpl_header.php and the navbar portion of my css in the attached.

My changes in tpl_header.php are in red.

Attachment 57

sorry here it is attached

i don't know if my issues are steming from centering the search box in the one nav bar

if you could take a quick look - again thanks for all your help

[clydejones]

You have two instances of #navMainWrapper in your CSS that may be causing the problem: remove the one in red. hope it works

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
	margin: 0em;
	background-color: #C00000;
	font-weight: bold;
	color: #ffffff;
	height: 1%;
	width: 100%;
	}
#navMainWrapper {
	margin: 0em;
	background-color: #C00000;
	font-weight: bold;
    padding: 0 0 2px 0;
    border-bottom: 1px
	color: #ffffff;
	height: 20px;
	width: 100%;
    border: 1px solid #9a9a9a
}

[sgflowers]

You have two instances of #navMainWrapper in your CSS that may be causing the problem: remove the one in red. hope it works

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
	margin: 0em;
	background-color: #C00000;
	font-weight: bold;
	color: #ffffff;
	height: 1%;
	width: 100%;
	}
#navMainWrapper {
	margin: 0em;
	background-color: #C00000;
	font-weight: bold;
    padding: 0 0 2px 0;
    border-bottom: 1px
	color: #ffffff;
	height: 20px;
	width: 100%;
    border: 1px solid #9a9a9a
}

ok i fixed that but it didn't really change anything
the spacing is messed up in IE & firefox - but in different ways

i attached latest tpl_header & stylesheet.css

if you have a chance to look thanks again

[clydejones]

I found this in your tpl_header.php

<!--eof-branding display-->
<!--bof-navigation2 display-->
<div id="navMain2Wrapper">
<div id="navMain2">
    <ul class="center"> 
<!--    <li><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo HEADER_TITLE_CATALOG; ?></a></li> -->

Try removing the red highlighted portion of the code and see if that helps.
You've already defined a text-align: center in navMain2 so you shouldn't need it here.