Another CSS toolbar problem

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Another CSS toolbar problem

Post by alex.barylski »

Ughhhh...

Always problems with using CSS :P

So again I am trying to build yet another toolbar in CSS (so much for making design simple hoping everything is possible and easy in CSS)

This time, here are my requirements:

1) Fill entire width of screen, actually container, which width: 100% seems to do well
2) there is a repeated background but L & R side has a seperate rounded image
3) The toolbar must be padded or marginized about 10 pixels on each L & R side, using end images with padded white space won't work aesthetically, so the padding MUST be done using CSS

Basically in table form, I have the following:

Code: Select all

<table width="100%">
 <tr style="background-image: url('images/bkgnd.png')">
  <td><img src="left.png" width="24px" height="10px" /></td>
  <td width="">
    Some drop downs, input, etc goes here :P
  </td>
  <td><img src="right.png" width="24px" height="10px" /></td>
 </tr>
</table>
What I currently have in CSS form:

Code: Select all

<form>
  <div style="margin-left: 10px; margin-right: 10px; width: 100%; height: 24px; background-image: url('images/main_menu_bkgnd.png')">
    <div style="display: inline; width: 10px; height: 24px; background-image: url('images/main_menu_left.png')"></div>
    <select style="display: inline">
      <option>-- Option --</option>
    </select>
    <div style="display: inline; width: 10px; height: 24px; background-image: url('images/main_menu_right.png')"></div>
  </div>
</form>
It almost works in IE, but I can't get the right image to right align to the end, but in FF it's a totally different story...

The right margin is causing the toolbar to push past availble space and making the horizontal scroll bars to appear (VERY BAD AS I ABSOLUTE HATE THAT)...

I considered using a width of 96% instead and dropping the margin, which works, but the the right side is not flush against the container...so that won't work as aesthetically it looks bad...

Any ideas???

Thanks again :)
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Post by Benjamin »

Your trying to set widths on inline elements again. That isn't going to work.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

Code: Select all

..
might make it look prettier too. Image
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

Code: Select all

margin-left: 10px; margin-right: 10px; width: 100%;
100% + 10px +10px .... will not work.

I would try floats. Have you looked at http://css.maxdesign.com.au/listamatic/ already? Many examples. Just looking at the code and figuring out what methods are used etc will help a lot.

Do you have an image of what it must look like?
Post Reply