CODEWITHSUNDEEP
htmlcssnavigation
user3095570
user3095570

Reputation: 89

how can I position my img right?

I've made a little navigation. If you click on a plus sign an animation starts and drop-down menu opens.

But, I have no idea how I can position the element with css. I've tried all kind op combinations. Does anyone know what I'm doing wrong?

this is the CSS:

body {
    background-image: url(bg.png);
    background-size: cover;
    background-repeat: no-repeat;
}

html,body {
    height: 100%;
}

.aspectwrapper {
    display: inline-block;
/* shrink to fit */
    width: 100%;
/* whatever width you like */
    position: relative;
/* so .content can use position: absolute */
}

.aspectwrapper::after {
    padding-top: 56.25%;
/* percentage of containing block _width_ */
    display: block;
    content: '';
}

.content {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
/* follow the parent's edges */
    outline: thin dashed green;
/* just so you can see the box */
}

#links {
    position: relative;
    left: 300px;
}

the 'links' div is the div where the whole navigation part is located. I think I need to position that div.

this is the HTML code:

<div class="aspectwrapper">
    <div class="content">
        <div class="links">
            <ul>
                <li><a href="#ontwerp"><img height="20" src="1.png"></a></li>

                <li><a href="#object"><img height="20" src="2.png"></a></li>

                <li><a href="#bouwkunde"><img height="20" src="3.png"></a></li>

                <li><a href="#contact"><img height="20" src="4.png"></a></li>

                <li><a href="#winkel"><img height="20" src="5.png"></a></li>
            </ul>
        </div>
    </div>
</div>

I hope anyone can help me

Upvotes: 1

Views: 87

Answers (1)

Kai Feller
Kai Feller

Reputation: 663

In your CSS, you've defined the links class as an ID. Therefore, change:

#links {
    position: relative;
    left: 300px;
}

to

.links {
    position: relative;
    left: 300px;
}

Here's the fiddle: http://jsfiddle.net/5Ejgx/

Hope that helps!

Upvotes: 3

Related Questions