A friend of mine was asking me how to build a banner resembling AdSense and place whatever text he wants in there. This procedure involves HTML and CSS. Let’s take a look:
The values highlighted in green can be changed accordingly:
- width: 468px is the standard size;
- border: thickness style [solid|dotted|dashed] color [#XXXXXX]
- -moz-border-radius: 4 to 12 px, as you wish (Mozilla Firefox only!)
- padding: the distance from the border to the actual content
- text-align: [left|center|right|justify]
- vertical-align: no use, just for IE compliance
- font-size, font-family and color: as you wish, according to the site’s theme
what if u wanna include a picture in the same text banner? how do u set the location of the picture?
how do u set a link from your picture
I think this will be very useful for some people. I know a lot of people who use free websites to create information sites etc and sometimes just something little like this can really take effect, I’ll be pointing some people over in this direction I’m sure!
An image could be placed inside the div banner with the following line:
<img src="/text_banner_tutorial/image.jpg" style="float:left" /> or
<img src="/text_banner_tutorial/image.jpg" style="float:right" /> or with link
<a href="http://www.something.com"><img src="/text_banner_tutorial/image.jpg" style="float:left" /></a>
The image can thus be positioned only on the left or on the right.
Pretty good tip for people who want to advertise their banners by themselves..
this is great I’m fun of making some banner design. I’m looking forward to read more articles like this.