Applying one round corner to an UL ... Please help

HTML & CSS
1

I’ve done this before but to a class not an UL. I think it should be the same but for some reason it’s not working. The html im using is:

<div id=“main_nav”>
<ul>
<li id=“nav_home”><a href=“index.html”>Home </a></li>
<li id=“nav_about”><a href=“about.html”> About Us </a></li>
<li id=“nav_services”><a href=“cleaning-services.html”> Services </a></li>
<li id=“nav_contact”><a href=“contact-us.html”> Contact Us </a></li>
<li id=“nav_green”><a href=“green-cleaning.html”>Green Cleaning</a></li>
</ul>
</div>

The CSS for this area is here:

#main_nav {
position: relative;
top: -73px;
background: url(images/res_nav_corner.jpg) top left no-repeat;}

#main_nav ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 761px;
}

#main_nav li {
margin: 0;
padding: 0;
float: left;
}

#main_nav a {
float: left;
width: 152px;
text-align: center;
color: #fff;
font-weight: bold;
text-decoration: none;
line-height: 2.5;
background: url(images/res_nav_back.jpg) repeat-x;
}

The red part is what I am having trouble with. That is the corner image and for some reason it won’t apply it to the UL. As a test step I put the same code in the main_nav a and main_nav li sections and it works in both. Any ideas? Thanks for any help.

2

#main_nav {
position: relative;
top: -73px;
background: url(images/res_nav_corner.jpg) top left no-repeat;
overflow:hidden}
:slight_smile:

3

Thanks for the fast reply but that did not work for me either :(. I thought the overflow property was to be used if the item in question is too large for it’s container. In any case im still looking for any help. Thanks.

4

I dont know if this helps any, but you want the image to appear on the UL, but its being used on the parent div. Why not loose the div, and style the UL with the image? Can you provide a link?

5

HI,

The overflow is a method of clearing floats (see faq on floats at the top of the forum).

As your main_nav contains only floats then it is in fact empty as floats are removed from the flow and it’s height will be zero which is why no background shows.

The overflow:hidden forces an element to surround it’s floats (ie7 and under need haslayout) and then the background has height.

Ryans code is working for me as this test shows.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#main_nav {
    position: relative;
    top: -73px;
    background:red url(images/res_nav_corner.jpg) no-repeat 0 0;
    overflow:hidden;
}
#main_nav ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    width: 761px;
}
#main_nav li {
    margin: 0;
    padding: 0;
    float: left;
}
#main_nav a {
    float: left;
    width: 152px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    line-height: 2.5;
    background: url(images/res_nav_back.jpg) repeat-x;
}
</style>
</head>
<body>
<p>test</p>
<p>test</p>
<div id="main_nav">
    <ul>
        <li id="nav_home"><a href="index.html">Home </a></li>
        <li id="nav_about"><a href="about.html"> About Us </a></li>
        <li id="nav_services"><a href="cleaning-services.html"> Services </a></li>
        <li id="nav_contact"><a href="contact-us.html"> Contact Us </a></li>
        <li id="nav_green"><a href="green-cleaning.html">Green Cleaning</a></li>
    </ul>
</div>
</body>
</html>

I’m not sure what the negative relative positioning is being used for though and there may be an issue if you are overlapping something.

6

I did some more working around with the solution you gave me and it’s working if i hide the other background image I put on the main_nav a. Any info on how I can use both at the same time? Z index perhaps?

7

I’d probably need to see a picture of what you are doing as it’s hard without the actual images.

If the background in the anchor is covering your corner up then perhaps you need to rethink. Either add some padding to the div to protect the corner or if that’s not possible or wanted then add the corner onto the first item instead.

Add a class to the first item and add the corner to whatever image you are using on that element.

Of course I cant see what the image is so I’m just guessing but something like that should be workable:)

8

I don’t use this forum much but am very excited about how helpful everyone is. I will def have to visit more often.

My current issue can be seen at http (I can’t post links cause im new so please ignore this) ://www.(please ingore this) jrworksts. (please ignore this) com/yuilles_site/

I have added padding to the navigation to display the issue better. The corner is being covered by the repeating background image which was placed on the #main_nav a element. Hope this helps illustrate my issue better. Thanks for all the help!!

9

Paul your the man. I decided to add padding to the main_nav ul in order to push it over to the right and make way for the rounded image. Thanks a lot for your help. It seems so obvious after you pointed it out haha. Thanks again.

10

Glad you got it sorted :slight_smile:

If you have any problem just shout and someone will help.