Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
08-02-2007, 06:06 PM #1
- Join Date
- Apr 2007
- Thanked 0 Times in 0 Posts
Most efficient way to design half a rounded box with speed in mind?
After some recent happenings it turns out I have to design the front end/visual aspects for a project my team just finished. I haven't touched CSS for about a year as I have been doing things on the backend, not even touching a bit of css in tandem with xhtml.
I have read up, refreshed my mind a bit, but there is one thing I am still a little bit confused about. I have two boxes <div> boxes that are for voting. I tried to find an example for you guys to show you what I want. Right here, on jyte.com those voting buttons are almost exactly what I need.
I searched google and was flooded with a thousand different ways to create rounded boxes. And most of them don't really apply, at least not any of the pre-fab boxes because I only need two corners.
What I was thinking I should so is create my box normally with whatever color I want as a simple square, and then create the right/left side of the box with the two rounded corners as a .gif/.png and just place them aside the box via some <div> positioning?
Or should I create a top left/right bottom left/right .gif/.png instead and load them into the image via CSS positioning.
I looked at the source over at jyte and it looks like they are just setting one background-image via CSS and loading that whole image into the <div> When I did that with my file, I got a file that was 60KB! Way too big!
So thank you for looking and I hope someone can provide some insight.
JimI am on my way. :)
08-02-2007, 07:24 PM #2
- Join Date
- Jan 2005
- Memphis, TN
- Thanked 148 Times in 146 Posts
I looked at the images they used, and each one is about 3k. So the whole button with all the states in it is 12k. A far cry from what you got. Can you optimize your images more by chance. The yway they are doing it ( as it seems to fit your needs as well) seems a pretty easy and not a whole lot of coding way to do it.
also, check out this:
should be easy enough to make work for your needs and only yakes 1 image this time around.