I'm trying to develop a mini game where you click the Dot and the Position will be randomly generated and the size of the Dot will shrink the more you click it. The border can also be scalable depending from its device.
Any suggestion/Ideas in how can I scale the Dot within the borders without going over the line?
Here is my simple code:
.Box{
position: relative;
box-sizing: border-box;
border: 1px solid black ;
height: 700px;
width: auto;
margin: 2%;
padding: 0px;
}
.Dot{
position: absolute;
background-color:red;
border-radius: 50%;
width: 20px;
height: 50px;
left: 5px;
top: 96%;
}
<html>
<body>
<div class="Box">
<div class="Dot"></div>
</div>
</body>
</html>
If your dot is 50px tall and wide you can put a padding of half of the size around the main box, in this case it'll be 25px of padding.
Then you can add another div inside the box which will be 100% of the box's height and width, set it's position as a relative and have the dot move inside the inner container.
As long you keep consistently the size of the dot and padding of the box half of the dot size the dot will never overflow outside its parent containers.
*, *::before, *::after {
box-sizing: border-box;
}
.Box{
border: 1px solid black;
height: 700px;
width: auto;
margin: 2%;
padding: 25px;
}
.Inner{
position: relative;
height: 100%;
width: 100%;
}
.Dot{
position: absolute;
background-color:red;
border-radius: 50%;
width: 50px;
height: 50px;
left: 5px;
top: 96%;
}
<html>
<body>
<div class="Box">
<div class="Inner">
<div class="Dot"></div>
</div>
</div>
</body>
</html>
Related
Maybe you can help me. Specifically, I want that the text is always in the same container position depending on the screen resolution. Are there any solutions for this? Do I need a JS function for this? I don't know what to search in order to fix this…
<style>
.logoBar {
border: 1px solid;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
br {
line-height: 10%;
}
.container{
border: 1px solid;
width: 90%;
height:90%;
min-width: 960px;
display:block;
margin-left: auto;
margin-right: auto;
top: 50%;
}
img {
max-width: 100%;
max-height: 100%;
}
#text {
z-index: 100;
position: absolute;
top: 29.5%;
left: 11%;
font-size: 115%;
font-family: Arial, Helvetica, sans-serif;
}
.divider{
width: 2%;
height: auto;
display: inline-block;
}
</style>
<body>
<script>
$(document).ready(function() {
//Call a variable to know the width of the window
var screenWidth = $(window).width();
$('container').css('width', screenWidth + 'px');
});
</script>
<div class="logoBar">
<img src="picture1.png" style="height: 15%; width: 15%">
<div class="divider"></div>
<img src="Log-05.png" style="height: 15%; width: 15%">
</div>
<br></br>
<div class="container">
<center><img src="Picture.png"></center>
<p id="text">20.5</p>
</div>
</body>
I would be very grateful for any kind of help.
Probably the solution is quite simple.
You are on the right track using %s to position the text box(es).
We do absolutely everything that we can in terms of % of width and height of the image. That way responsiveness is automatic.
There is no need to use Javascript. Measure the width and height of the image, the distance down and to the left of the 3 text boxes and the width and height of a text box and put the measurements into CSS variables. CSS can then calculate the correct % top, bottom, width and height as needed. It doesn't matter what units you use to do this measurement, as long as the same unit is used for all of them.
This snippet has measurements to give the idea. You may want to re-measure everything to get better accuracy.
The one outstanding thing that requires thought is the font size. This needs to be responsive rather than be defined in px etc. It is set to 1vw.
The minimum width requirement of the img has been removed so that the image can be seen in its entirety on smaller devices (the user can always zoom if they want). If the minimum is reinstated then there will have to be further thought on the font size to stop it decreasing not in relation to the img size.
<head>
<style>
* {
margin: 0;
padding: 0;
}
.logoBar {
border: 1px solid;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
br {
line-height: 10%;
}
.container{
border: 1px solid;
width: 90%;
height: auto;
/*min-width: 960px;*/
display:block;
margin-left: auto;
margin-right: auto;
position: relative;
box-sizing: border-box;
--w: 1354;
--h: 665;
--x: 106;
--boxw: 113;
--boxh: 20;
--yvib: 230;
--ytemp: 294;
--yspeed: 354;
}
img {
width: 100%;
height: auto;
}
#vib {
--y: var(--yvib);
}
#temp {
--y: var(--ytemp);
}
#speed {
--y: var(--yspeed);
}
.text {
z-index: 100;
position: absolute;
text-align: center;
padding: 2px;
font-size: 1vw;
width: calc((var(--boxw) / var(--w)) * 100%);
height: calc((var(--boxh) / var(--h)) * 100%);
font-family: Arial, Helvetica, sans-serif;
top: calc((var(--y) / var(--h)) * 100%);
left: calc((var(--x) / var(--w)) * 100%);
color: red;
}
.divider{
width: 2%;
height: auto;
display: inline-block;
}
</style>
</head>
<body>
<!-- The top bit commented out as the question is about the main image not this bit
<div class="logoBar">
<img src="picture1.png" style="height: 15%; width: 15%">
<div class="divider"></div>
<img src="Log-05.png" style="height: 15%; width: 15%">
</div>
<br></br>
-->
<div class="container" onclick="console.log(event);">
<img src="https://i.stack.imgur.com/I9R3S.png">
<div id="vib" class="text">20.5</div>
<div id="temp" class="text">100</div>
<div id="speed" class="text">50</div>
</div>
</body>
I am making a simple card, where an array creates the number of squares. The objective is that the squares fit the div, no matter the number. Ex: if in the div there are only 2 squares, the size of the squares is bigger to fit the div. If the div have like 5 squares, they should resize to fit inside de div, and so go on.
I spent hours and hours trying to create that i and couldnt.
I have the code in thje editor if anyone want to see it:
https://stackblitz.com/edit/angular-ivy-kdapqa?file=src/app/app.component.css
When the order array, have like only 1 object, the square should fit the div squares. If the order have two objects. The two squares must be 50% of the div and so go on.
I dont know if i am expalining this right or not, but the squares should be responsive to the div
body{
width: 100%;
height: 100%;
}
#card{
position: relative;
height: 300px;
margin: auto;
width: 400px;
border-radius: 25px;
}
#background{
position: absolute;
width: 100%;
height: 100%;
background-color: #5e8d93;
border-radius: 10px;
}
#cardDescription{
position: absolute;
top: 5%;
width: 90%;
margin: 0;
right: 5%;
z-index: 11;
height: 50px;
bottom: 20px;
}
#squares{
border-top: 1px solid white;
position: absolute;
width: 100%;
z-index: 10;
text-align: center;
margin: 0 auto;
top: 30%;
height: 100%;
}
.square{
height: 50px;
width: 50px;
background-color: white;
border: 1px solid #1e2023;
margin: 5px;
display: inline-block
}
<body>
<div id="card">
<div id="background"></div>
<p id="cardDescription" color="primary" style="text-align: center; font-size: 20px;color: white;font-weight: bold">
tittle
</p>
<div id="squares">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<p id="companyName" color="primary" style="text-align: center; font-size: 15px;color: white">
restaurant
</p>
</div>
</body>
function fun(){
var x = document.getElementsByClassName("square").length;
var y = 100/x;
var myDiv = document.getElementsByClassName("square");
myDiv.setAttribute("style", "width: "+y+"%; height:"+y+"%;");
}
Add this function in the <script> tag and change<body onload="fun()">
Hope this works
I want to create a slider for progress
if say it's at 1% how can I calculate the right px/% for the border-radius?
when it's a big % it looks good
<div style="background: grey; height: 25px; border-radius: 12.5px; width: 100%">
<div style="background: green; height: 25px; border-radius: 12.5px; width: 15%" />
</div>
when it's small like 1% it looks like this
<div style="background: grey; height: 25px; border-radius: 12.5px; width: 100%">
<div style="background: green; height: 25px; border-radius: 12.5px; width: 1%" />
</div>
try adding:
overflow: hidden;
for your green filler. It will hide inside the container. What you're trying to do is close to impossible. Can you imagine adding a border-radius on an element that is < 2px in width?
<div style="background: grey;
height: 25px;
border-radius: 12.5px;
width: 100%;
overflow: hidden;">
<div style="background: green;
height: 25px;
border-radius: 12.5px;
width: 1%" />
</div>
A 1% is supposed to look small in my opinion. just add overflow: hidden to your parent div, then that should look better.
<div style="overflow:hidden; background: grey; height: 25px; border-radius: 12.5px; width: 100%">
<div style="background: green; height: 25px; border-radius: 12.5px; width: 1%" />
</div>
If you would like to completely keep the radius of the progress bar, you may try cloning a same element as the progress bar container and set its left.
This example is working with Javascript or you may use pure css only by editing its left.
Please see if this is your another good choice as well.
set_progress(2); // percentage of progress
function set_progress(p) {
$('.progress-container span').css('left', (p-100)+'%');
}
.progress-container {
position: relative;
display: block;
width: 100%;
height: 24px;
background-color: #555;
border-radius: 12px;
overflow: hidden;
}
.progress-container > span {
position: absolute;
display: block;
top: 0;
left: -100%;
width: 100%;
height: 24px;
background-color: #0c0;
border-radius: 12px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="progress-container">
<span></span>
</div>
You are losing the border-radius because you are altering the width of your green progress element.
Instead, if you set the green div to the same 100% width, you can represent the progress by using CSS transform to move the green div to the left.
transform: translateX(-90%);
This is the value you want to change to update the progress, use inverse value, so -90% is really 10% of progress (100 - 10 = 90) and so on.
Use overflow: hidden; on the outer div to hide the extra green.
.progress-bar {
overflow: hidden; /* hide the green that overflows */
background: grey;
height: 25px;
width: 100%;
border-radius: 12.5px;
}
.progress {
display: block;
background: green;
height: 100%;
width: 100%; /* same width as outer div */
border-radius: 12.5px;
transform: translateX(-90%); /* this is the value you want to change to update the progress, use inverse value, so -90% is really 10% of progress (100 - 10 = 90) */
}
<div class="progress-bar">
<div class="progress"></div>
</div>
I'm trying to make a fixed box with 980px width and 500px height scrolling inside a div with 100% width and 1500px height, but it is not working at all.
That's what I did: https://jsfiddle.net/zjuyuhmz/2/embedded/result/
The box is moving when the page scrolls, and I want to make scroll only if the mouse is inside of the div.
Is this possible??
Html:
<div id="wrapper">
<div class="main">
<div class="container">
<div class="container2">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</div>
</div>
</div>
</div>
Css:
#wrapper {
position: relative;
width: 100%;
height: 100%;
color: #a3265e;
font-family: 'GillSans-SemiBold';
}
.main {
border: 1px solid red;
position: relative;
width: 100%;
height: 100%;
margin: 0 auto;
padding-top: 380px;
}
.container {
border: 1px solid green;
position: relative;
width: 100%;
height: 500px;
margin: 0 auto;
overflow: scroll;
}
.container2 {
height: 1500px;
margin: 0 auto;
}
.test {
width: 940px;
height: 500px;
position: fixed;
left: 50%;
margin-left: -480px;
background: black;
}
You need to write javascript code, where you can get cursor position and depending on that enable scroll event.
Replace the css for .test for this:
.test {
width: 940px;
height: 500px;
position: absolute;
left: 50%;
margin-left: -480px;
background: black;
}
.test:focus {
position:fixed;
}
This means: when the element with id "test" has the focus on, make it's position fixed. If not, make it's position absolute.
Hello I am trying to keep the links centered of the tan margin. How do I get it centered to the tan margin? I've tried a few things but margins won't move.
Here is the website if you want to visually see the issue:
http://codepen.io/willc86/pen/hpFLe
I am not sure why links don't want to move when I use margin-left or margin-top
css is
#header{
background-color: tan;
width: 90%;
Height: 80px;
margin: auto;
margin-bottom: 30px;
text-align: center;
}
#header a {
margin: 40px;
border: 3px solid green;
}
#box{
border: 3px solid red;
}
#space{
text-align: center;
}
#leftcolumn {
width: 300px; border: 1px solid red; float: left; margin-left: 30px;
}
#mcolumn {
width: 300px; border: 1px solid red; margin: auto;
}
#rightcolumn {
width: 300px; border: 1px solid red; float: right; margin-right: 30px;
}
.clear {
clear: both;
}
#box2{
border: 3px solid green;
margin: 40px;
text-align: center;
}
#bx{
border: 3px solid green;
margin: auto;
width: 200px;
}
#box2{
border: 3px solid green;
margin: 40px;
text-align: center;
}
#margin{
margin: 30px;
}
and my html is
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<div id="header">
Facebook
Google
Yahoo
</div>
<div id="box">
<div id="space">
<div id="leftcolumn"><p>LEFT</p></div>
<div id="rightcolumn"><p>RIGHT</p></div>
<div id="margin">
<div id="mcolumn"><p>mcolomn</p></div>
</div>
<div class="clear"></div>
</div>
</div>
<div id="box2">
<div id="margin">
<div id="bx">
<p> hello what is up
</div>
</div>
</div>
</body>
</html>
Add this to #header
#header {
....
line-height: 80px;
vertical-align: middle;
}
Also check the demo.
Note that this might give trouble if you want to lines of menu.
General tip : always add line-height equal to div's height to align your link in vertical middle position
line-height:80px; in #header a would do the job for you! :)
If you want to align the links vertically:
#header a {
...
line-height: 80px;
}
#header a {
border: 3px solid #008000;
display: inline-block;
margin: 0 40px;
position: relative;
top: 50%;
}
Note: the top: 50% somehow uses height and margin of parent.
You can also do it like this: create a div inside (I've called it links) which you can format away from your other div. The margins don't show because the text is inline, and you can't give inline text a top and bottom margin. Changing it to display: inline-block and position: relative allows you to change the place of the div (if you don't want to set line height). Top: 36% will centre it because this counts the margin (so you want half of 80/110 px, or 4/11 = ~36% (you can make this 50% by adding the margin to the object beneath).
HTML:
<div id="links"> Facebook
Google
Yahoo
</div>
CSS:
#header a {
border: 3px solid green;
margin-left: 40px;
margin-right: 40px;
}
#links {
display: inline-block;
position: relative;
top: 36%;
}
http://codepen.io/anon/pen/vbJkg