CSS help

[D1G1T4L]

I have a round design for a button that I want to use on the page.
Let's say I spliced up the button and have
leftBorder.jpg
rightBorder.jpg
backgroundB.jpg
divider.jpg

How would I display it properly?

THe way I am doing it right now (and it's not working) is like this

index file:

<!-- opens buttons div -->
<div id="buttons">
<div id="buttonLeft"></div>
Home
<div id="buttonDivider"></div>
Our Service<
<div id="buttonRight"></div>
</div>
<!-- closes buttons div -->

css file

/* buttons */
#buttons {
width: 100%; /* header is as wide as our containing element, the wrapper */
height: 40px; /* height from our layout */
margin: 0 auto; /* centers the layout in standards based browsers */
border: 1px solid #63DDDD;
background: url(images/backgroundB.jpg) repeat-x;
}

#buttonLeft {
width: 6.0px; /* header is as wide as our containing element, the wrapper */
height: 40px; /* height from our layout */
/*margin: 0 auto; *//* centers the layout in standards based browsers */
border: 0px solid #63DDDD;
background: url(images/leftBorder.jpg) repeat-y;
}


#buttonRight {
width: 13.0px; /* header is as wide as our containing element, the wrapper */
height: 40px; /* height from our layout */
border: 0px solid #63DDDD;
background: url(images/rightBorder.jpg) repeat-y;
}
#buttonDivider {
width: 8.0px; /* header is as wide as our containing element, the wrapper */
height: 40px; /* height from our layout */
/*margin: 0 auto; *//* centers the layout in standards based browsers */
border: 0px solid #63DDDD;
background: url(images/divider.jpg) repeat-y;
}

 

[D1G1T4L]

this is how it looks like right now

 

[D1G1T4L]

I have added float: left to #buttonLeft and float: right to #buttonRight and #buttonDivider, they are all on the same line but both divider and right border image are all the way at the end..

 

[Dark Prodigy]

You could create individual ap divs for each button and simply insert the .jpegs as clickable images.

 

[wags]

If you don't want to mess around with images you can use a CSS-only approach. You might find this tool handy: http://css-tricks.com/examples/ButtonMaker/ You'll also simplify your markup since you won't need all those extra divs.

If you're set on using images, try playing with "sprite" techniques. This way you only have to load one image file. Here's an example to get you going: http://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/

 

[neonardo]

I have added float: left to #buttonLeft and float: right to #buttonRight and #buttonDivider, they are all on the same line but both divider and right border image are all the way at the end..

Float them all to the left, and just make sure to clear it at the end with something like this:

CSS

.clr{
clear: both;
}

And after your last div that's float left, add

<div class="clr"></div>

 

[Imaulle]

css is confusing if you have no design skills whatsoever

 

[rickyataac]

I'm studying on it too, maybe I can give you some suggestions days later, if you still need help.

 

[ann0yanc3]

the easiest way to accomplish your goal is to use the CSS border-image property. you only need 1 image, and it'll stretch to fit your button. however, it won't work in IE (big surprise!).

here's a link showing you how: http://www.css3.info/preview/border-image/