The image is moving depending on the size of the screen, I would like to fix it on the top middle. How do I do it? Here is 2 screenshots explaining:
HTML:
<div class="logo"></div>
CSS:
.logo {
background:url(../img/logo.png) no-repeat;
position:absolute;
display: inline-block;
left:50%;
top:30%;
height:120px;
width:175px;
margin:-115px 0px 0px -112px;
}
You could use translate:
.logo {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
height:120px;
width:175px;
background:url(../img/logo.png) no-repeat;
}
jsFiddle
You can use calc function in CSS.
Resize your window to see it's effect (in fullscreen).
.logo{
position: absolute;
width: 175px;
height: 120px;
top: 30%;
left: calc(50% - (175px / 2)); /* 50% parent width - half_of_image_width */
border: 1px solid red;
}
.container{
position: absolute;
width: 90%;
height: 90%;
border: 1px solid black;
}
<div class="container">
<div class="logo"></div>
</div>
Related
The following image will be helpful.
Consider a traditional centered wrapper with max-width.
Then wrapper has 2 columns using 40% and 60% of the wrapper respectively (random number that isn't 50%).
Is there a way to stretch the divs outter limit to match the window borders without Javascript - while the inner limits respect the wrapper reference?
This unfortunatelly doesn't work:
#div1{
left: 0vw;
right: 40%; /*of .wrapper */
}
#div2{
left: 40%; /*of .wrapper */
right: 100vw;
}
Solution with JS (poorly written): https://jsfiddle.net/sirojuntle/ktvap86c/12/
The idea is to make smaller desktop layout looks better in larger screens.
Thanks
Because your wrapper is position: relative; half your job is already done. Even with position: absolute; your divs still take the wrapper as their parent co-ordinates.
With that in mind, it's easier than you think.
.div1{
right: 60%; /* is 40% from the left, like your picture */
left: calc(50% - 50vw)
}
.div2{
left: 40%;
right: calc(50% - 50vw)
}
You can play with negative margin
.wrapper {
--m: min(0px, (800px - 100vw)/2);
}
.row1 {
width: calc(40% - var(--m));
margin-left: var(--m);
}
.row2 {
width: calc(60% - var(--m));
margin-right: var(--m);
margin-left:auto;
}
Full code:
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.wrapper {
--m: min(0px, (800px - 100vw)/2);
border: 3px solid pink;
max-width: 800px;
background-size: 10%;
background-image: linear-gradient(90deg, #000, #0000 5%);
margin:auto;
}
.row1 {
background-color: red;
min-height: 100px;
width: calc(40% - var(--m));
margin-top: 20px;
margin-bottom: 20px;
margin-left: var(--m);
}
.row2 {
background-color: darkred;
width: calc(60% - var(--m));
margin-left:auto;
margin-right: var(--m);
min-height: 100px;
}
<div class="wrapper" id="wrapper">
<div class="row1" id="ref">
There is a way to stretch this with CSS?
</div>
<div class="row2" id="ref2">
And that?
</div>
</div>
I was ask to create half circle-like design for my project in html css , its look like this :
Figma Design but it really ""zoomed"in.
i tried to make it and the closest i could look like this :
My Closest
with this code :
.semi-circle {
transform: translate(0, 0);
height: 150px;
width: 100%;
border-radius: 0 0 150px 150px;
/* border-radius: 0 0 150px 150px; */
background-color: #0E47A1;
}
<div class="semi-circle"></div>
what can i tweak and how to make it like the designed one
Heres some idea for you. you can set it to transform then rotate it at the same time put a fake div at the top so you can cover all remaining blue. Let me know.
body {background-color:lightgrey;}
.semi-circle {
height: 200px;
width: 200px;
border-radius : 50%;
background-color: #0E47A1;
margin-top:0px;
transform: scale(1.5) rotateX(105deg);
overflow:hidden;
align-items:center;
margin-left:50px;
}
.box {
width: 300px;
height: 800px;
border:1px solid gray;
background-color:white;
}
.blue {
background-color:#0E47A1;
height:100px;
}
.whitebox {
width:220px;
height:40px;
line-height:1;
margin:0 auto;
box-shadow: 2px 2px 4px 2px gray;
text-align:center;
padding:10px;
border-radius:20px;
position:absolute;
top:120px;
left:40px;
background-color:white;
}
<body>
<div>Home</div>
<div class="box">
<div class="blue">
<div class="semi-circle"></div>
<div class="whitebox">Hello Visitors!
<span>this is the hidden text......</span>
</div>
</div>
</div>
</body>
I have used ::after to create the effect, you can change the height get desired curve.
.curve{
position: relative;
width: 300px;
height: 200px;
margin: auto;
overflow: hidden;
}
.curve::after{
content: "";
position: absolute;
top: 0px;
left: 50%;
border-radius:50%;
background: blue;
width:500px;
height:300px;
transform: translate(-50%, -50%);
}
<div class="curve"></div>
This looks like the example. It is responsive and will fit like that on any screen.
.semi-circle {
transform: translate(0, 0);
height: 150%;
width: 150%;
border-radius: 50%;
/* border-radius: 0 0 150px 150px; */
background-color: #0E47A1;
position: absolute;
top: -90%;
left: -22.5%;
}
body {
overflow: hidden;
}
<div class="semi-circle"></div>
I am having an issue centring a <div id='divTwo'> inside another <div id='divOne'>. This is normal an easy thing to do, however in this instance i have transform: scale(); with transform-origin: 50% 50% 0px; applied on 'divTwo'
#divOne {
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
#divTwo {
width: 1024px;
height: 768px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
border-left: 131px solid #333333;
border-right: 131px solid #333333;
border-top: 47.5px solid #333333;
border-bottom: 47.5px solid #333333;
border-radius: 55px;
}
if the scale applied to the transform and the window is larger than the outerWidth(), 'divTwo' has no issue centring. However when the 'divTwo' is scaled and the window is smaller or equal to the outerWidth(). The div will no longer centre, instead it will place its centre point to be right side of the browser, resulting if half the of 'divTwo' being off the right hand-side of the browser. Changing transform-origin: 50% 50% 0px; to transform-origin: 0% 50% 0px; works so long as you don't scale vertically, and vice versa.
jsfiddle example : https://jsfiddle.net/yvyz49zp/
Thank you. I feel like am missing something of obvious.
I knocked this up relatively quickly in jsfiddle - no javascript needed. Just play around with the values until you get something you like.
Code:
body {
background: lightblue;
}
#container {
display: inline-block;
position: absolute;
width: 50%;
right: 50%;
top: 50%;
transform: translate(50%, -50%);
}
#dummy {
margin-top: 75%; /* Using the dummy is the trick - it locks the aspect ratio (at 4:3 in this case) */
}
#device {
position: absolute;
top: 10%;
bottom: 10%;
left: 0;
right: 0;
background-color: #333;
border-radius: 10%;
}
#screen {
position: absolute;
width: 70%;
height: 80%;
background: #0f0;
right: 50%;
top: 50%;
transform: translate(50%, -50%);
}
<div id="container">
<div id="dummy"></div>
<div id="device">
<div id="screen"></div>
</div>
</div>
Suppose I have a div:
div {
height: 100px;
width: 500px;
background: blue;
margin: 0 auto;
}
And I want it to become two mode - skew to each side -
Here is the base form - http://jsfiddle.net/urielz/neybabgj/
How could I get the above two forms?
Update :
If it required using JavaScript - do it.
JSiddle Demo
CSS
div {
height : 100px;
width : 500px;
background : blue;
margin : 10px auto;
position: relative;
}
div:first-child:before {
position: absolute;
top:0;
right:100%;
width:0;
height:0;
content:'';
border:50px solid blue;
border-top-color:transparent;
border-left-color:transparent;
}
div:nth-child(2):after {
position: absolute;
top:0;
left:100%;
width:0;
height:0;
content:'';
border:50px solid blue;
border-bottom-color:transparent;
border-right-color:transparent;
}
HTML
<div class="crop">
<div class="skew"></div>
</div>
CSS
.crop {
width: 492px;
height: 240px;
overflow: hidden;
}
.skew {
display: block;
height : 100px;
width : 500px;
background : blue;
margin : 0 auto 0 32px;
position:relative;
-webkit-transform: skew(-30deg);
-moz-transform: skew(-30deg);
-ms-transform: skew(-30deg);
transform: skew(-30deg);
}
.skew:after {
height : 100px;
width : 500px;
background : blue;
margin : 0 auto;
position:absolute;
bottom: -120px;
content:'';
}
Fiddle: http://jsfiddle.net/neybabgj/7/
I'm using a div, and inside that div another div which needs to stick to the parent div.
But when i rescale the browser there's it's not sticking to the right place. Do i need to do this with javascript?
HTML
<div class="block">
White div block
<div class="block-content">
Green div
</div>
</div>
CSS
.block {
position: relative;
width: 100%;
height: 100%;
background-image: url('voorgrond.png');
background-repeat: no-repeat;
background-position: 70% center; /* positie van de screen */
}
.block-content {
position: absolute;
left: 65%;
top: 42%;
width: 200px;
height: 200px;
}
The green dot should stick inside the white square.
LIVE DEMO
<div class="block">
<div class="block-content"></div>
</div>
.block {
position: absolute;
background:#fff;
border-radius:10%;
width: 200px;
height: 200px;
padding:50px;
left: 65%;
top: 50%;
margin-top: -150px;
margin-left: -150px;
}
.block-content {
position: absolute;
background: #00A652;
border-radius:50%;
width: 200px;
height: 200px;
}
#media (max-width: 600px) {
.block{
left: 50%;
}
}
Assuming your goal is the image I made this fiddle which mimics what you seem to need.
FIDDLE
HTML:
<div class="block">
<div class="block-content">
Hierzo!
</div>
</div>
CSS:
.block{
position:relative;
margin: 300px 0 0 50%;
width:30%;
height:80px;
background:grey;
border-radius:10px;
}
.block-content{
width:50px;
height:50px;
background:green;
border-radius:50px;
position:absolute;
top:50%;
left:50%;
margin: -25px 0 0 -25px;
}
Hope this helps!
EDIT Added responsive width to .block