• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Moving the banner position

macara

Active member
#1
Hello,

Can you please help me to move the position of the banner more to the left and dawn.
Please see the picture.
Screen Shot 2012-04-25 at 7.09.45 PM.png
The code that I used: logo_block
PHP:
<div>
<embed width="468" height="60" src="http://www.macarabia.net/greener.swf"/>
</div>
Thank you for your cooperation
 

Chris D

XenForo developer
Staff member
#2
Change this from:

PHP:
<div>
<embed width="468" height="60" src="http://www.macarabia.net/greener.swf"/>
</div>
to:

PHP:
<div>
<embed width="468" height="60" src="http://www.macarabia.net/greener.swf" style="float: left; padding-top: 20px;" />
</div>
You probably should assign it a class in CSS instead, though. That would look like this:


PHP:
<div>
<embed class="banner" src="http://www.macarabia.net/greener.swf" />
</div>
Then add to EXTRA.CSS template:

PHP:
.banner
{
width: 468px;
height: 60px;
float: left;
padding: 25px 0px 0px 20px;
}
 

mrGTB

Well-known member
#4
I would use margin instead of padding myself, padding can then be reserved for use with the banner itself if deciding later to put a border around it, creating some padding space between the border and the banner, also allowing you to use background colour showing through the padding space.

margin: 25px 0 0 20px;

Exaple below:


.banner {
float: left;
display: inline-block (might be needed, might not to make border look correct in all browsers, especially IE)
width: 468px;
height: 60px;
background: #fff;
border: 1px solid #000;
margin: 25px 0 0 20px
padding: 4px;
}
 

mrGTB

Well-known member
#6
"margin-top" should have worked, I've put a banner there before myself. Are you putting it in the "ad-header" template.
 

macara

Active member
#7
Thats what I have in the "ad-header":
Code:
<xen:hook name="ad_header" />
 
<div>
<embed class="banner" src="http://www.macarabia.net/greener-wl.swf" />
</div>

and thats what I have in the EXTRA.CSS template:
Code:
margin: 25px 0 0 20px
Can you please help to change it.
 

mrGTB

Well-known member
#8
Use this:


<div class="banner">
your code, which should not include the CSS class
</div>
But I see your trying to embed a SWF file, not an AdSense JavaScript advert. So I'm not sure what you'd use for your code, or even if you could do away with the DIV altogether and just include the CSS in the Embed code only to position it without the need for DIV's.

If it doesn't work without DIV's, having the CSS Class in the Embed that is. Then remove it from the Embed and instead try the first one I said putting the CSS Class in the DIV.

Also, I don't understand why your only using that one "margin" css code in Extra.css, why are you not floating the banner left or right and then using margin to position it. You'll most likely need to use float with a DIV in that header area, otherwise it will cause another DIV to drop down below it, such as a the LOGO which I'm pretty sure uses it's own DIV. There's also a chance you may have to use "display: inline-block", but test without it first in css
 

mrGTB

Well-known member
#10
Did you mean your trying to position it without DIV's added. Your just putting the CSS Class in the Embed code and using only that (no div's)?

If yes? Try this in Extra.css

Code:
.banner {
float: left; (it looks to me like the banner is on left-side, not right-side using Ababic layout)
margin: 25px 0 0 20px;
}
If that doesn't work, throw "display: inline-block" in there

Code:
.banner {
float: left; (looks to me like the banner is on left-side, not right-side using Ababic layout)
display: inline-block;
margin: 25px 0 0 20px;
}
"Height and Width" may not be needed, that used more for when adding borders and padding around banner to get spacing looking right in IE using javascript. But you could also try this anyway.

Code:
.banner {
float: left; (looks to me like the banner is on left-side, not right-side using Ababic layout)
display: inline-block;
width: 460px;
height: 60px;
margin: 25px 0 0 20px;
}
If none of them work above using (just the Embed code without DIV's wrapped around it). Remove the CSS Class from the Embed code and wrap a DIV around it testing the same css examples shown above.


<div class="banner">
Embed code without css class included
</div>