CODEWITHSUNDEEP
htmlcsscss-shapes
user2970137
user2970137

Reputation: 59

Arrow positioning on a line and above all divs

I'm at my wits end with this one.

I have a couple of divs. They all have a downward pointing arrow. It should be centered in the middle, on the brown line and on top of everything. The last div should also have the arrow. I tried z-index, absolute & relative positioning and nothing works.

If you click the title, the box opens. The arrow should stay on the line in the exact spot. This really doesn't seem all that difficult to me, but somehow I can't make it work.

Here is a fiddle:

http://jsfiddle.net/8eLwr

<article id="made" data-magellan-destination="made">


<div class="blocks-holder wide made">
    <div class="block wide" id="">
        <div class="openblock">
            <div class="maak-competences">
                 <h2>title</h2>

                 <h4>tagline</h4>

                <div class="arrow-down"></div>
            </div>

Thanks so much in advance!

Upvotes: 1

Views: 120

Answers (1)

James Donnelly
James Donnelly

Reputation: 128791

Remove the absolute positioning from the arrow and instead set it to display as block and give it margin: 0 auto to centralise it:

.arrow-down {
    ...    
    background-position: bottom;
    display: block;
    margin: 0 auto -36px auto;    
}

Note that I've also set its background-position to bottom to make the background image sit directly at the bottom of the element.

JSFiddle demo.

Edit: from comments:

Yes, it should be just underneath the brown line, so it sort of looks like this: -----v------- The two point of the V should touch the line

This is a bit of a large change. We need to remove the background from the individual blocks (to stop them overlapping the arrow), then remove the float from the block container (to fix the height), then finally give the container the white background and increase the negative margin on the arrow:

.blocks-holder .block {
    ...
    float: left; /* Remove this. */
}

.blocks-holder .block.wide {
    ...
    background: transparent;
}

.blocks-holder.wide {
    ...
    background: #fff;
}

.arrow-down {
    ...
    margin: 0 auto -46px auto;    
}

JSFiddle demo.

Upvotes: 1

Related Questions