SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image to css form please

    Hi guys, ive hear some suggestions that my layout in the middle has images as the title bars. It takes a while to load up for slow users. Heres what im talking about, on my site, Sports NightCap, you can see what im saying. I basically want this image http://www.njrocket8.profusehost.net.../howardbar.gif to be used through css so its not really an image anymore but just a css style design. But i want it to look exactly like the image bar. Any way to do this?

  2. #2
    Worship the Krome kromey's Avatar
    Join Date
    Sep 2006
    Location
    Fairbanks, AK
    Posts
    1,621
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Step 1:
    Chop your bar image into two pieces: the first piece should be just the leftmost part of the bar, the part that has the curve in the top left corner. We'll call this bar_left.gif. The second piece should be a 1 pixel-wide cut of the gradient you used on your bar. We'll call this bar_bg.gif

    Step 2:
    Write your CSS class. It would look something like this:
    Code:
    .bar {
         background-image: url("images/bar_bg.gif");
         background-repeat: repeat-x;
         width: 100%;
    }
    You could add some attributes to style your text (in fact, I strongly recommend you do), but that's the easy part, so I'll let you do that.

    Step 3:
    Write your HTML. It would look something like this:
    Code:
    <div class="bar">
    <img src="images/bar_left.gif" alt="" />Kromey: World's Best Athlete?
    </div>
    This should at least get you on your way. Not the easiest thing in the world to do, but now your users only have 2 small images to download (I'd guesstimate less than 2K combined) instead of one big one for each headline.

  3. #3
    SitePoint Enthusiast Northern Star's Avatar
    Join Date
    Aug 2006
    Location
    Cheshire, UK
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    An even better way of doing things would be to mark up your heading tagswould to mark up your headings tags.

    Using kromey's image's you could do something like...

    Code:
    h1 {
         width: 100%;
         height: 25px;
         background: url("images/bar_bg.gif") repeat-x 0 0;
    
    }
    h1 span {
         background: url("images/bar_left.gif) no-repeat 0 0;
         padding-left: 10px;
    
    }


    HTML Code:
    <h1><span>Sports Nightcap</span></h1>

    You'll need to mess about with the padding of both the span tag and the heading tag to get it looking right.

    I'd knock you up an example if I had more time.
    "If it ain't broken, don't fix it!"
    ----
    Northern Star - Web design, stategy & development.

  4. #4
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    With your example of coding in css, where is the "bar_left"? Did you forget to put that in their, or is it not necessary?

    If somebody could have the basic html and css coding to show as an example that would be great.

    Quote Originally Posted by kromey
    Step 1:
    Chop your bar image into two pieces: the first piece should be just the leftmost part of the bar, the part that has the curve in the top left corner. We'll call this bar_left.gif. The second piece should be a 1 pixel-wide cut of the gradient you used on your bar. We'll call this bar_bg.gif

    Step 2:
    Write your CSS class. It would look something like this:
    Code:
    .bar {
         background-image: url("images/bar_bg.gif");
         background-repeat: repeat-x;
         width: 100%;
    }
    You could add some attributes to style your text (in fact, I strongly recommend you do), but that's the easy part, so I'll let you do that.

    Step 3:
    Write your HTML. It would look something like this:
    Code:
    <div class="bar">
    <img src="images/bar_left.gif" alt="" />Kromey: World's Best Athlete?
    </div>
    This should at least get you on your way. Not the easiest thing in the world to do, but now your users only have 2 small images to download (I'd guesstimate less than 2K combined) instead of one big one for each headline.

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    neither of those examples are working maybe im explaining it wrong here. Heres what i want to do.

    I want to have that image bar in css so that i dont have to photoshop it each time to make a new headline. Is there a way i can add text to it through css or something? I rather not go through photoshop to edit the image bar, takes time and looks sloppy.

  6. #6
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    any ideas?

  7. #7
    Worship the Krome kromey's Avatar
    Join Date
    Sep 2006
    Location
    Fairbanks, AK
    Posts
    1,621
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was unable to get Northern Star's suggestion to work (even though I like the elegance of it better than my own suggestion), but with only some very minor tweaking I got my code to work exactly as intended.

    The CSS:
    Code:
    .bar {
         background-image: url("bar_bg.gif");
         background-repeat: repeat-x;
         width: 100%;
         height: 25px;
         padding-bottom: 6px;
         color: white;
         font-weight: bold;
    }
    .bar img {
         margin-bottom: -6px;
    }
    The HTML:
    HTML Code:
    <div class="bar">
    <img src="bar_left.gif" alt="" />Kromey: World's Best Athlete?
    </div>
    I'd throw this up on my server to show you, but unfortunately that's not an option at the moment. Make sure that you create the images as I instructed in my first post, and adjust the image paths in this code to point to those images that you created.


Bookmarks

Posting Permissions

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