SitePoint Sponsor |
|
User Tag List
Results 1 to 7 of 7
Thread: Image to css form please
-
Oct 6, 2006, 18:55 #1
- 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?
-
Oct 6, 2006, 19:08 #2
- 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%; }
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>
-
Oct 7, 2006, 05:16 #3
- 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.
-
Oct 7, 2006, 10:10 #4
- 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.
Originally Posted by kromey
-
Oct 7, 2006, 11:13 #5
- 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.
-
Oct 7, 2006, 13:05 #6
- Join Date
- Aug 2006
- Posts
- 74
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
any ideas?
-
Oct 7, 2006, 14:37 #7
- 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; }
HTML Code:<div class="bar"> <img src="bar_left.gif" alt="" />Kromey: World's Best Athlete? </div>
Bookmarks