Hello everyone.

 

I'm sure this one is simple but...

 

I have <div> positioned some text over an image which is just below a dropdown menu. The menu drops down behind the <div> positioned text, so the text covers some of the sub links and looks messy, but also closers the menu when you run your mouse over it.

 

Is there some simple code to add to the <div> to make the text sit behind the menu when it pops up, The code for the text is:

 

<DIV STYLE="position:absolute; top:310px; left:128px; width:170px; height:25px">

<CENTER><FONT SIZE="2" COLOR="000000"><B>LATEST NEWS<B></FONT></CENTER>

</DIV>

 

The link is http://test.utuze.com

 

Thanks everyone.

I think the reason for your problem is your coding method. You have an external stylesheet for your menu, which is included in your page header. Then you have included the style declarations for each element inline with your HTML. Because your browser reads your document from top to bottom, it is reading the menu style first, then the page style, and the page style is being given priority.

There are 2 ways you can fix this. 1 is to use z-index - <<< see tutorial here.

But the best solution IMO would be to separate your content from your style. Put all your CSS into separate files, and have your HTML document simply pull in the content.

You will find it makes it much easier to keep track of your work this way, plus, if you need to change a style, you can change it globally by simply editing the CSS file, rather than editing each page.

I think the reason for your problem is your coding method. You have an external stylesheet for your menu, which is included in your page header. Then you have included the style declarations for each element inline with your HTML. Because your browser reads your document from top to bottom, it is reading the menu style first, then the page style, and the page style is being given priority.

There are 2 ways you can fix this. 1 is to use z-index - <<< see tutorial here.

But the best solution IMO would be to separate your content from your style. Put all your CSS into separate files, and have your HTML document simply pull in the content.

You will find it makes it much easier to keep track of your work this way, plus, if you need to change a style, you can change it globally by simply editing the CSS file, rather than editing each page.

 

Thanks mate

 

I have put the "Latest News" part in its own file and called it in, but no change, so I did the zindex thing (within the "latest news" included file) and can only get the text to stack according to the image behind it, so the text still appears infront of the dropdown.

 

Any ideas?

Try adding a z-index to #p7menubar li ul that is a higher value than the z-index on the div with the Latest News heading

Try adding a z-index to #p7menubar li ul that is a higher value than the z-index on the div with the Latest News heading

 

Yes I thought about that, but I thought I read somewhere that the zindex only works on items positioned absolutely, which the menubar is not.

 

But now you have suggested, i will try that and post back.

 

Thanks bud.

Yes I thought about that, but I thought I read somewhere that the zindex only works on items positioned absolutely, which the menubar is not.

 

But now you have suggested, i will try that and post back.

 

Thanks bud.

Looking at your css, #p7menubar li ul was positioned absolutely.

 

It's how your dropdown works.

No, can't sem to get it to work

Looking at your css, #p7menubar li ul was positioned absolutely.

 

It's how your dropdown works.

 

Sorry Bro. You are right, it was positioned abs, but I was putting the same zindex value as the text, like a silly bottom. But I put a higher value in and it sure does work.

 

Thanks kid, thas a star.

You're welcome!

Glad you got it sorted.