[hilmil]

hilmil

#8564

Hi,

I use the Graphene Container Before action hook with

<div class="top_banner_ads">

<div class="top_banner_ad_left">

and

<div class="top_banner_ad_right">

I had the correct custom css code which placed my 2 ads neatly above the site header with one banner left and the other right; but the other day, when experimenting with different sidebars, the CSS disappeared from my Custom CSS box. Now both banners are stacked over the left background.

My site is http://ecigarettenews.net

Can you tell me what css code to enter to get the banners back in one line above the header?

Thanks!

Hillary

[Anonymous]

Anonymous

#41468

.top_banner_ad_right {

float: right;

margin-right: 174px;

}

.top_banner_ad_left {

float: left;

margin-left: 174px;

}

Put code in between backtick (

Code:

`

) characters here. It’s usually located above the Tab key on your keyboard.

[hilmil]

hilmil

#41469

Thanks! That code got me started 🙂

I just had to play with the margin px’s and added a margin-top: 5px;

Now it’s perfect and back to where it should be.

Hillary

[hilmil]

hilmil

#41470

Hi Prasanna,

I’m back as I noticed a slight problem with my above header banners. Their positions don’t stick “flush” right and left above the header. if I change the size of my browser screen, they move with it. If I make the browers narrower, they stack. Any suggestions?

Thanks again!

[Kenneth John Odle]

Kenneth John Odle

#41471

Quote:

if I change the size of my browser screen, they move with it. If I make the browers narrower, they stack.

This is the nature of the float property: items float with the container that they are in. It’s possible (probable, even) that they were doing this before, but you didn’t notice. There’s no real way around that aspect of it, afaik.

The real problem is not when the browser window is too narrow, but when it’s too wide, because the ads will float outside the width defined by the main container.

The solution here is to make the #graphene-dynamic-widget-graphene_container_before widget the size you need, and then position the ad widgets relative to that:

#graphene-dynamic-widget-graphene_container_before {

margin-left: auto;

margin-right: auto;

width: 1000px;

}



.top_banner_ad_left {

float: left;

left: 0;

position: relative;

top: 5px;

}



.top_banner_ad_right {

float: right;

position: relative;

right: 0;

top: 5px;

}



#container {

margin-top: 10px;

}

I’ve also added a bit of margin to #container to provide a bit of room for the ad widgets.

This works in Firebug, but I haven’t tested it on a live site.

[hilmil]

hilmil

#41472

Yes that did the trick! Thanks Kenneth and have a Merry Christmas!

Hillary

[Kenneth John Odle]

Kenneth John Odle

#41473

Cheers!