CSS and images

bogman44

Can someone put me out of my misery.
I'm using css/divs instead of tables for the first time.

I'm trying to place a set of links in a row between to corner images.
I cannot get both corners to align properly on the same row.
Can anyone help me?

---

<div id="header">

<div id="logo"> </div>
<ul id="navigation">
<img src="images/pink_corner_left.gif" alt="" />
<li><a href="index">Home </a></li>
<li><a href="index">About Us</a></li>
<li><a href="index">Link</a></li>
<li><a href="index">Link</a></li>
<li><a href="index">Link</a></li>
<li><a href="index">Links</a></li>
</ul>
<img src="images/pink_corner_right.gif" alt="" />
</div><!--end header-->


CSS
#header {width:100%; padding:0px 0px px 0px; background:#FFFFFF; text-align:left;}

/*navigation*/
ul#navigation {margin:0; padding:10px 0; }
ul#navigation li {margin:0; padding:0; list-style:none; display:inline; }
ul#navigation a {color:#225799; padding:0 20px 0 0; text-decoration:none; }
ul#navigation a:hover {color:#000000; text-decoration:underline; }

bogman44

Problem solved. Please ignore.

Goodshape

You could try setting them as background images?

#header { background : #fff url('images/pink_corner_left.gif') left top no-repeat; }

ul#navigation { background : transparent url('images/pink_corner_right.gif') right top no-repeat; }

Might need to fiddle with margin and padding on the UL to get that to work but background images is probably the way I'd go for something like this.

bogman44

I set the whole 'cell' as a background image.
Placed the links on top. Looks ok.
Thanks for your help.