menu over image in header « ThemeShaper Forums

ThemeShaper Forums » Thematic

[closed]

menu over image in header

(8 posts)

Started 3 years ago by r0ger
Latest reply from jrobben
This topic is resolved

Tags:

r0ger
Member

Hello

I'm having a hard time adjusting the heigth of my header (or the position of the menu) I've got an 940x180 image I want to use in the header in such a way that the menu overlaps the bottom of the image. By setting the height of #acces to 0 I can move the background color up to the level of the image, but I can't find the way to move the menu up also. Checkout http://reuver/net/joost to see what i mean.

Help would be much appreciated.

Posted 3 years ago #
r0ger
Member

Fixed it by putting the image in the #header background instead of the #branding background and adjusting the padding in #branding.

#branding {
text-indent:-9000px;
padding:10px 0 98px 0;
}

#header {
background:url(images/header.jpg) no-repeat scroll center top;
background-color:#90c820;}

Posted 3 years ago #
AbbyClaire
Member

Has anyone else found out how to do this? I tried this method and it doesn't work for me.

Posted 3 years ago #
AbbyClaire
Member

I've almost got it... I just need to figure my flush left alignment issue...

http://www.abigailtaylor.ca/design

#header {
background:url(images/header.jpg) no-repeat top center;
display:block;

width: 480px;
height: 275px;
}

#blog-title a {
display:block;
text-indent:-9000px;
width: 367px;
height: 233px;
}

Posted 3 years ago #
jrobben
Member

Abby,
I am not sure what is not working, your menu does overlap your logo image. If you are having a problem applying a background color to the header, your header width is only 480px instead of 960. you are also using the main thematic theme. You should be using a child theme.

Posted 3 years ago #
AbbyClaire
Member

Thanks, jrobben. My issue was with the left positioning of the header. The menu and header no longer aligns with the main content as it did before.

I transferred to a child theme, though I still have this issue.

Here is my revised code:
#header {
background:url(../thematic/images/header.jpg) no-repeat top center;
width: 480px;
height: 375px;
}

#blog-title a {
display:block;
text-indent:-9000px;
width: 367px;
height: 102px;
}

website: http://www.abigailtaylor.ca/design/

Any help you can offer would be much appreciated!

Thanks!

Posted 3 years ago #
AbbyClaire
Member

It seems adding an image to the header tag itself is creating a lot of issues.

Is there any way of having the menu overlap the header image by using another tag?

Posted 3 years ago #

jrobben
Member

it seems you have made some changes since your last post. But this seems to work.

#blog-title a {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(../thematic/images/header.jpg) no-repeat scroll left bottom;
display:block;
height:288px;
margin-bottom:-75px;
width:500px;

This is what I used to add 2 divisions to my header area

<?php  //Adding to the header section behind the branding section - good right align logo
function inserticon() {  //if page loads too slow change image file to billboard-RSS-150-single-2.png
?>
<div id="headericon"> 

</div>

<div id="rss-image">
<a href="http://feeds.feedburner.com/RAndROn-lineBusinessServices" target="_blank"><img class="rss-link" type="application/rss+xml" title="Get Our Articles by RSS" src="http://www.we-relax.com/web-elements/billboard-RSS-150-2.gif" alt="subscribe to RSS Feeds" border="none" /></a>

</div>

<?php
}
add_filter('thematic_header', 'inserticon',0);
?>

Posted 3 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.