CODEWITHSUNDEEP
htmlcss
zorza
zorza

Reputation: 2884

Background-image of an element over another element

The goal is to render a background-image of an "a" element over the div#slider element's backgroung-image.

First of all, here's the code:

<div id="top_bg">
    <div id="top">
        <nav>
            <ul>
                <li><a href="#">Link onegfdgdfg gd</a></li>
                <li><a href="#">Link two</a></li>
                <li><a href="#">Link three</a></li>
                <li><a href="#">Link four</a></li>
                <li><a href="#">Link five</a></li>
            </ul>
        </nav>
    </div>
</div>

<div id="slider">
</div>

jFiddle link contains my attempt on this: http://jsfiddle.net/zorza/drBBC/11/

I tried with absolute positioning of an "a" element inside a relative "li", which enables me a way to give it z-index, so it can appear over the #slider. It almost works, but requires for "li" to have constant width to position "a" inside it, which results in a bad way when the inner text is wider than the constant width (see first menu item).

What I'd like to get is an "a" element to set it's own width depending on an inside text and to get rid of a constant width of a "li" element, so the gaps between menu items will be even.

The second way I came up with was to slice #slider background into two graphics and place one of them (the one with the height of an arrow) inside the #top div background-image. This way an "a" element doesn't need to be positioned absolutely. But this solution isn't elegant at all an makes all sort of troubles when there is need to change the image.

Upvotes: 1

Views: 214

Answers (2)

Gl1tch3t
Gl1tch3t

Reputation: 1

Have you tried, for width of an item to be all the same size

li, a {
display: /*block or inline-block depending on the layout you were after*/
}

and for an automatic width to a

a {
width: auto;
}

Upvotes: 0

bashleigh
bashleigh

Reputation: 9314

#top-bg{
    background-image:url('yourImage.png');
}

That will work. No need for div#background.

Edit try this:

a:hover :after{
    width:0;
    height:0;
    content:'';
    border:10px solid transparent;
    border-top-color:#333333;
    position:absolute;
    top:100%;
    left:49%;
}

I think that should work. Without adding the image and without positioning new elements and repositioning the anchors

Upvotes: 2

Related Questions