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 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>
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%;
}
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>
Related
Problem:
The scrollbar is missing on my (social-media) website. It's because of the "position: fixed;" thing. Everything was fine before. I tried to set overflow to "overflow: auto;" where I set "position: fixed". But it only made things worse, and still... no scrollbar.
I tried to create two different divs (one for a menu, with pages etc. (class: "row") and other for user stuff (settings, inbox, profile etc.) (class: "row2"))).
HTML:
<body>
<!-- HEADER, LOGO, SLOGAN, HR -->
<header>
<h1>PTRN</h1>
<h2>something</h2>
<hr class="headerhr">
</header>
<!-- SIDE BAR 1 -->
<div class="container">
<div class="row">
#1
#2
#3
#4
#5
#6
#7
#8
#9
#10
<div class="searchbar">
<p class="searchplaceholder">Search</p>
</div>
</div>
</div>
<!-- SIDE BAR 2 -->
<div class="container2">
<img class="menu1" src="file:///C:/Users/calex/Downloads/download.%20(1).jpg">
<div class="row2">
Inbox
Notifications
Meetings
Inbox
<p class="shared">Shared</p>
Documents
Photos
<div class="row2_2">
Settings
Help & Contact
</div>
</div>
<!-- POST SAMPLE -->
<div class="container3">
<img src="https://tiffanieanne.com/wp-content/uploads/2020/08/Batter-Spencer-Best-Views-in-San-Francisco-SF-Instagram-Worthy-Photo-Spots-SF-Photography-tiffanieanne.com_-768x954.jpg" alt="San Francisco, CA, USA">
<div class="container4">
<p class="username_post">Chita Cosmin</p>
<p class="jobb">Founder & CEO of Pictoren Platforms, Inc. since 2020</p>
<img class="prpic" src="https://images.unsplash.com/photo-1540512663861-0dcbe11ab7a3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDE1fHx8ZW58MHx8fHw%3D&w=1000&q=80" alt="Profile Pic">
<div class="container5">
<b class="fakebutton">Info</b>
</div>
</div>
</div>
CSS:
#import url("https://cdn.jsdelivr.net/npm/bootstrap-icons#1.3.0/font/bootstrap-icons.css");
/* BODY */
body {
margin: 0;
padding: 0;
font-family: Helvetica, Sans-Serif;
background: #a9c4db;
}
/* BACKGROUND NOTE: #acb6b7 */
/* LOGO AND SLOGAN */
h1 {
font-size: 50px;
text-transform: uppercase;
font-weight: 900;
letter-spacing: 7px;
position: absolute;
top: 6%;
left: 50%;
transform: translate(-50%,-50%);
margin: 0;
background: url(https://data.whicdn.com/images/342108134/original.gif);
background-size: cover;
-webkit-text-fill-color:transparent;
-webkit-background-clip:text;
}
h2 {
font-size: 10px;
font-weight: 900;
letter-spacing: 2px;
position: absolute;
top: 70px;
left: 49.5%;
transform: translate(-50%,-50%);
margin: 0;
background: url(https://data.whicdn.com/images/342108134/original.gif);
background-size: cover;
-webkit-text-fill-color:transparent;
-webkit-background-clip:text;
}
/* HEAEDER SEPARATOR */
.headerhr {
border: none;
height: 3px;
width: 40.6cm;
background-color: #9700FF;
margin-top: 90px;
}
/* HEADER */
header {
display: flex;
flex-wrap: wrap;
height: 90px;
background-color: black;
justify-content: space-between;
align-items: center;
}
/* SIDE BAR 1 */
.container {
position: fixed;
top: 110px;
left: 40px;
background-color: white;
height: 800px;
width: 280px;
border-radius: 22px;
overflow: auto;
}
.row {
display: flex;
flex-direction: column;
font-size: 15px;
position: fixed;
left: 87px;
top: 190px;
overflow: auto;
}
.row a:link {
color: black;
background-color: transparent;
text-decoration: none;
}
.searchbar {
position: fixed;
background-color: #f9f9f9;
border-radius: 5px;
border-style: solid;
border-width: 2px;
border-color: #d9d9d9;
z-index: 4000;
top: 150px;
width: 180px;
height: 37px;
top: 135px;
overflow: auto;
}
.searchplaceholder {
position: fixed;
font-size: 13px;
color: #8a8a8a;
top: 135px;
left: 95px;
overflow: auto;
}
.container bi-house {
position: absolute;
left: 50%;
size: 250px;
}
/* SIDE BAR 2 */
.container2 {
position: fixed;
top: 110px;
right: 40px;
background-color: white;
height: 800px;
width: 280px;
border-radius: 22px;
overflow: auto;
}
.row2 {
display: flex;
flex-direction: column;
font-size: 18px;
position: fixed;
right: 180px;
overflow: auto;
}
.row2 a:link {
color: black;
background-color: transparent;
text-decoration: none;
}
.shared {
opacity: 40%;
color: black;
font-size: 14px;
}
.row2_2 {
display: flex;
flex-direction: column;
font-size: 18px;
position: fixed;
right: 160px;
bottom: 50px;
overflow: auto;
}
.menu1 {
position: fixed;
max-width: 100%;
max-height: 100%;
float: right;
border-radius: 22px;
margin-top: 0%;
z-index: 2000;
margin-left: 1%;
border-width: 1px;
border-color: white;
overflow: auto;
}
/* POST SAMPLE */
.container3 {
position: absolute;
top: 2px;
right: 147%;
background-color: white;
height: 700px;
width: 640px;
border-radius: 22px;
}
img {
max-width: 100%;
max-height: 100%;
float: right;
margin-top: 15.43%;
border-radius: 22px;
margin-right: 5.6%;
border-width: 1px;
border-style: solid;
border-color: #efeded;
}
.container4 {
position: absolute;
top: 24px;
right: 5%;
background-color: white;
height: 70px;
width: 570px;
border-radius: 22px;
border-width: 2px;
border-style: solid;
border-color: #efeded;
z-index: 999;
}
.username_post {
position: fixed;
font-size: 18px;
font-weight: 600;
right: 860px;
top: 137px;
overflow: auto;
}
.prpic {
position: fixed;
max-width: 10%;
max-height: 10%;
float: left;
top: -100px;
left: 500px;
border-radius: 100%;
clip-path: circle();
overflow: auto;
}
.jobb {
position: fixed;
color: #878787;
font-size: 13px;
top: 165px;
left: 561px;
overflow: auto;
}
.fakebutton{
position: fixed;
font-size: 17px;
transform: translate(-50%,-50%);
margin: 0;
background: url(https://data.whicdn.com/images/342108134/original.gif);
background-size: cover;
-webkit-text-fill-color:transparent;
-webkit-background-clip:text;
top: 174px;
right: 500px;
z-index: 1001;
overflow: auto;
}
.container5 {
position: absolute;
z-index: 1000;
background-color: white;
height: 30px;
width: 65px;
border-radius: 17px;
border-width: 2px;
border-style: solid;
border-color: #9700FF;
right: 12px;
top: 19px;
}
If you want 'overflow' to work, then try adding 'max-height' property to that element in your css code.
i tried making an easy working clock but i have no idea how to get the clock hands to rotate. i tried to use "#keyframes" to try to get it working but i dont know what to put in "before". is there a way to make it rotate using only css or will using javascript be easier. the link below shows my work but you can also look below and see my code.
https://codepen.io/dior44/pen/GRZMZdy
h1 {
margin: -40px 0 0 0;
font-size: 50px;
position: relative;
top: 100px;
}
div {
margin: 0 auto;
}
.clock {
height: 400px;
width: 400px;
border-radius: 400px;
background: #cccc;
}
.dot {
height: 60px;
width: 60px;
border-radius: 60px;
background: #aaa;
position: relative;
top: 120px;
left: -27px;
z-index: -1;
}
.hours {
width: 7px;
height: 90px;
background: blue;
position: relative;
top: 100px;
}
.minutes {
width: 5px;
height: 170px;
background: black;
position: relative;
top: -50px;
}
.seconds {
width: 3px;
height: 220px;
background: red;
position: relative;
top: -10px;
animation-name: second;
animation-duration: 1s;
}
#keyframes second {
from {
}
}
h2 {
position: relative;
top: 45px;
left: 738px;
font-size: 35px;
margin: -20px 0 0 0;
}
h3 {
margin: -140px 0 0 0;
font-size: 35px;
position:relative;
top: 310px;
left: 920px;
}
h4 {
margin: 3px 0 0 0;
position: relative;
top: 268px;
left: 570px;
font-size: 35px;
}
h5 {
margin: 20px 0 0 0;
position: relative;
top: 400px;
left: 738px;
font-size: 35px;
}
<h1>Clock</h1>
<h2>12</h2>
<h3>3</h3>
<h4>9</h4>
<h5>6</h5>
<body>
<div class="clock">
<div class="hours">
<div class="minutes">
<div class="seconds">
<div class="dot">
<div class="12">
<div class="3">
<div class="6">
<div class="9">
</body>
Pure HTML/CSS second hand:
#clock_container {
position: absolute;
top: 20px;
left: 20px;
width: 150px;
height: 150px;
border-radius: 50%;
border: 2px solid black;
}
#seconds {
height: 50%;
width: 0px;
box-sizing: border-box;
border: 1px solid black;
top: 0%;
left: 50%;
position: absolute;
transform-origin: bottom;
/* of-course, would be 60s */
animation: secondsMotion 10s infinite linear;
}
#keyframes secondsMotion {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div id="clock_container">
<div id="seconds"></div>
</div>
If you wanted to start with the correct time - with a little JS early on:
var sec = new Date().getSeconds();
var sec_start = (sec/60) * 360 + 'deg';
var sec_end = (sec/60) * 360 + 360 + 'deg';
document.documentElement.style.setProperty("--sec-rot-start", sec_start);
document.documentElement.style.setProperty("--sec-rot-end", sec_end);
and then, in the keyframes:
#keyframes secondsMotion {
0% {
transform: rotate(var(--sec-rot-start));
}
100% {
transform: rotate(var(--sec-rot-end));
}
}
I make a side pull-down menu. Does not work. Please tell me what the problem is
The menu does not open and does not display any errors. I have already tried everything that I could and zero result.
function left_menu(selector){
let menu = $(selector);
let button = menu.find('.left_menu_button');
let links = menu.find('.left_menu_link');
let overlay = menu.find('.left_menu_close_container');
button.on('click', (e) => {
e.preventDefault();
loggleMenu();
});
links.on('click', () => loggleMenu());
overlay.on('click', () => loggleMenu());
function loggleMenu(){
menu.toggleClass('left_menu_main_div_active');
if(menu.hasClass('left_menu_main_div_active')){
$('body').css('overflow', 'hidden');
}else{
$('body').css('overflow', 'visible');
}
}
}
left_menu('.left_menu_main_div');
.left_menu_button{
position: absolute;
left: 10px;
z-index: 30;
width: 50px;
height: 50px;
border-radius: 50%;
}
.left_menu_button:hover .left_menu_span{
background-color: black;
width: 35px;
height: 5px;
transition: 0.4s;
}
.left_menu_button:hover .left_menu_span::after{
background-color: black;
width: 35px;
height: 5px;
transition: 0.4s;
margin-top: 2px;
}
.left_menu_button:hover .left_menu_span::before{
background-color: black;
width: 35px;
height: 5px;
transition: 0.4s;
margin-top: -2px;
}
.left_menu_span,
.left_menu_span::after,
.left_menu_span::before{
position: absolute;
width: 30px;
height: 4px;
background-color: #1f1a1e;
}
.left_menu_span{
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.left_menu_span::before{
content: '';
top: -10px;
}
.left_menu_span::after{
content: '';
top: 10px;
}
.left_menu_main_div_active .left_menu_span{
background-color: transparent;
}
.left_menu_main_div_active .left_menu_span::before{
top: 0;
transform: rotate(45deg);
}
.left_menu_main_div_active .left_menu_span::after{
top: 0;
transform: rotate(-45deg);
}
.left_menu_nav{
padding-top: 55px;
position: fixed;
z-index: 20;
display: flex;
flex-flow: column;
height: 100%;
width: 20%;
background-color: #2a2a2a;
overflow-y: auto;
left: -100%;
}
.left_menu_main_div_active .left_menu_nav{
left: 0;
}
.left_menu_link{
text-align: center;
padding: 10px;
font-size: 12px;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 5px;
font-weight: bold;
color: white;
margin-top: 10px;
}
.left_menu_link:hover{
filter: brightness(0.7);
border: 1px solid black;
border-radius: 3px;
transition: 0.7s;
}
.left_menu_close_container{
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
}
.left_menu_main_div_active .left_menu_close_container{
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="left_menu_container">
<div class="left_menu_main_div">
<a href="#" class="left_menu_button">
<span class="left_menu_span"></span>
</a>
<nav class="left_menu_nav">
Инвентарь
Персонаж
Ремесло
Охота
</nav>
<div class="left_menu_close_container"></div>
</div>
</div>
Shouldn't function loggleMenu( be function ToggleMenu(?
Also where are you loading the script in the html?
Pop a few console.Log() calls into the script and see where it gets up to or fails.
The Element is not resizing and browser is not re-calculating the position of the Element even though all the widths and heights are mentioned in percentages only. This code basically renders a Squared DIV with Two elements one with Centered and another at right top corner of the SQuare.
<html>
<head>
<style>
.board {
font-size: 8em;
}
.cellContainerOuter {
width: 100%;
padding-bottom: 100%;
position: relative;
background-color: yellow;
border: 1px solid black;
}
.cellContainer {
width: 100%;
padding-bottom: 100%;
position: absolute;
display: table;
}
.cellContainerInner {
padding-bottom: 50%;
padding-top: 50%;
padding-left: 50%;
padding-right: 50%;
position: relative;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.text {
border: 0px dotted white;
position: absolute;
bottom: 20%;
top: 20%;
left: 20%;
right: 20%;
overflow: hidden;
text-overflow: clip;
display: block;
}
.weight {
position: absolute;
right: 0px;
top: 0px;
margin: 2px;
border: 1px solid white;
}
</style>
</head>
<body>
<div class="board">
<div id="cell3_C_1" class="cellContainerOuter" title="ఇ">
<div id="cell2_C_1" class="cellContainer" title="ఇ">
<div id="cell_C_1" class="cellContainerInner" title="ఇ">
<span id="weight_C_1" class="weight" title="6">6</span>
<span id="text_C_1" class="text" title="ఇ">ఇ</span>
</div>
</div>
</div>
</div>
</body>
</html>
Any help to resolve this issue is highly appreciated.
CodePen: https://codepen.io/mdileep/full/MGrNgw/
Refactored your CSS.
Let me know if this is the behaviour you are expecting.
OR with responsive you mean to change your height of 6 as well?
body {
margin: 0;
}
.cellContainer {
position: relative;
background: yellow;
width: calc(100vw - 20px);
height: calc(100vh - 20px);
margin: 10px;
}
.cellContainerInner {
border: 1px solid;
height: 100%;
display: flex;
}
.weight {
font-size: 8em;
position: absolute;
right: 0px;
top: 0px;
border: 1px solid;
}
.text {
flex: 1;
font-size: 8em;
/* border:2px solid; */
align-self: center;
text-align: center;
}
<div class="board">
<div id="cell3_C_1" class="cellContainerOuter" title="ఇ">
<div id="cell2_C_1" class="cellContainer" title="ఇ">
<div id="cell_C_1" class="cellContainerInner" title="ఇ">
<span id="weight_C_1" class="weight" title="6">6</span>
<span id="text_C_1" class="text" title="ఇ">ఇ</span>
</div>
</div>
</div>
</div>
This is what I am trying to achieve:
This is what my code produces:
.line {
position: relative;
background-color: #f1f1f1;
width: 34%;
height: 2px;
bottom: 36px;
left: 33%;
}
How can I adjust my code to make this line responsive?
Demo: https://jsfiddle.net/kc1tbu8x/2/
Html:
<div class="wrapper">
<div class="step1">
<hr/>
</div>
<div class="step2">
<div class="step2_circles">1</div>
<div class="step2_circles">2</div>
<div class="step2_circles">3</div>
</div>
</div>
Css:
.wrapper{
width:30%;
height:40px;
display:block;
position:relative;
}
.step1{
width:98%;
z-index:-9999;
position:absolute;
top:25%;
display:block;
margin:auto;
}
.step2{
width:100%;
display:flex;
display:-webkit-flex;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.step2_circles{
width:40px;
height:40px;
border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
-webkit-border-radius: 50%;
-ms-border-radius: 50%;
background:#ff0000;
text-align:center;
line-height:40px;
}
Demo: https://jsfiddle.net/kc1tbu8x/2/
There is another way, but the flexbox solution above I think is good.
Demo: http://codepen.io/anon/pen/XppLjW
HTML:
<div class="steps">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
CSS:
.steps {
width: 100%;
height: 80px;
max-width: 80%;
margin: 3em auto;
text-align: center;
position: relative;
}
.steps::before {
left: 0;
top: 50%;
content: '';
width: 100%;
height: 1px;
display: block;
position: absolute;
background-color: #e5e5e5;
}
.steps span {
width: 80px;
height: 80px;
line-height: 80px;
border-radius: 50%;
text-align: center;
position: absolute;
display: inline-block;
background-color: #d4d4d4;
}
.steps span:first-child {
left: 0;
}
.steps span:nth-child(2) {
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.steps span:last-child {
right: 0;
}
Try, it's good example
<div class="container">
<div class="number">1</div>
<div class="number">2</div>
<div class="number">3</div>
</div>
.container {
display: flex;
justify-content: space-between;
position: relative;
}
.container:before {
content: '';
display: block;
height: 2px;
width: 100%;
position: absolute;
top: 50%;
margin-top: -1px;
background:red;
}
.container .number {
width: 20px;
height: 20px;
border-radius: 50%;
background: blue;
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 10;
}
JSfiddle example https://jsfiddle.net/4j07gbrd/
.line
{
z-index:5;
position: relative;
background-color: #f1f1f1;
width: 34%;
height: 2px;
bottom: 36px;
left: 33%;
}
.yourcircle class
{
z-index:4;
}
you can add mediaqueries to mobile , because stripe can not be 33% center on mobile (whole line 90%)