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

Moving the banner position

Discussion in 'Styling and Customization Questions' started by macara, Apr 25, 2012.

  1. macara

    macara Active Member

    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
     
  2. Chris D

    Chris D XenForo Developer Staff Member

    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
    {
    width468px;
    height60px;
    floatleft;
    padding25px 0px 0px 20px;
    }
     
    macara likes this.
  3. macara

    macara Active Member

    Many thanks.
     
  4. mrGTB

    mrGTB Well-Known Member

    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:


     
    Yorick likes this.
  5. macara

    macara Active Member

    Many thanks, but I still have a problem with the top.

    I need to make changes in the: EXTRA.CSS template

    Screen Shot 2012-04-26 at 6.47.46 PM.png
     
  6. mrGTB

    mrGTB Well-Known Member

    "margin-top" should have worked, I've put a banner there before myself. Are you putting it in the "ad-header" template.
     
  7. macara

    macara Active Member

    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.
     
  8. mrGTB

    mrGTB Well-Known Member

    Use this:


    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
     
  9. macara

    macara Active Member

    Yes, you are right, but I noticed that whatever I change nothing happens.
    Code:
    width: 468px;
    height: 60px;
    margin: 25px 0 0 20px
    padding: 4px;
     
  10. mrGTB

    mrGTB Well-Known Member

    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.


     
    macara likes this.
  11. macara

    macara Active Member

    Many thanks, its perfect. The last code was the right one.

     

Share This Page