CSS Dropdown menu for the header- With Categories!

I'm not sure about 'transparency' but I'm sure you could make the background the of the menu the same colour as the header image.

You could then move the positioning of the menu up by inserting something like:
top: -30px;

under:
position:relative;

Craig

CES:

I'm not sure about 'transparency' but I'm sure you could make the background the of the menu the same colour as the header image.

You could then move the positioning of the menu up by inserting something like:
top: -30px;

under:
position:relative;

Craig

Thanks for that it has moved nicely into the header but now there is a gap of where the css header use to be how can i get rid of this?

Sorry about that.

Not sure.

You could try looking here for help:
http://www.w3schools.com/css/

CES:

Sorry about that.

Not sure.

You could try looking here for help:
http://www.w3schools.com/css/

No problem! thanks for your help

Btw do you know how i can center the drop down ? Atm they are to the left?

div#dropMenu ul

text-align:center;

CES:

div#dropMenu ul

text-align:center;

That didnt seem to do anything to the drop dow box instead i just decreased the width until it was inline.

THnaks

Does anyone know how i can remove the gap that is shown in the attatched picture?

Update on above issue:

I have been playing around with the box layout in the style sheet and just couldnt get the sideboxes to align correctly although i could get the center column after a few hours i gave up on that. I moved on to the header menu stylesheet and started playing around on this one and finally got a little closer to what im trying to do.....

Here is what i have come up with:

Internet Explorer Works with this code but mozilla does not:

div#dropMenu {
	width:90%;
	margin-left:45px;
        margin-bottom:-30px;
        margin-top:0px;
    text-align:center;
	z-index:1000;
        position:relative;
        top:-30px;
        
	}

Mozilla works with this code but ie does not:

div#dropMenu {
	width:90%;
	margin-left:45px;
        margin-bottom:-30px;
        margin-top:0px;
    text-align:center;
	z-index:1000;
        position:relative;
        
	}

Does anyone have a solution?

I have attached some pics and link is: https://www.truwater.com.au

Thanks

Perhaps a couple of things to play with are:

position:absolute; in the css

or try putting the:

higher up the header.php and position it lower using the css.

Craig

CES:

Perhaps a couple of things to play with are:

position:absolute; in the css

or try putting the:

<!--bof-drop down menu display--> <?php require($template->get_template_dir('tpl_drop_menu.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_drop_menu.php');?> <!--eof-drop down menu display-->

higher up the header.php and position it lower using the css.

Craig

Ok i used the absolute positioning and i seemed to have got it right! Thanks (please check)

The height looks good but the horizontal left margin looks a bit wonky now.

:)

CES:

The height looks good but the horizontal left margin looks a bit wonky now.

:)

What do you mean a little wonky?

Like this.

CES:

Like this.

I have tested it in firefox and ie 7 on a vista machine and its not doing that!

Can you please advise what machine you are using so i can fix it?

I noticed it did that on safari on my iphone but not on my desktop :S Anyone else showing that issue when going to my site?

And if anyone can test my site in firefox on a linux machine as im at work and i found that half my site was not working links were unclickable i am running latest ubunutu and firefix

It seems i am having an issue as stated above with the css header going all wack when the screen is resized to about 800x600 resolution. It moves the menu to the right (see attached pic) and also pic above from CES .

Here is my current css:

div#dropMenu {
	width:auto;
	margin:0px;
    text-align:center;
	z-index:1000;
        position:absolute;
        top:198px;
        bottom:300px;
        left:200px;
        right:0px;
         width:865px;

Anyone know why its moving to the right on smaller screen and also when you resize the screen?

gee38l:

It seems i am having an issue as stated above with the css header going all wack when the screen is resized to about 800x600 resolution. It moves the menu to the right (see attached pic) and also pic above from CES .

Here is my current css:

div#dropMenu {
width:auto;
margin:0px;
text-align:center;
z-index:1000;
position:absolute;
top:198px;
bottom:300px;
left:200px;
right:0px;
width:865px;

> 
> Anyone know why its moving to the right on smaller screen and also when you resize the screen?

UPDATE to the above issue!

I followed another post above that reccommended i move the code up a bit and then lower it, i did that and it seems to be working (please test) in ie7 and mozilla but not safari!
(Attached pic of safari)

Here is my new code:

```html
div#dropMenu {
	width:865px;
	margin-top:-30px;
       margin-left:50px;
    text-align:center;
	z-index:1000;
        position:relative;
        
	}

Can anyone assist in fixing the safari issue?

Thanks

Looks good to me in ie8 beta / firefox on a windows xp machine.

CES:

Looks good to me in ie8 beta / firefox on a windows xp machine.

Do you know what the safari issue could be?
Posted via Mobile Device

Sorry, no.

CES:

Sorry, no.

I got the safari issue sorted raised the position in tpl_header and it fixed it :)

Also got a question in regards to the css header menu, On the shopping cart menu i have on the right side can anyone advise how i would go about adding a small number that only shows with the number of items you have in the cart? So say i have 1 item in my cart, it then shows 1 on the top right corner?

Thanks