2

Please help me cut the following navigation bar using CSS2.1, with shadow, rounded borders and without spoiling the layout if you zoom-in/zoom-out:

enter image description here

Already two days I have been working on it, and could not find any way which will look the same look while zooming...

EDIT:

  • need to be done with CSS2.1

  • right and left borders are rounded + have shadow (right left correspondingly)

  • there is a shadow on bottom as well

Paul Sweatte
  • 24,148
  • 7
  • 127
  • 265
Karine
  • 587
  • 1
  • 11
  • 24

2 Answers2

1

Should be simple enough.

<div id="navbar">
    <a href="news" style="background-color: black;">News</a><a href="business" style="background-color: orange;">Business</a>......<a href="deals" style="background-color: blue;">Deals</a>
</div>

CSS:

#navbar > a {
   padding: 10px;
   box-shadow: 4px 4px 16px black;
   color: white;
}
#navbar > a:first-child { border-radius: 8px 0px 0px 8px; }
#navbar > a:last-child { border-radius: 0px 8px 8px 0px; }
Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592
0

It's a pretty simple solution. You can use just css. I used jQuery to assing the colors but it's a straightforward process... http://jsfiddle.net/elclanrs/QtLv5/2/

html

<ul>
    <li><a href="#">Option1</a></li>
    <li><a href="#">Option2</a></li>
    <li><a href="#">Option3</a></li>
    <li><a href="#">Option4</a></li>
    <li><a href="#">Option5</a></li>
</ul>

css

li { float: left; }
a {
    display: block;
    padding: .5em 1em;
    text-decoration: none;
    color: black;
    font: bold 15px Arial;
}

/* If you assign unique ids to your menu items you can do */
#item { background: red; }

​

elclanrs
  • 92,861
  • 21
  • 134
  • 171
  • Ohhh, no! The right and left borders are rounded, there is a shadow below the buttons and on the right and left sides. – Karine Feb 25 '12 at 08:58
  • If you want those effects without css3 then you'll have to use images. – elclanrs Feb 25 '12 at 09:03
  • Yes, I do exactly that. But I don't know how to achive consistent layout when it is zoom in/out – Karine Feb 25 '12 at 09:10