How would I do this ?

Discussion in 'CSS' started by Camay123, Nov 10, 2007.

0
  1. #1
    I want to have a horizontal navigation bar with these size:

    height: 30px;
    width: 780px;
    background-color: #000000;


    I want to have both extremities of this bar round. So I photoshop two images of round end of the bar.

    I add the right image to the bar with this:

    background: url(navright.gif) no-repeat right;

    But I also want to have the order image far left. Si I tried adding this:

    background: url(navleft.gif) no-repeat left;

    The problem is that It always show only the last background image I enter.

    How would I have these two images show at both extremities of the bar ?
     
    Camay123, Nov 10, 2007 IP
  2. Crimsonc

    Crimsonc Peon

    Messages:
    616
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    0
    #2
    an easier way would be to create a background image 780px in length and 30px high with the rounded ends. Instead of using two images use one.
     
    Crimsonc, Nov 10, 2007 IP
  3. Jimmy Paddy

    Jimmy Paddy Peon

    Messages:
    19
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    You can only have one BG image per element. So I would either do what Crimsonc recomends above or create a Div inside that Div and apply the seperate Bg image...

    Or.. If you are using a UL in the Navbar then apply it to that...
     
    Jimmy Paddy, Nov 10, 2007 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #4
    That's my approach to it too.

    I'd probably put the image 'top right' on the UL, then ALSO put it on each LI, trapping the first LI to show the left rounded border via a class "first". You could then even expand the image to 60px tall putting the mouse-over state under the normal one - then just slide the background on each LI up 30px to show it.

    Here's a quick example:
    http://battletech.hopto.org/html_tutorials/roundedmenu/template.html

    The directory is unlocked so you can grab the bits and pieces.
    http://battletech.hopto.org/html_tutorials/roundedmenu
     
    deathshadow, Nov 10, 2007 IP