Wordpress Themes - WP Forum at BFA - [SOLVED] Banner to overlap Header image

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Header configuration & styling (http://forum.bytesforall.com/forumdisplay.php?f=15)

- - [SOLVED] Banner to overlap Header image (http://forum.bytesforall.com/showthread.php?t=15587)

adrian29630

Oct 6, 2011 05:45 PM

[SOLVED] Banner to overlap Header image

I am working on a website http://gocabrera.com and am trying to position a banner at the top of the page. Currently it is 486 x 60 inside a widget but we would prefer to have it at 720 x 120. Placing this above the header image drives the header too low and creates a large blank space which does not look good. The solution would seem to be to find a way to place the banner or widget partially over the header image but I have no idea if this is possible or how it could be accomplished.

You can see what I mean from the following images:-
http://gocabrera.com/wp-content/uplo...ra-current.png
http://gocabrera.com/wp-content/uplo...dplacement.jpg

I am using the most up to date versions of WordPress and Atahualpa.

Any suggestions will be greatly appreciated.

Thanks

Adrian

lmilesw

Oct 6, 2011 06:26 PM

One way would be to put the following in CSS Inserts

HTML Code:

#ws_widget__ad_codes-3 {

    position: relative;

    top: 50px;

    z-index: 99;

    height: 0;

}

I just used Firebug to find the selector and applied the necessary CSS.

adrian29630

Oct 7, 2011 08:45 PM

Hi. Thank you for such a quick response. Unfortunately I think I have done something which stops this working. I was originally using Ad codes widget but due to it's limited facilities I switched to using AdRotate. I tried changing the word ad_codes to adrotate but it had no effect and now the advert is appearing in the top left of the page rather than in the center where it was before. If you can possibly provide a solution I would be very appreciative.

Thanks
Adrian

lmilesw

Oct 7, 2011 09:18 PM

So you just get the new selector and modify the CSS a bit. Below is a suggestion for a new code but as you can see learning to use Firebug and CSS is important for website work.

HTML Code:

#adrotate_widgets-3 {

    position: relative;

    top: 60px;

    z-index: 99;

    height: 0;

    left: 400px;

}

adrian29630

Oct 7, 2011 09:31 PM

Thank you so much. You are an absolute gem. You are also correct about Firebug and CSS. CSS I can work with up to a point but Firebug is still something of a mystery. Although I generally use Firefox for web work I need to spend some time discovering all that Firebug can do. Finding the time is the problem!

All times are GMT -6. The time now is 09:42 AM.