please help me create a text banner.

munnar · June 19, 2009

I want to create a text banner for my home page. Please could you advise me how to create a banner.

My website is www.vidurreddy.com and text for the banner is:

VIDUR REDDY

Thanks

Allen · June 20, 2009

munnar wrote:

I want to create a text banner for my home page. Please could you advise me how to create a banner.

My website is www.vidurreddy.com and text for the banner is:

VIDUR REDDY

Thanks

EDIT: See my next post for another method that I think will look better.

Add this to the header on the advanced site-wide customization page above the nav html.

<div id="my_banner"></div>

Change this in your CSS to look like this.

#my_banner {
width: 500px;
height: 100px;
margin: 0 auto -25px 20px; /* top right bottom left */
background: url(/photos/568572872_sHGdq-O.jpg) no-repeat;
}

The photo would look better if the was a transparent png.

Allen · June 20, 2009

munnar wrote:

...

Change your header html to this.

<div id="myHeader">

   <div id="my_banner"></div>

   <div id="navcontainer">
      <ul>
          <li><a href="/">Home</a></li>
          <li><a href="/galleries">Galleries</a></li>
          <li><a href="/gallery/XXXXXXX_YYYYY">About Me</a></li>
      </ul>
   </div>

</div>  <!-- closes myHeader div -->

Remove this from your CSS

#my_banner {
width: 500px;
height: 100px;
margin: 0 auto;
background: url(http://vidur.smugmug.com/photos/568572872_sHGdq-O.jpg) no-repeat;
}

and add this in its place

#myHeader {
    margin: 0 0 15px; /* top right/left bottom*/
    height: 100px;
    background: #000;
    padding: 0 20px;
}

#my_banner {
    flost: left;
    width: 500px;
    height: 100px;
    margin: 0;
    background: url(/photos/568572872_sHGdq-O.jpg) no-repeat;
}

#navcontainer {
    float: right;
    margin: -30px 0 0; /* top right/left bottom */
}

please help me create a text banner.

Comments