...

View Full Version : css banner with dynamic text



jonathanscary
07-15-2005, 11:25 PM
Hi

I'm trying to create a banner with text which needs to be dynamic. Problem I'm having is getting the text to align properly. When I change the margin to get the text in the right place, I'm also changing the size of the div. (The single pixel border illustrates the problem.)

I need to keep the 0870 number pretty much where it is, but also keep the banner to standard size of 468 x 60.

Is there a simple way around this - it's been driving me nuts!

http://www.numberstore.net/banners/ban_468_1_a.asp

body {
font-family: arial, verdana, arial, sans-serif;
font-size: 32px;
color: #FFF;
font-weight: bold;
}

#banner1 {
width: 468px;
height: 60px;
background-image: url(banner1.gif);
background-repeat: no-repeat;
border: 1px #000 solid;
}

#banner1 a {
width: 468px;
height: 60px;
display: block;
margin-left: 28px;
margin-top: 20px;
color: #FFF;
text-align:center;
}

#banner1 a:link {
text-decoration: none;
}

#banner1 a:visited {
text-decoration: none;
}

#banner1 a:hover {
color: #FC3;
text-decoration: none;
}


<div id="banner1"><a href="http://www.armchairanswercall.com"><%=session("number")%></a></div>

jonathanscary
07-15-2005, 11:27 PM
Please ignore - I've fixed it (I think), just need to check in IE.

_Aerospace_Eng_
07-15-2005, 11:28 PM
#banner1 {
width: 468px;
height: 60px;
background-image: url(banner1.gif);
background-repeat: no-repeat;
border: 1px solid #000;
}

#banner1 a {
height: 40px;
display: block;
padding-left: 28px;
padding-top: 20px;
color: #FFF;
text-align:center;
}
Give that a go. When an element is a block-level element it should expand to be 100% of its container. By removing the set width and adding padding-left the text should start 28px from the left and the div will still only be as wide as the #banner width. By adding padding-top, you now have to change the height since its 20px + 40px equal 60.

jonathanscary
07-15-2005, 11:37 PM
oops - no I haven't. it's wrong in firefox. I'm trying to get the result I've got in IE to work in FF (though the whole banner should be a hotspot, which it isn't, now I've got the text aligned where I want).

body {
font-family: arial, verdana, arial, sans-serif;
font-size: 32px;
color: #FFF;
font-weight: bold;
}

#banner1 {
width: 468px;
height: 60px;
background-image: url(banner1.gif);
background-repeat: no-repeat;
}

#banner1 a {
width: 412px;
height: 40px;
display: block;
margin-left: 56px;
margin-top: 20px;
color: #FFF;
text-align: center;
}

#banner1 a:link {
text-decoration: none;
}

#banner1 a:visited {
text-decoration: none;
}

#banner1 a:hover {
color: #FC3;
text-decoration: none;
}

jonathanscary
07-15-2005, 11:40 PM
Once again, fantastic Aerospace!! Wish there was somewhere I could buy you a virtual pint!!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum