2 replies [Last post]
mzimmers
mzimmers's picture
Offline
Enthusiast
CA, USA
Last seen: 9 years 43 weeks ago
CA, USA
Timezone: GMT-8
Joined: 2007-11-12
Posts: 124
Points: 67

Hi, all -

I'm trying to format a navigation bar so that the navigation boxes are of a particular color, and the unused portion of the bar gradients into black. I believe that to do this, I need to use both background-color and background-image, but I'm not sure how to align the boxes to the left and the image to the right. Here's the code I'm trying and isn't working:

#navmenu ul { width: 100%; background-image: url(gradient.gif); background-repeat: no-repeat; background-color: #ccc; margin-bottom: 20px; float: left; list-style-type: none; list-style-image: none; border: solid 1px black; }

How do I code the image to float right, while keeping the list items floating left? Thanks.

Michael Zimmers
Staff Writer
www.scopedin.com

artistsanju
Offline
newbie
Ahmedabad
Last seen: 12 years 2 weeks ago
Ahmedabad
Timezone: GMT+5.5
Joined: 2007-11-24
Posts: 3
Points: 0

use image position

Hello,

You can you below code for your requirement.

#navmenu ul { width:100%; background:url(gradient.gif) no-repeat top right #ccc; margin-bottom:20px; float:left; list-style-type:none; list-style-image:none; border:solid 1px black; }

This is also good for your requirement. here you can set background position
by pixel.
#navmenu ul { width:100%; background:url(gradient.gif) no-repeat 25px 0px #ccc; margin-bottom:20px; float:left; list-style-type:none; list-style-image:none; border:solid 1px black; }

:thumbsup: :rolleyes:

mzimmers
mzimmers's picture
Offline
Enthusiast
CA, USA
Last seen: 9 years 43 weeks ago
CA, USA
Timezone: GMT-8
Joined: 2007-11-12
Posts: 124
Points: 67

thanks, sanju

that worked beautifully. I appreciate the help!

Michael Zimmers
Staff Writer
www.scopedin.com