Create Vertical Line with Images Overlapping Down Page

Good Afternoon!

I would like to create a similar style to what you will find on this page under the heading "bulletproof backend" http://www.nextendweb.com/accordion-menu/

Basically, I want a vertical line that it about 25px from the margin of my page and has icons overlapping that line. I am not sure if this is possible via html and css or if I first need to create this image in photoshop and place it as a background image with a <div> or something similar?

Any help is appreciated. If there is some CSS or HTML I can add that will allow me to overlap these, that would help. Here is the code that I tried using to create the vertical line, it is the first answer in this post: http://stackoverflow.com/questions/3148415/how-to-make-a-vertical-line-in-html

I created the vertical line and gave it a margin, but then I was not able to get the images to overlap it…thank you so much for your time and attention to this. Knowing how to overlap items/elements in html/css would be a good thing :wink:

Pura Vida!
Mandy

  • Tyler Postle

    Hey Mandy,

    Hope you are well today! Thanks for your question.

    That site is actually using a background image for their line then they've positioned it to be inline behind the icons there :slight_smile: I'll post the code they use here and perhaps that will get you started!

    #new-tab-backend .new-left-block {
    background-image: url("/wp-content/themes/nextendweb/products/accordionmenu/images/fadeshow-line.png");
    background-position: 2.1% 0;
    background-repeat: repeat-y;
    float: left;
    padding-bottom: 30px;
    width: 100%;
    }

    The link their of course is just to their image, it is just a purple dot but that's because they repeat it all the way down the page so it looks like a line :slight_smile:

    Hope that provides you with some direction! Let us know if you need any further assistance.

    All the best,
    Tyler

  • Mandy

    Thank you so much for the response. I figured out another solution in the meantime for that. I used the suggestion in the stackoverflow link I provided and added this CSS to my custom CSS:

    .verticalLine {
    margin-left: 65px;
    border-left: 3px solid #542313;
    height: 500px;
    }

    Then, I added the vertical line via <div class="verticalLine"> in my post BELOW the first icon so that the icon would overlap the top of the line and achieved the same result and gave the images an absolute position that would overlap the line: http://digitalreachopm.com/an-approach-you-will-appreciate/

    Obviously I need to change the background of the icons to achieve the same look :slight_smile:

    Thank you for the swift reply. With this, I have two more related questions.

    First, how were you able to see their code used? I use the right-click>inspect elements function on the apple computer, is there something else I can use?

    Second, they are using page jumps/bookmarks with the menu on top. Is the best way to do this to create the links and then place them in a menu you can build via a plugin that does not appear in the usual navigation spots? Basically, would it be best to find a page jumping plugin or would it be better to do it manually and make a menu via a plugin or shortcodes?

    Thank you! I look forward to hearing back!

  • Tyler Postle

    Hey Mandy,

    No problem, glad I could help, it's looking good! :slight_smile:

    First, how were you able to see their code used? I use the right-click>inspect elements function on the apple computer, is there something else I can use?

    I used Firebug, it's a browser app available for most browsers but made more specifically for Firefox. Like you, I tried to right click inspect the element first; however, I had the same result. Once I figured out it was likely a background image I started looking for the container, from there I found the image url and class. I attached a screenshot to illustrate :slight_smile:

    Basically, would it be best to find a page jumping plugin or would it be better to do it manually and make a menu via a plugin or shortcodes?

    You can actually add these in manually without much trouble, they're using anchors. This is an example, say I wanted to link to one of my section titles that was "How to Use Anchors" - I would use code like this:

    <a name="anchors" >How to Use Anchors</a>

    Now, let's say that is on my homepage - to link to that section of the page all I need to do is add #anchors to the end of my url. So, domain.com/#anchors and it will jump me down to it.

    Whatever you add as the "name=" for the "a" tag is what the anchor will be, it also works with selector id's too.

    It's worth noting that on the Accordion Menu website page - they actually link to hidden text that is a bit above the headings and style it with a class called ".new-anchor" that gives it extra top-padding so it's positioned a bit better.

    There likely are plugins you could use for this too that may have added affects like how the accordion menu one transitions down smoothly instead of a hard jump.

    Hope that helps Mandy!

    Let us know if you have any further questions.

    All the best,
    Tyler

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.