Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Design Positioning list of links horizontally

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #279516
    darkwriterxx94
    Participant

    I’m trying to create a mock browser in my website. I’ve managed to create the links and have them open when clicked on. However, I’m unable to figure out how to arrange them horizontally and move them so that I may position it over the image of the browser I’ve created. I’ve tried many of the solutions found through a google search including changing the display to inline but none of them seem to work.

    I’ve pasted what I have so far in codepen: https://codepen.io/darkwriterxx94/pen/BGVJjQ?editors=1010

    Any help you can provide would be appreciated.

    #279518
    Beverleyh
    Participant

    Looks like you’ve forgotten your CSS.
    And the image is linked locally so we can’t see anything – try replacing the link with an online substitute.

    I’m unable to figure out how to arrange them horizontally

    Inline-block or float the li,
    Flexbox: Make the ul a flex parent.

    position it over the image

    You could use negative margins to pull the list upwards, or put the image and list in container element with relative positioning, and then absolutely position them inside it.

    #279585
    darkwriterxx94
    Participant

    I’ve replaced the local image with something close that i found on google. I refrained from adding a css because nothing I tried worked. However, I added one of the ones I tried.

    #279586
    darkwriterxx94
    Participant

    Ok, I think I figured it out using the information you provided above. However, I tried to enter it into my wordpress site and they all seem to overlap. I’ve tried adjusting the padding but nothing.

    #279605
    Beverleyh
    Participant

    Ok – pop the latest code into a CodePen demo and we can take a look.

    Note that we only need the minimal amount of code to demo the problem – we don’t need the whole codebase. The developer toolbar should help you identify all the pertinent CSS – that’s F12 in most browsers. Use it to inspect the elements and see their applied CSS in the styles pane. From there you can transfer all applicable code to your demo; your own styles and any contributing/conflicting CSS from the theme you’re using.

    #279614
    JeroenR
    Participant

    Set your #horizontal-list li styling to display: inline-block; instead of display: inline;. Then you can do something with padding, like padding: 0 0.3rem; for example.

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘Design’ is closed to new topics and replies.