- This topic is empty.
November 25, 2018 at 8:26 pm #279516
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.November 25, 2018 at 10:52 pm #279518BeverleyhParticipant
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
Flexbox: Make the
ula 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.November 27, 2018 at 3:26 pm #279585
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.November 27, 2018 at 3:30 pm #279586
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.November 27, 2018 at 10:38 pm #279605BeverleyhParticipant
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.November 28, 2018 at 1:04 am #279614JeroenRParticipant
#horizontal-list listyling to
display: inline-block;instead of
display: inline;. Then you can do something with padding, like
padding: 0 0.3rem;for example.
- The forum ‘Design’ is closed to new topics and replies.