Increasing with of just the top navigation bar

[ozjewels]

Hello,
First of all, thanks to everyone who posts here. From a complete noob i managed to turn my we site from Classis theme to what it is now. Its not complete thou.

www.ozjewels.com


I have some doubts. Fisrt, I cannot centre the logo? ANd the Ez page links.

ALso I would like to make the width of TOP NAVBAR to 100%. This is my reference I am using... http://livedemo00.template-help.com/...ain_page=index

Also how can we position banners on Index page?

Any help is much appreciated.

Regards,
Jay

[fairestcape]

Your URL points to a holding page for Justhosts.

[gjh42]

It works now.
To make the header full screen width while the rest stays at a smaller width, you would need to rearrange the #mainWrapper div tag so it starts after the #headerWrapper closing </div>. This makes the two independent.

Another way would be to make #mainWrapper 100% width (#headerWrapper would automatically follow it) and make #contentMainWrapper the smaller width you desire. You would need to do the same with the footer divs which are outside of #contentMainWrapper.


A note: your header is currently so tall that I can't see anything below it on my girlfriend's notebook without scrolling down. Remember that not everyone has big monitors. Your home page might reasonably focus on the header, but internal pages would better focus on displaying your products, with a modest-height header.

[SPH]

This looks like the place.

Today I re-discovered a project I began over a year ago with the Mostly Grey template:

http://www.prom-mart.com/demo-2/

I wanted to make the top and footer full-width and the body fixed width. I managed that, by the code copied below.

Now, how might I make the Home, Login...Horiz Cats...top EZpages...footer EZpages fixed to the body width, while leaving the top and bottom full width (so their background colors go full width)? In case that would look better.

Thanks for any input.


#####################################
#mainWrapper {
background-color: #222;
text-align: left;
width: 100%;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}
#headerWrapper {
}
#contentMainWrapper {
margin: auto;
width: 1010px;
}

#logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
margin: 0em;
padding: 0em;
}

#logoWrapper{
background-color: #E3E3E3;
text-align: center;
}

[SPH]

Or do people normally use bg images for what I want to accomplish?

[SPH]

I'll also study the Abbington Mega Menu template that I put on one of my sister's sites. It looks like what I'm trying to do; may have solution in its stylesheet.

[balihr]

This looks like the place.

It usually better to start your own thread than to pick up on a half-year old one...

Today I re-discovered a project I began over a year ago with the Mostly Grey template:

As I had said before, you should leave that template where you left it, buried in the past. But, you can learn from it and use it as a test ground, why not?

Now, how might I make the Home, Login...Horiz Cats...top EZpages...footer EZpages fixed to the body width, while leaving the top and bottom full width (so their background colors go full width)? In case that would look better.

You would need to nest another div element inside the parent div and get it centered. So, the parent element would be 100% width, and the child element would be XXX px centered.

In your case, you have #headerWrapper as your parent element and now you would need to add it's child element, ie. #headerWrapperInner. You would add

<div id="headerWrapperInner">

right after

<div id="headerWrapper">

in your tpl_header.php file. You would also need to close this new div element before the parent closes. Then, all you need to do is add this to your stylesheet.css

#headerWrapperInner {
	width:1010px;
	margin:0 auto;
}

Since you set #contentMainWrapper (basically, your main content area) to 1010px, I used the same value for header. margin line means that top and bottom margin is 0, while left and right margin is automatically determined (element gets centered).

You would do the same with #navCatTabsWrapper and #navCatTabs. The latter is already a child element so you'd just need to add

#navCatTabs {
	width:1010px;
	margin:0 auto;
}

to the stylesheet.

I know this might seem frightening at first, but it's actually not. It's really simple, the very basics of HTML/CSS. Once you get the hang of it, you'll see how simple it is...

[SPH]

Thanks, will try asap.