xoops forums

Anonymous

Posted on: 2012/7/22 19:35
Anonymous
Anonymous (Show more)
Posts: 0
Since:
#1

Header image conflicts with menu...

I am busy with a restyle of the Dutch nlxoops.nl xoops support site, but don't know how to solve this problem.

I enlarged the nlxoops logo and placed it so it partly covers the menu bar below the header. Problem is the header logo is kicking the menu to the right now. Any suggestions how to solve this?

The main page is showing the header logo as it is supposed to be. The news section shows the menu as where it should be (I use the module defacer...)

Mamba

Moderator
Posted on: 2012/7/22 21:01
Mamba
Mamba (Show more)
Moderator
Posts: 10792
Since: 2004/4/23
#2

Re: Header image conflicts with menu...

Looks nice!

Right now the image is pushing the menu to the right because it's oversized:

Resized Image

I never done it myself, but my understanding is that you could do overlapping with z-index
Support XOOPS => DONATE
Use 2.5.10 | Docs | Modules | Bugs

Anonymous

Posted on: 2012/7/22 21:26
Anonymous
Anonymous (Show more)
Posts: 0
Since:
#3

Re: Header image conflicts with menu...

Thanks Mamba, this could be a solution. I'll try it later on this week, it looks like a puzzle

playsome

Not too shy to talk
Posted on: 2012/7/23 13:56
playsome
playsome (Show more)
Not too shy to talk
Posts: 197
Since: 2009/4/15
#4

Re: Header image conflicts with menu...

Hi Flipse,

is this the effect your trying to achieve?

Resized Image


I had a mess about with it in firebug to achive the overlapping effect. Mamba is correct you need z-index but remember an elevement(div) needs to be positioned relative or abosolute for z-index to work.

heres the code:

.site_title {
    
floatleft;
    
margin23px 0 0;
    
positionrelative;
    
z-index1;
}


#xo-globalnav {
    
clearleft;
    
floatleft;
    
left0;
    
margin-top: -10px;
    
padding0;
    
positionrelative;
    
top0;
}


That should give the desired effect, you will probably need to tidy a couple of other things up, apart from that you hsould be good to go.

Anonymous

Posted on: 2012/7/23 15:42
Anonymous
Anonymous (Show more)
Posts: 0
Since:
#5

Re: Header image conflicts with menu...

This is awesome playsome, your code works like a charm

I want to dive some more in the z-index matter, as it gives me nice new options!