How to put elements on the border of another element?

Question

I am working on a project trying to make a (let's call it a lake) that is centered inside another (ground) and it has smaller elements around the edge those would be the docks. Docks need to be clickable by the user so it needs to be an element, not just a background image.

This is how i imagined(sorry for the bad paint):

How can I achieve this result with css and HTML or even with javascript/jquery?

.ground {
  width: 100%;
  height: 600px;
  border: 2px solid black;
  position: relative;
}

.lake {
  width: 60%;
  height: 60%;
  border: 2px solid black;
  border-radius: 200px;
  background: blue;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.dock {
  width: 30px;
  height: 50px;
  margin: 10px;
  background: black;
  float: right;
}

<div class="ground">
  <div class="lake">
    <div class="dock"></div>
    <div class="dock"></div>
    <div class="dock"></div>
    <div class="dock"></div>
  </div>
</div>

You can certainly do this with just CSS. Will probably need absolute positioning. — Robin Zigmond, Oct 26 '18 at 09:04
Related Q&A - https://stackoverflow.com/questions/39020670/rotate-objects-around-circle-using-css — Paulie_D, Oct 26 '18 at 09:44
Even more related if not a dupe - https://stackoverflow.com/questions/10152390/dynamically-arrange-some-elements-around-a-circle — Paulie_D, Oct 26 '18 at 09:44

score 1 · Answer 1 · answered Oct 26 '18 at 09:08

1

you can use ':nth-child()' or ':nth-of-type()' in css to target the docks and position them individually. Here's an example: https://codepen.io/anon/pen/rqPere

.dock:nth-of-type(1) {
   left:auto;
   right:0;
   transform: translate(50%, -50%);
}

.dock:nth-of-type(2) {
  left:50%;
  top:0;
}

.dock:nth-of-type(3) {
  left:50%;
  top:100%;
}

answered Oct 26 '18 at 09:08

Chewy Jetpack

31
6

Thank you for your answer, i might try to do it this way. – Szucs Eduard Oct 26 '18 at 09:10

symlink · Answer 2 · 2018-10-26T10:51:29.450

Adjust the position of the docks as needed:

.ground {
  width: 100%;
  height: 90vh;
  min-height: 260px;
  border: 2px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lake {
  width: 80%;
  min-width:360px;
  height: 50%;
  min-height: 200px;
  border: 8px solid green;
  border-radius: 50%;
  background: blue;
  position: relative;
}

.dock {
  width: 30px;
  height: 50px;
  border: solid green 4px;
  background: black;
  position: absolute;
}

.dock.first {
  top: 20px;
  left: 20px;
}

.dock.second {
  top: 20px;
  right: 20px;
}

.dock.third {
  bottom: 40px;
  left: 0px;
}

.dock.fourth {
  bottom: 40px;
  right: 0px;
}

<div class="ground">
  <div class="lake">
    <div class="dock first"></div>
    <div class="dock second"></div>
    <div class="dock third"></div>
    <div class="dock fourth"></div>
  </div>
</div>

Mehraj Khan · Accepted Answer · 2018-10-26T10:34:48.163

You can do like this using <ul> <li> adjust the positions how much you want I have done sample code.

.ground {
  width: 100%;
  height: 600px;
  border: 2px solid black;
  position: relative;
}

.lake {
  width: 20%;
  height: 60%;
  border: 2px solid black;
  border-radius: 200px;
  background: blue;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

li {
  list-style-type: none;
}

li.dock {
  position: absolute;
  width: 30px;
  height: 50px;
  margin: 10px;
  background: black;
  float: right;
}

li:nth-child(1) {
  top: -2%;
  left: 30%;
}

li:nth-child(2) {
  left: -2%;
  top: 40%;
}

li:nth-child(3) {
  right: -2%;
  top: 40%;
}

li:nth-child(4) {
  left: 50%;
  bottom: -2%;
}

li:nth-child(5) {
  bottom: -2%;
  left: 30%;
}

li:nth-child(6) {
  bottom: 10%;
}

li:nth-child(7) {
  top: -2%;
  left: 50%;
}

<div class="ground">
  <ul class="lake">
    <li class="dock"></li>
    <li class="dock"></li>
    <li class="dock"></li>
    <li class="dock"></li>
    <li class="dock"></li>
    <li class="dock"></li>
    <li class="dock"></li>
  </ul>
</div>

How to put elements on the border of another element?

3 Answers3