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 7 of 7

Thread: background bar

  1. #1
    Senior Coder rafiki's Avatar
    Join Date
    Aug 2006
    Location
    Floating around somewhere...
    Posts
    2,046
    Thanks
    19
    Thanked 42 Times in 42 Posts

    background bar

    http://www.jamiewest.org.uk/css/codingforums/new/
    below the white text in the left floating div would like the image http://www.jamiewest.org.uk/css/codi...ew/lef_bar.gif
    to show but its not i tried a <span> but don't want to resort to <img>
    code for the span

    Code:
    <span class="barbg"></span>
    css for span
    Code:
    .barbg{
    width:200px;
    left:25px;
    background-image:url(lef_bar.gif);
    }

  • #2
    Regular Coder FWDrew's Avatar
    Join Date
    Apr 2008
    Location
    Missouri
    Posts
    380
    Thanks
    38
    Thanked 45 Times in 43 Posts
    Hi Rafiki,

    Code:
    <div class="barbg">Hello Image!</div>
    Looks like you will probably need to reslice the image some, but the above will make it show because in your CSS you specfied:
    Code:
    .barbg
    Instead of:
    Code:
    span.barbg
    So either add the code at the very top or change your css to the code at the bottom and the image should appear

    Regards,

    Drew
    Dev-Tips.com || Employee at the Envato Network || My Portfolio

  • #3
    Senior Coder rafiki's Avatar
    Join Date
    Aug 2006
    Location
    Floating around somewhere...
    Posts
    2,046
    Thanks
    19
    Thanked 42 Times in 42 Posts
    Quote Originally Posted by FWDrew View Post

    Code:
    span.barbg
    That is now the code I'm attempting to use, unfortunatly it's still not showing the image, the image is just ment to be a seperator bar.
    Like so..

    content content content content|
    ____________________________|
    content content content content|
    content content content content|
    content content content content|
    ____________________________| underscores are the bars.

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,708
    Thanks
    0
    Thanked 237 Times in 232 Posts
    Hi there rafiki,

    the span element is an inline element and as such has no dimensions.
    This is the reason that the background image does not show.
    Try it like this instead...
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    .barbg {
        height:8px; 
        width:194px;
        margin-left:25px;
        background-image:url(http://www.jamiewest.org.uk/css/codingforums/new/lef_bar.gif);
        background-repeat:repeat-x;
    }
    </style>
    
    </head>
    <body>
    
    <div>
      content content content content<br>
      content content content content
    </div>
    
    <div class="barbg"></div>
    
    <div>
      content content content content<br>
      content content content content<br>
      content content content content
    </div>
    
    <div class="barbg"></div>
    
    </body>
    </html>
    
    
    
    
    
    coothead

  • Users who have thanked coothead for this post:

    rafiki (07-11-2008)

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    And if you have to display more blocks of text, an unordered list would be more semantic and easy. You could set a background image for the list items, with optional no-repeat center bottom values.
    Last edited by abduraooft; 07-11-2008 at 01:23 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    Senior Coder rafiki's Avatar
    Join Date
    Aug 2006
    Location
    Floating around somewhere...
    Posts
    2,046
    Thanks
    19
    Thanked 42 Times in 42 Posts

  • #7
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,708
    Thanks
    0
    Thanked 237 Times in 232 Posts
    No problem, you're very welcome.


  •  

    Posting Permissions

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