Support » Themes and Templates » Square Banner in Top Left

  • Hi,

    A simple question which I cant’t quite figure out.

    I would like to place a 300×250 banner (or a 160×600 banner) in the top left of my blog.

    How can I do this in a way that it will run along side the blog without making the rest of the blog show up below the banner.

    Thanks in advance.

Viewing 11 replies - 1 through 11 (of 11 total)
  • That depends on the theme you are using. A link so we can see what you are trying to modify would help.


    I actually intend to do this with multiple sites.

    Would you suggest using divs? And how would this be structured?


    The reason I asked about the site is because I would try to adapt it to the current theme, so how you do it would be dependent on the theme structure. For example, if I were using the default theme I may start with something like this…

    This is just a rough draft, I only spend a couple minutes on it so of course it would take more styling, but it’s quite simple to remove the default header and place an image on the side of your theme. I just stripped out the sidebar content and placed the image there. If course, I could have left them and placed it on the other side.

    Just some thoughts…look at your theme and see how you can modify it to do what you want.

    i suggest you do it with the background of the body.. would look something like this:

    background-position: top left;

    if you wanted it to stay put while the remainder of the page scrolls:

    background-position:top left;
    background-attachment: fixed;
    background-repeat: no-repeat;

    I am kinda partial to fixed images on a background, it makes content pop more imHo.

    well, after looking at your example I see what your looking for… do the same to the content div. but dont fix it, let it scroll.

    Fixed ads? There is nothing I hate more. Like a commercial following when you switch channels.

    what does your opinion have to do with responding to this fella’s question wizard?

    Thanks for the response. So, to not have a fixed ad, how do I structure this? I am a beginner with editing, but I think I understand the basics.

    Do I start in the CSS?


    I spread my views wherever I can. If someday threecoves here will get a job to make a site with ads he will hopefully remember what I said about fixed ads and help make the internet slightly better. But enough of that.

    I take it you want some kind of ad placed to the top left, well what you would use is the float element. You say you are a beginner so I will do it very basic.

    I could do some precise code and say “paste this and it will work out”, but like the proverb goes… Give a man a fish and you feed him for a day; teach a man to fish and you feed him for a lifetime.


    <div id="wrap">
    	<div id="column1">
    		<img src="banner.jpg" alt="" border="0" />
    	<div id="column2">Main content</div>
    	<div id="column3">Sidebar</div>


    #wrap { overflow:hidden; }
    #column1 { width:160px; float:left; }
    #column2 { width:500px; float:left; }
    #column3 { width:250px; float:left; }

    VoilĂ .

    As a sidenote you shouldn’t make pages wider than 1000px since that will result in screens with 1024×768 have to scroll sideways, so there is a limit to how big banners you can have while still have room for content. Common sense may have to be applied.

    Where [i.e. in which file] is that HTML to be placed?

    I am currently using the Default Theme.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Square Banner in Top Left’ is closed to new replies.