CODEWITHSUNDEEP
javascriptcsshtml
user1152440
user1152440

Reputation: 905

Adding an Element Between a List

enter image description here

I have a menu item that which I've created using display:table-cell; to ensure that the menu tabs "lengthen" when the user expands the screen. However I need to complete the right side of the tabs to finish the rounded corner at the top. I have a separate tabRight.png which consists of a slice of the right side of the tab. I need to place this right before each "tab opening". I have exhausted everything I know and the closing doors method I found online isn't working for this case. The right side should have a transparent corner so I don't think I can put it over the existing grey background.

The code is:

CSS:

#nav ul{
    display:table;
    width:100%;
    border-spacing: 10px;
    margin:0;
    padding:0;
}
#nav li{
    width:20%;
    display:table-cell;
    background: url('tab.png') no-repeat;
    color:#000;
    text-align:center;
    height:31px;
}
#nav a{
    display:block;
    text-decoration:none;
    color:black;
}

p{
    padding:0px;
    margin:0px;
}

HTML:

<div id="nav">
<ul>
    <li>
        <a href="http://www.google.com">
        <div>
            <img src="address.png"/>
            <p>Deadlines</p>
        </div>
        </a>    
    </li>
    <li>About</li>
    <li>Address</li>
    <li>Phone</li>
</ul>
</div>

EDIT:

I have tried the after method and I get the transparent portion overlapping the left background, so as the background shows through the transparency which what I was afraid of.

enter image description here

EDIT 2:

I set the position of the tabRight.png to -10px (10px is the width) and that pushed the edge to the right so the transparency problem no longer occurs.

Thanks guys for your help!

Upvotes: 1

Views: 90

Answers (3)

charlietfl
charlietfl

Reputation: 171689

Just add another span inside your LI, set it's margin-right to a negative enough number to accomodate the corner. Set it's with and height accordingly and background the corner image.

I am suggesting this method as it makes scripting any menu functions simpler since all li's will be a menu item

Upvotes: 1

andyb
andyb

Reputation: 43823

If you can use CSS :after pseudo selector class, then adding position:relative; to your li and the new rule:

#nav li:after {
    width:5px;
    content:"";
    position:absolute;
    height:100%;
    top:0;
    right:0;
}

will add an element on the right of all the list items.

Demo here (with some borders added for clarity)

Upvotes: 1

Nick Beranek
Nick Beranek

Reputation: 2761

2 options:

Create a class for the tabRight image.

.tab-right {
  width: 5px;
  height: 31px;
  background: transparent url('tabRight.png') left top no-repeat;
  display: inline-block;
  zoom: 1; /* for IE7 */
  *display: inline; /* for IE6 */
}

Then create a new <li> element:

<li class="tab-right"></li>

Use the :after pseudo-element.

#nav li:after {
  content: "";
  width: 5px;
  height: 31px;
  float: left;
  background: transparent url('tabRight.png') left top no-repeat;
}

Adjust the width and height to the actual pixel dimensions for your image.

Upvotes: 1

Related Questions