Forums

how to change my header

Permalink
hi! can anyone tell me what to edit in my style.css file to get me logo infront of the header ? here is the pagehttp://arnegjonvik.com/

...a lot of trying but i cant seem to make it :(
 
gabrielpsms replied on at Permalink Reply
gabrielpsms
I don't know what exactly you want to do but, the piling order of sibling html elements is defined with the css-property "z-index:". The important part is "sibiling html elements"

Examples:

For
<style>
   #layer1 {z-index:2;}
   #layer2 {z-index:1;}
</style>


This will work.
<div>
   <div id="layer1"></div>
   <div id="layer2"></div>
</div>


This won't work.
<div id="layer1"></div>
<div>
   <div id="layer2"></div>
</div>


If you need a workaround for previous case, just remember: siblings
<style>
   #layer1 {z-index:2;}
   #layer2-wrap {z-index:1;}
</style>

<div id="layer1"></div>
<div id="layer2-wrap">
   <div id="layer2"></div>
</div>
gabrielpsms replied on at Permalink Reply
gabrielpsms
Did you manage to solve it?
sparken replied on at Permalink Reply
hi! just got home! i have to say im pretty new to this, but if u go into the page (arnegjonvik.com) i huess you know what i want for the logo in the left top. want it to go over the header also. I realy dont know if its possible with this theme or anything but i guess it will... i will look a bit at what you did write and see if it helps me anything :) are those codes in the style.css file within the theme file?


thx :)
arne
VidalThemes replied on at Permalink Reply
VidalThemes
Hi,

If you find this piece of code in your CSS, style.css, it should be on line 136
#logo h2 {
    color: #444444;
    font-size: 20px;
    font-style: normal;
    font-weight: normal;
}


and then add this to it:

position: relative;


so it looks like this:

#logo h2 {
    color: #444444;
    font-size: 20px;
    font-style: normal;
    font-weight: normal;
    position: relative;
}


That will then bring your h2 tag over the white bar, the only problem you have then is that your logo is a jpg, so its sides can be seen, I would suggest making that image a transparent PNG so it does not cover your text.

Regards

David