Need Help With Positiong EZ Pages Bar - Please!

[Globie]

I am spending hours upon hours trying to figure out how to position the EZPages the way that I want.

I want the links/pages to look like they do here:

mycupcoffee.com.

The links are inside of the header/banner.

When I look at the CSS, it looks like I need to style this:

#navEZPagesTop {
background-color: #abbbd3;
background-image: url(../images/tile_back.gif);
font-size: 0.95em;
font-weight: bold;
margin: 0em;
padding: 0.5em;
}

But when I change the margins or padding the whole page moves. I only want the EZ pages to move. Can someone please help me!!!???


I am using the Classic Green Template

[gjh42]

A link to your site will make it easier for us to help you.
These are the rules that apply directly to MyCupCoffee's ez-page navbar container:

#navMain{
	/*border:1px solid green;*/
	margin-top:20px;
	margin-left:185px;
}
	
#navMain ul, #navSupp ul, #navCatTabs ul  {
	margin: 0;
	padding:  0.5em 0em;
	list-style-type: none;
	text-align: center;
	line-height: 1.5em;
}

#navMain ul li, #navSupp ul li, #navCatTabs ul li {
	display: inline;
}

#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
	text-decoration: none;
	padding: 0em 0.5em;
	margin: 0;
	color: #ffffff;
	white-space: nowrap;
	font-weight: bold;
}

But blindly applying those rules to your site may not work correctly, because many things interact to product a template layout.

[kobra]

They have moved navEZPagesTop inside of navMain and as gjh42 listed then used css to style it.

This move is accomplished in a copy of tpl_header.php

[Globie]

Thank you guys. I will try some of these things and post back.

[gjh42]

Note - you don't necessarily have to move divs around in your header; you can simply apply some or all of the CSS above to #navEZPagesTop etc. instead of #navMain etc. This depends on exactly what results you want. I presume you are not intending to copy the other site in every single detail.

Also, you probably don't want to style #navSupp ul, #navCatTabs ul the same way, so leave them out of your new code.

[Globie]

This is so annoying!! Why did the developers group all of these things together. I am pulling my hair out trying to figure out to position this thing.

[gjh42]

Un-grouping selectors is very simple - just copy the whole rule, and delete the desired selector from the original and all the other selectors from the copy.
Then change the copy as desired.

#navMain ul, #navSupp ul, #navCatTabs ul  {
	margin: 0;
	padding:  0.5em 0em;
	list-style-type: none;
	text-align: center;
	line-height: 1.5em;
}

#navSupp ul, #navCatTabs ul  {
	margin: 0;
	padding:  0.5em 0em;
	list-style-type: none;
	text-align: center;
	line-height: 1.5em;
}
#navMain ul  {
	margin: 1em;
	padding:  0.5em 0.7em;
	list-style-type: none;
	text-align: left;
	line-height: 2.0em;
}

I agree that there are many selector groups that would be better rearranged.