I have 2 DIVs, that I want to center and overlap. The smaller one is to lay on top of the bigger one.
It works great at full-screen, but if I decrease the browser size, the top/smaller one moves to the left.
<div style="position: relative; top: 160px; border: thin solid gray; border-radius: 10px; width: 300px; height: 64px; margin-left: auto; margin-right: auto; z-index: 1; background: url(...); background-repeat:no-repeat; background-position:top; background-color: #4b2f84"> </div>
<div style="position: absolute; top: 200px; left: 15%; width: 70%; background: white; border: thin solid gray; border-radius: 10px; height: 500px; padding: 50px 30px; margin: auto">something
</div>
I like to use left: 50%; combined with transform: translateX(-50%); when trying to center and overlap content.
The content is offset 50% to the left, and then -50% of its width to the left.. or (this.left == parent.x + parent.width* 0.5 - this.width*0.5)
#div1 {
position: relative;
top: 160px;
border: thin solid gray;
border-radius: 10px;
width: 300px;
height: 64px;
margin-left: auto;
margin-right: auto;
z-index: 1;
background: url(...);
background-repeat: no-repeat;
background-position: top;
background-color: #4b2f84
}
#div2 {
position: absolute;
top: 200px;
left: 50%;
transform: translateX(-50%);
width: 70%;
background: white;
border: thin solid gray;
border-radius: 10px;
height: 500px;
padding: 50px 30px;
margin: auto
}
<div id="div1"> </div>
<div id="div2">something</div>
Related
Alright so I am trying to a basic overlay over an image but it seems that I am doing something wrong, instead of being width and height 100% of the IMG, it is width and height 100% of the entire page
HTML
<div id="main_BodyNews">
<img src="img/main.png" alt="mainNews" />
<div class="overflow-box"></div>
</div>
And the CSS
#main_BodyNews {
width: 50%;
height: 300px;
background-color: #F2C68C;
margin-top: 50px;
margin-left: 20px;
float: left;
border-radius: 5px;
border: 1px solid #F2C68C;
}
#main_BodyNews img {
width: 100%;
height: 100%;
border-radius: 5px;
background-color: 1px solid #F2C68C;
position: relative;
}
.overflow-box {
position:absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
background-color:rgba(255,255,0,0.5);
width: 100%;
height: 100%;
}
JS fiddle: https://jsfiddle.net/0utbjwo0/
you should add position: relative; to your absolute parent div
#main_BodyNews{
position: relative;
}
#main_BodyNews {
width: 50%;
height: 300px;
background-color: #F2C68C;
margin-top: 50px;
margin-left: 20px;
float: left;
border-radius: 5px;
border: 1px solid #F2C68C;
position: relative;
}
#main_BodyNews img {
width: 100%;
height: 100%;
border-radius: 5px;
background-color: 1px solid #F2C68C;
position: relative;
}
.overflow-box {
position:absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
background-color:rgba(255,255,0,0.5);
}
<div id="main_BodyNews">
<img src="img/main.png" alt="mainNews" />
<div class="overflow-box"></div>
</div>
You can use absolute. It's just that you are setting
width: 100%;
height: 100%;
Remove that and set your margin-top and margin left. You can set your width and height for the actually dimensions of your image. If you do this, you wont have to exactly keep your overlay div within your image div.
Here is an example of one I have made for my site.
#overlay {
margin-top: 60px;
margin-left: 88px;
height: 30px;
width: 85px;
position: absolute;
}
You can temporarily set a background-color for it so that you can get a good idea of where it is placed on your page. Then adjust your margins accordingly.
It's because the position: absolute has top, right, bottom, left value of 0. You don't need to specify the height and width. To make it resize on it's parent size. You need position: relative on parent element.
#main_BodyNews {
width: 50%;
height: 300px;
background-color: #F2C68C;
margin-top: 50px;
margin-left: 20px;
float: left;
border-radius: 5px;
border: 1px solid #F2C68C;
position: relative;
}
#main_BodyNews img {
width: 100%;
height: 100%;
border-radius: 5px;
background-color: 1px solid #F2C68C;
position: relative;
}
.overflow-box {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
background-color: rgba(255, 255, 0, 0.5);
}
<div id="main_BodyNews">
<img src="img/main.png" alt="mainNews" />
<div class="overflow-box"></div>
</div>
Using CSS I'm trying to draw a black circle with a white circle centered within it. This is my HTML/CSS:
#blackcircle {
background-color: black;
color: white;
width: 400px;
height: 400px;
border-radius: 50%;
margin: 0 auto;
}
#whitecircle {
background-color: white;
color: black;
width: 90px;
height: 90px;
border-radius: 50%;
margin: 0 auto;
}
<div id="blackcircle">
<div id="whitecircle"></div>
</div>
BUT as you can see (in Chrome and Firefox), the white circle is centered at the top of the white circle. I've tried various combinations of position:absolute and position:relative to no positive effect.
You can do with positions too, but easiest way is with flexbox:
#blackcircle {
background-color:black;
color:white;
width: 400px;
height: 400px;
border-radius:50%;
text-align:center;
margin: 0 auto;
display: flex;
align-items: center;
}
#whitecircle {
background-color: white;
color: black;
width: 90px;
height: 90px;
border-radius:50%;
margin: 0 auto;
}
<div id="blackcircle">
<div id="whitecircle"></div>
</div>
Since you know the sizes of the circles you can just position them with:
position:relative;
top: 155px;
#blackcircle {
background-color: black;
color: white;
width: 400px;
height: 400px;
border-radius: 50%;
margin: 0 auto;
}
#whitecircle {
background-color: white;
color: black;
width: 90px;
height: 90px;
border-radius: 50%;
margin: 0 auto;
position:relative;
top: 155px;
}
<div id="blackcircle">
<div id="whitecircle"></div>
</div>
Here's another way using positioning and margins.
#blackcircle {
background-color: black;
color: white;
width: 400px;
height: 400px;
border-radius: 50%;
margin: 0 auto;
position:relative;
}
#whitecircle {
background-color: white;
color: black;
width: 90px;
height: 90px;
border-radius: 50%;
position:absolute;
margin:auto;
top:0;
right:0;
bottom:0;
left:0;
}
<div id="blackcircle">
<div id="whitecircle"></div>
</div>
Add position:relative; top:150px; to your whitecircle in css
Here is a working example, perfectly centered:
#blackcircle {
background-color: black;
color: white;
width: 400px;
height: 400px;
border-radius: 50%;
margin: 0 auto;
position:relative;
}
#whitecircle {
background-color: white;
color: black;
width: 90px;
height: 90px;
border-radius: 50%;
margin: 0 auto;
position:absolute;
top:50%;
left:50%;
margin-top:-45px; /* half the height */
margin-left:-45px; /* half the width */
}
https://jsfiddle.net/zoxb3j3j/
Applying position:absolute to inner div and position:relative to the outer div.
HTML:
<div id="blackcircle">
<div id="whitecircle"></div>
</div>
CSS:
#blackcircle {
background-color:black;
color:white;
width: 400px;
height: 400px;
border-radius:50%;
margin: 0 auto;
position: relative;
}
#whitecircle {
background-color: white;
color: black;
width: 100px;
height: 100px;
border-radius:50%;
top:150px;
left:150px;
position:absolute;
}
Fiddle.
Use "position:relative" for the black circle and "position:absolute" for the white circle.
#blackcircle {
background-color: black;
color: white;
width: 400px;
height: 400px;
border-radius: 50%;
margin: 0 auto;
position: relative;
}
#whitecircle {
background-color: white;
color: black;
width: 90px;
height: 90px;
border-radius: 50%;
position: absolute;
left: 40%;
top: 40%;
}
This method of center element base by the position absolute and we set margin top is half of the height of the element and margin left will be half of the width .
replace the margin top , margin left with
transform: translate(-50%, -50%);
will make it dynamic thanks to #Magnus Buvarp
#blackcircle {
background-color: black;
color: white;
width: 400px;
height: 400px;
border-radius: 50%;
margin: 0 auto;
position: relative;
}
#whitecircle {
background-color: white;
color: black;
width: 90px;
height: 90px;
border-radius: 50%;
margin: 0 auto;
position: absolute;
top: 50%;
left: 50%;
margin-top: -40px;
margin-left: -40px;
}
<div id="blackcircle">
<div id="whitecircle"></div>
</div>
You can use the absolute positioning on the white circle, plus a translation to make it fully centered depending on the size of the black circle. That way, you can freely change the size of the black circle.
#blackcircle {
background-color: black;
color: white;
width: 400px;
height: 400px;
border-radius: 50%;
margin: 0 auto;
position: relative;
}
#whitecircle {
background-color: white;
color: black;
width: 90px;
height: 90px;
border-radius: 50%;
margin: 0 auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
Hope this will help!
A quick solution would be to set position to relative, and set left and top to 50%, while setting the transform to translateX(-50%) translateY(-50%). Add prefixes to ensure wide compatibility.
#blackcircle {
background-color: black;
color: white;
width: 400px;
height: 400px;
border-radius: 50%;
margin: 0 auto;
}
#whitecircle {
background-color: white;
color: black;
width: 90px;
height: 90px;
border-radius: 50%;
position: relative;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
<div id="blackcircle">
<div id="whitecircle"></div>
</div>
While you know the width and height of #whitecircle then you can set it in absolute position, and relative position for it's parent. then give to #whitecircle left top 50% and subtract half of it's width height.
top: calc(50% - (90px / 2));
left: calc(50% - (90px / 2));
#blackcircle {
background-color: black;
color: white;
width: 400px;
height: 400px;
border-radius: 50%;
margin: 0 auto;
position: relative
}
#whitecircle {
background-color: white;
color: black;
width: 90px;
height: 90px;
border-radius: 50%;
margin: 0 auto;
position: absolute;
top:calc(50% - (90px / 2));
left:calc(50% - (90px / 2));
margin: 0 auto;
}
<div id="blackcircle">
<div id="whitecircle"></div>
</div>
You can create 3 divs with 2 css class for circle.
Here the css code for example:
.circlecenter {
margin:auto auto;
text-align:center;
}
.circle1 {
padding:10px;
border-radius:10000px;
width:200px;
height:200px;
background:#000;
}
.circle2 {
padding:10px;
border-radius:10000px;
width:50px;
height:50pxM;
background:#fff;
}
And then the div:
<div class="circlecenter"><div class="circle1"><div class="circle2"></div></div></div>
trying to replicate this effect using css/scss , so far tried with scss by applying different width to the children object ,but nothing seem to be working
.box-container{
display: flex;
flex-wrap:wrap;
}
.box-container .box1{
width: 30%;
}
Three ways to do the rounded images:
1- an image with border-radius: 50%;
2- a container with border-radius: 50%; and an image as background
3- a container with border-radius: 50%; and an image inside
To add text just use options #2 or #3 with text inside the div.
body {
background: honeydew;
}
#stripe {
position: absolute;
bottom: 38%;
width: 100%;
color: #fff;
text-align: center;
cursor: default;
}
#pic {
width: 160px;
height: 160px;
border-radius: 50%;
border: 4px solid skyblue;
box-sizing: border-box;
vertical-align: top;
}
#imgcontainer {
width: 160px;
height: 160px;
position: relative;
vertical-align: bottom;
background-image: url(http://i.imgur.com/YwbFAEg.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
display: inline-block;
border-radius: 50%;
border: 4px solid orange;
box-sizing: border-box;
}
#container {
width: 160px;
height: 160px;
position: relative;
vertical-align: bottom;
display: inline-block;
border-radius: 50%;
border: 4px solid crimson;
box-sizing: border-box;
overflow: hidden;
}
#pic2 {
position: absolute;
top: 0;
left: 0;
margin: auto;
height:100%;
width:100%;
}
<img id=pic src="http://i.imgur.com/YwbFAEg.jpg">
<div id=imgcontainer><p id=stripe>text</p></div>
<div id=container><img id=pic2 src="http://i.imgur.com/YwbFAEg.jpg"><p id=stripe>text</p></div>
I had no success distributing the circles on a container with zero space among them using display:flex or float:left, so I did place them one by one using position:absolute inside a position:relative container (not a handy solution and have several limitations but it does works in some scenarios).
ps: notice the fact I'm using padding-bottom instead of height to keep the circles' aspect ratio.
body {
width: 100%;
height: 100vh;
margin: 0;
background: honeydew;
}
#container {
width: 100%;
height: 100%;
min-height: 346px;
position: relative;
}
.imgcontainer {
background-image: url(http://i.imgur.com/YwbFAEg.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
border-radius: 50%;
position: absolute;
border: 4px solid orange;
box-sizing: border-box;
}
#a {
top: 0;
left: 0;
width: 30%;
padding-bottom: 30%;
}
#b {
top: 0;
left: 29%;
width: 16%;
padding-bottom: 16%;
}
#c {
top: 0;
left: 44.5%;
width: 23%;
padding-bottom: 23%;
}
#d {
top: 0;
left: 67%;
width: 33%;
padding-bottom: 33%;
}
#e {
top: 54%;
left: 0%;
width: 24%;
padding-bottom: 24%;
}
#f {
top: 32.5%;
left: 23%;
width: 33%;
padding-bottom: 33%;
}
#g {
top: 39.5%;
left: 55.5%;
width: 15.5%;
padding-bottom: 15.5%;
}
#h {
top: 57.9%;
left: 65.4%;
width: 23%;
padding-bottom: 23%;
}
<div id=container>
<div id=a class=imgcontainer></div>
<div id=b class=imgcontainer></div>
<div id=c class=imgcontainer></div>
<div id=d class=imgcontainer></div>
<div id=e class=imgcontainer></div>
<div id=f class=imgcontainer></div>
<div id=g class=imgcontainer></div>
<div id=h class=imgcontainer></div>
</div>
How can I get a fixed Header with a fixed Sidebar and a Content Div?
What i did so far:
body {
margin:0;
}
.header {
width: 100%;
background: #303030;
background-repeat: repeat;
background-size: 38px 133px;
height: 40px;
background-position: 0px 39px;
box-shadow: 0px 1px 5px;
position: fixed;
z-index: 1000;
}
.sidebar {
z-index: 100;
position: fixed;
height: 100%;
width: 200px;
background: #303030;
}
.content {
padding: 10px;
width: 810px;
margin: auto;
min-height: 30px;
box-shadow: 0px 1px 5px;
background-color: rgba(255,255,255,0.7);
margin-left: 20%;
}
<div class="header"></div>
<div class="sidebar"></div>
<div class="content"></div>
But at the moment it's not stable and a bit weird. Means for example that the Content Div is floating under my sidebar and else.
Does someone know a better and more effective was to solve this?
I Think it will help you, For u'r understanding i have added red border for content div. Only I changed the CSS.
.content {
position: fixed;
top: 41px;
bottom: 0px;
left: 200px;
border: 2px solid red;
right: 0px;
}
body {
margin:0;
}
.header {
width: 100%;
background: #303030;
background-repeat: repeat;
background-size: 38px 133px;
height: 40px;
background-position: 0px 39px;
box-shadow: 0px 1px 5px;
position: fixed;
z-index: 1000;
}
.sidebar {
z-index: 100;
position: fixed;
height: 100%;
width: 200px;
background: #303030;
}
.content {
position: fixed;
top: 41px;
bottom: 0px;
left: 200px;
border: 2px solid red;
right: 0px;
}
<div class="header"></div>
<div class="sidebar"></div>
<div class="content"></div>
There are minor changes in your CSS like:
.content {
padding: 10px;
width: 810px;
min-height: 30px;
box-shadow: 0px 1px 5px;
background-color: rgba(255,255,255,0.7);
margin-left: 200px;
margin-top: 40px;
}
.header{top:0}
This will do the trick. If not please comment.
How could I center the blue box inside the red one ?
I see that the left side of the blue box is exactly in the middle of the red box, but I would like to center the whole blue box, not its left side. The dimensions of the boxes are not constant. I want to align regardless of boxes dimensions. Example to play with here. Thanks !
HTML:
<div id="rel">
<span id="abs">Why I'm not centered ?</span>
</div>
CSS:
#rel {
position: relative;
top: 10px;
left: 20px;
width: 400px;
height: 300px;
border: 1px solid red;
text-align: center;
}
#abs {
position: absolute;
bottom: 15px;
width: 300px;
height: 200px;
border: 1px solid blue;
}
If you're able to change the <span> tag to a <div>
<div id="rel">
<div id="abs">Why I'm not centered ?</div>
</div>
Then this piece of CSS should work.
#rel {
position: absolute;
top: 10px;
left: 20px;
width: 400px;
height: 300px;
border: 1px solid red;
text-align: center; }
#abs {
width: 300px;
height: 200px;
border: 1px solid blue;
margin: auto;
margin-top: 50px; }
I think it's better to use more automation for the enclosed box as less changes would be needed should you change the size of the container box.
You could add left:50px to #abs if that's all you want...
#abs {
position: absolute;
bottom: 15px;
width: 300px;
height: 200px;
border: 1px solid blue;
left:50px;
}
If you are going to define dimensions like that (200px x 300px and 300px x 400px), here's how it can be centered:
#rel {
position: relative;
top: 10px;
left: 20px;
width: 400px;
height: 300px;
border: 1px solid red;
text-align: center;
}
#abs {
position: absolute;
width: 300px;
height: 200px;
border: 1px solid blue;
margin: 49px 0 0 49px;
}
You can check at my solution here at http://jsfiddle.net/NN68Z/96/
I did the following to the css
#rel {
position: relative;
top: 10px;
left: 20px;
right: 20px;
width: 400px;
height: 300px;
border: 1px solid red;
text-align: center;
display: table-cell;
vertical-align: middle;
}
#abs {
display: block;
bottom: 15px;
width: 300px;
height: 200px;
border: 1px solid blue;
margin: 0 auto;
}
This should work
#abs {
position: absolute;
left: auto;
right: auto;
bottom: 15px;
width: 300px;
height: 200px;
border: 1px solid blue;
}