inVINCEable
08-02-2007, 06:06 PM
Hey everyone,
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!
It really doesn't matter if the solution is css based or javascript. I would like the fasted loading time, and would PREFER to do this with images somehow (I don't like the idea of all that complicated markup when using only css, like roundedboxes.com or whatever that site is).
So thank you for looking and I hope someone can provide some insight.
Sincerely,
Jim
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!
It really doesn't matter if the solution is css based or javascript. I would like the fasted loading time, and would PREFER to do this with images somehow (I don't like the idea of all that complicated markup when using only css, like roundedboxes.com or whatever that site is).
So thank you for looking and I hope someone can provide some insight.
Sincerely,
Jim