Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Jun 2005
    Posts
    54
    Thanks
    0
    Thanked 0 Times in 0 Posts

    css banner with dynamic text

    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>

  • #2
    New Coder
    Join Date
    Jun 2005
    Posts
    54
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Please ignore - I've fixed it (I think), just need to check in IE.

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Code:
    #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.

  • #4
    New Coder
    Join Date
    Jun 2005
    Posts
    54
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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;
    }

  • #5
    New Coder
    Join Date
    Jun 2005
    Posts
    54
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Once again, fantastic Aerospace!! Wish there was somewhere I could buy you a virtual pint!!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •