graham.reeds
graham.reeds

Reputation: 16476

Extending element beyond it's parent borders

Imagine you have two adjacent columns. The first (left most) is the primary navigation and the second is the secondary navigation. To the right of these is the actual content.

I have links in both columns as unordered lists. The selected links in each are highlighted by changing the background colour. The final part of the design is that the selected items needs to 'stickout' on the right hand side with a pointed arrow design (for which I have been provided an image for).

This is what I am having trouble with. I need to position an image to the very right of the PrimaryNavigationSelected. I am trying to extend the li element beyond it's parent borders and attach the arrow image as background. Is this the best way to do this? Can you make an li element extend beyond the borders of its parent?

The system is for a help like system that will be using an embedded IE7 control but the design is planned to be used eventually for the online help.

Code below: Note - the SecondaryNavigation is similar to Primary except for a change in colours and I don't feel comfortable posting over 160 lines of CSS. If you can show how to do it to the primary navigation I could make that extend to secondary.

HTML

<body>
<div id="PrimaryNavigation">
<ul>
<li class="PrimaryNavigationDeselected"><a href="#">Primary Navigation Goes Here</a></li>
<li class="PrimaryNavigationDeselected"><a href="#">Primary Navigation Goes Here</a></li>
<li class="PrimaryNavigationSelected"><a href="#">Primary Navigation Goes Here</a></li>
<li class="PrimaryNavigationDeselected"><a href="#">Primary Navigation Goes Here</a></li>
</ul>
</div>
<div id="SecondaryNavigation">
<ul>
<li class="SecondaryNavigationSelected"><a href="#">Secondary Navigation Goes Here</a></li>
<li class="SecondaryNavigationDeselected"><a href="#">Secondary Navigation Goes Here</a></li>
<li class="SecondaryNavigationDeselected"><a href="#">Secondary Navigation Goes Here</a></li>
<li class="SecondaryNavigationDeselected"><a href="#">Secondary Navigation Goes Here</a></li>
</ul>
</div>

CSS

#PrimaryNavigation {
position: absolute;
height: 100%;
width: 20%;
background-color: #2BB1E4;
}

#PrimaryNavigation * {
    position: relative;
    margin: 0; 
    padding: 0; 
}

#PrimaryNavigation ul {
    list-style-type: none;
    padding: 44px 0 0 0; 
}

#PrimaryNavigation li {
    padding: .2em 0;
    padding-left: 1em;
    margin-bottom: 1em;
}

#PrimaryNavigation a {
    color: white;
    text-decoration:none;
}

.PrimaryNavigationDeselected {
    color: #FFFFFF;
}

.PrimaryNavigationDeselected:hover {
    color: #FFFFFF;
}

.PrimaryNavigationSelected {
    margin: 1em;
    color: #FFFFFF;
    background-color: #0079A7;
}

.PrimaryNavigationSelected:hover {
    color: #FFFFFF;
    background-color: #0079A7;
}

Upvotes: 0

Views: 1291

Answers (2)

graham.reeds
graham.reeds

Reputation: 16476

Managed to get it working.

Firstly the environment it will end up in is an IE7 control so I had to add

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

To get the code to work in IE7 after I managed to get it working in IE8.

For IE8 I needed to add the following to PrimaryNavigationSelected:

padding-right: 8px; 
right: -8px; 
margin-left: -8px; 
color: #FFFFFF;
background: transparent url(arrow.png) 100% 50% no-repeat;

But for IE7 you need to remove the right and margin-left properties.

Strange, but true.

Upvotes: 0

Shawn Taylor
Shawn Taylor

Reputation: 3969

Well, your strategy should be to include background image in the right side of the li and then add padding-right so that your text appears left of the image.

Or you can also think of using :after selector.

Upvotes: 1

Related Questions