Arranging arrows strategically along a line and ensuring they are positioned correctly above all div elements

Question

Arranging arrows strategically along a line and ensuring they are positioned correctly above all div elements

I'm really struggling with this issue.

I have a situation where I need to center a downward pointing arrow within some divs. It should be positioned in the middle, on a brown line, and on top of everything else. The last div should also include the arrow. No matter what I try - using z-index, absolute and relative positioning - I can't seem to get it right.

When you click on the title, the box should open while keeping the arrow in the exact same location on the line. It seems like a simple task, but for some reason, I just can't figure it out.

Here is a link to a fiddle showcasing the issue:

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>

Thank you so much for any help you can provide!

html css css-shapes

Answer 1

Answer №1

Make a change to the arrow by removing the absolute positioning and setting it to display as block. Apply margin: 0 auto to center the arrow:

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

Additionally, adjust the background-position to bottom to ensure the background image aligns with the bottom of the element.

Check out the JSFiddle demo.

Edit: Comment response:

The arrow should be positioned just below the brown line, creating this visual effect: -----v------- The two points of the V should touch the line

This modification is more extensive. It involves removing the background from individual blocks (to prevent overlap with the arrow), eliminating the float property from the block container (to adjust the height), and finally giving the container a white background while updating 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;    
}

Explore the updated JSFiddle demo.

Answer 2

Make a change to the arrow by removing the absolute positioning and setting it to display as block. Apply margin: 0 auto to center the arrow:

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

Additionally, adjust the background-position to bottom to ensure the background image aligns with the bottom of the element.

Check out the JSFiddle demo.

Edit: Comment response:

The arrow should be positioned just below the brown line, creating this visual effect: -----v------- The two points of the V should touch the line

This modification is more extensive. It involves removing the background from individual blocks (to prevent overlap with the arrow), eliminating the float property from the block container (to adjust the height), and finally giving the container a white background while updating 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;    
}

Explore the updated JSFiddle demo.

Arranging arrows strategically along a line and ensuring they are positioned correctly above all div elements

Answer №1

Similar questions

Having issues with nth-child? It seems like nth-of-type isn't working either

Is it possible in PHP to iterate through a query and sort it into a designated column according to a specific value?

Guide on creating an Iframe in HTML with JavaScript

I found it challenging to select a particular choice using Selenium in Python

Element in the Middle

What is the best way to make sure the embedded object fills the entire height of the container div?

Personalizing the fileTemplate selection in FineUploader

When using JavaScript, I have noticed that my incremental pattern is 1, 3, 6, and 10

Is it possible to extract information from a website if the body or row does not contain any attributes?

Creating an array object in JavaScript is a straightforward process that involves using the array

App builder shows raw HTML code instead of generating a dynamic table

What is the best way to create a stylish outward curve effect for an active sidebar item using just CSS

Configuration options for content division in a table cell

"How can I adjust the height of a Bootstrap column to match the height of its neighboring column

"Placing an image at the bottom within a DIV container in HTML

What measures can be taken to safeguard this hyperlink?

Is there a way to prevent Vetur from automatically converting colSpan and rowSpan tags?

What is the best way to "re-upload" drop-down selection using javascript?

Is it possible to implement formvalidation.io in a React project that is using Materialize-css?

I aim to break down a function into several functions using jQuery and AJAX for better organization and efficiency