I want to draw an inner div over an outer div for scrolling purposes. How can I change my CSS to fix this?
HTML code:
<div class="sliderPath">
<div class="slider"></div>
</div>
CSS code:
.sliderPath {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 80%;
height: 20%;
margin: auto;
}
.slider {
border-radius: 4px;
background:#50c2de;
position: absolute;
width: 50px;
height: 50px;
left: 50%;
}
https://jsfiddle.net/ImSonuGupta/0bx6uwyn/1/
Try setting top position to small value:
.slider {
border-radius: 4px;
background:#50c2de;
position: absolute;
width: 50px;
height: 50px;
left: 50%;
top: 3px; //added this
}
And also set position: relative on parent:
.sliderPath {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 80%;
height: 20%;
margin: auto;
position: relative; //added this
}
updated jsfiddle
Simply make .sliderPath the base position for its childs, with position:relative, and make .slider top 100% off its parent height.
.sliderPath {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 80%;
height: 20%;
margin: auto;
position:relative;
}
.slider {
border-radius: 4px;
background:#50c2de;
position: absolute;
width: 50px;
height: 50px;
left: 50%;
top:100%
}
EDIT
if you need multiple slides, just add margin-bottom to .sliderPath equal to .slider height. So it would be:
.sliderPath {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 80%;
height: 20%;
margin: auto;
position:relative;
margin-bottom:50px;
}
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>
How to create the curve that you see in picture with CSS and HTML?
Can I use CSS border radius or use other solution?
You could do it with two divs and psuedo elements :before and :after. Working code below
.top-bar{
height: 100px;
width: 100%;
background-color: #55c3ff;
}
.curved-bottom{
width: 80%;
margin: 0 auto;
height: 50px;
background-color: #55c3ff;
border-radius: 0 0 20px 20px;
position: relative;
}
.curved-bottom:before {
height: 50px;
width: 16%;
background-color: white;
border-top-right-radius: 10px;
left: -16%;
content: '';
position: absolute;
top: -8px;
}
.curved-bottom:after {
height: 50px;
width: 16%;
background-color: white;
border-top-left-radius: 10px;
right: -16%;
content: '';
position: absolute;
top: -8px;
}
<div class="top-bar"></div>
<div class="curved-bottom"></div>
If your main horizontal blue bar is a div, and the box sticking down is a separate div, you can use the pseudo elements :before and :after to create those inner radius.
See the following as an example:
html,
body {
padding: 0;
margin: 0;
}
.header {
position: relative;
background-color: #5DC4FD;
width: 100%;
height: 160px;
}
.tab {
position: relative;
top: 130px;
background-color: #5DC4FD;
width: 80%;
height: 100px;
margin: 0 auto;
border-radius: 0 0 30px 30px;
}
.tab:before {
position: absolute;
content: "";
left: -50%;
width: 50%;
height: 100px;
background-color: white;
border-radius: 0 30px 0 0;
}
.tab:after {
position: absolute;
content: "";
right: -50%;
width: 50%;
height: 100px;
background-color: white;
border-radius: 30px 0 0 0;
}
<div class="header">
<div class="tab">
</div>
</div>
Well, you could use overlapping divs like this:
#top {
background: #00BFFF;
width: 100%;
height: 150px;
}
#container{
display: flex;
}
#mid{
background: #00BFFF;
width: 70%;
height: 50px;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
}
#left{
background: #FFFFFF;
margin-top: -50px;
width: 15%;
height: 50px;
border-top-right-radius: 25px;
}
#right{
background: #FFFFFF;
margin-top: -50px;
width: 15%;
height: 50px;
border-top-left-radius: 25px;
}
<div id="top"></div>
<div id="container">
<div id="left"></div>
<div id="mid"></div>
<div id="right"></div>
</div>
but I'd recommend using a background image with the desired shape
I have a textarea in div.
This is my code:
#mdDiv {
position: absolute;
top: 0px;
left: 0px;
height: 650px;
width: 300px;
background-color: blue;
}
#mdText {
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
font-size: 18px;
}
<div id="mdDiv" >
<textarea id="mdText">Hello World</textarea>
</div>
It shows this:
But I want the distance between text area and div is 10.
So I set
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
but the right distance is too big.
How do I do to set the distance between text area and div?
Use margins and relative sizing instead of absolute positioning:
#mdDiv {
height: 650px;
width: 300px;
padding: 0;
background-color: blue;
}
#mdText {
width: calc(100% - 20px);
height: calc(100% - 20px);
margin: 10px;
padding: 0;
font-size: 18px;
}
Often this can also be simplyfied:
#mdDiv {
height: 650px;
width: 300px;
padding: 10px;
background-color: blue;
}
#mdText {
width: 100%;
height: 100%;
padding: 0;
font-size: 18px;
}
Take out the absolute on the Textarea.
#mdText {
width: 100%;
margin: 10px;
font-size: 18px;
}
Or add padding to the parent
padding: 10px;
Alternative solution would be to disregard positioning and just use padding.
#mdDiv {
height: 650px;
box-sizing: border-box;
padding: 10px;
width: 300px;
background-color: #00F;
}
#mdText {
width: 100%;
height: 100%;
box-sizing: border-box;
}
<div id="mdDiv" >
<textarea id="mdText">Hello World</textarea>
</div>
Why are you used absolute position of div? If you don't need remove that form both div.
And using padding to main div or parent div to add spacing.
HTML:
<div id="mdDiv" >
<textarea id="mdText">Hello World</textarea>
</div>
CSS:
#mdDiv {
height: 650px;
width: 300px;
background-color: blue;
padding:10px;
}
#mdText {
font-size: 18px;
width:297px;
height:100%;
}
Here is example of jsfiddle: https://jsfiddle.net/r49fkLz0/
CSS
#mdDiv {
position: absolute;
top: 0px;
left: 0px;
height: 650px;
width: 245px;
background-color: blue;
}
#mdText {
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
font-size: 18px;
}
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>
for example i designed a div for border style and i designed another div to center of that , how can i set it to center of larger div?
.Profile_Photo_Border {
border: 3px solid #052d31;
height: 90px;
width: 90px;
border-radius: 3px;
}
.Profile_Photo {
background-color:#005e67;
height: 80px;
width: 80px;
border-radius: 3px;
alignment-adjust:middle;
text-align:center;
}
<div class="Profile_Photo_Border">
<div class="Profile_Photo"></div>
</div>
Add the following style display: flex; to the parent div and
margin: 0 auto;
align-self: center;
to the child div to align it center horizontally as well as vertically.
So the styles become:
.Profile_Photo_Border {
border: 3px solid #052d31;
height: 90px;
width: 90px;
border-radius: 3px;
display: flex;
}
.Profile_Photo {
background-color:#005e67;
height: 80px;
width: 80px;
border-radius: 3px;
alignment-adjust:middle;
text-align:center;
margin: 0 auto;
align-self: center;
}
See the fiddle: "https://jsfiddle.net/ukgnnp4k/"
See the screenshot:
Try changing your CSS to:
.Profile_Photo_Border {
border: 3px solid #052d31;
height: 90px;
width: 90px;
border-radius: 3px;
position: relative;
}
.Profile_Photo {
background-color: #005e67;
height: 80px;
width: 80px;
border-radius: 3px;
text-align:center;
position: absolute;
top: 50%;
left: 50%;
margin-left: -40px;
margin-top: -40px;
}
This link also might be helpful:
https://css-tricks.com/centering-css-complete-guide/
Your second div has 10px size lesser than the first one in height and width.
So to centralize the middle one add margin:5px;to the second div, Profile_Photo.
You can add this css.
.Profile_Photo_Border {
border: 3px solid #052d31;
height: 90px;
width: 90px;
border-radius: 3px;
}
.Profile_Photo {
background-color:#005e67;
height: 80%;
width: 80%;
border-radius: 3px;
text-align:center;
margin:10px auto;
}
Use this http://jsfiddle.net/18yao91v/244/
.Profile_Photo {
background-color:#005e67;
height: 80px;
width: 80px;
border-radius: 3px;
margin: 5px auto;
}
If the outer div and inner div has fixed width, then you can use css position to align inner element.
See below CSS.
.Profile_Photo_Border {
border: 3px solid #052d31;
height: 90px;
width: 90px;
border-radius: 3px;
position: relative;
}
.Profile_Photo {
background-color:#005e67;
height: 80px;
width: 80px;
border-radius: 3px;
/* alignment-adjust:middle; No need to use this. */
text-align:center;
position: absolute;
top: 5px;
left: 5px;
}
<div class="Profile_Photo_Border">
<div class="Profile_Photo"></div>
</div>
Here are my 2 cents, I used the display:table.cell css style:
.Profile_Photo_Border {
border: 3px solid #052d31;
height: 150px;
width: 150px;
border-radius: 3px;
display: table-cell; /*added*/
vertical-align: middle; /*added*/
}
.Profile_Photo {
background-color: #005e67;
height: 80px;
width: 80px;
border-radius: 3px;
text-align: center; /*added*/
margin: auto; /*added*/
}
Here's another way of centering the div inside a div irrespective of width and height - Codepen
.Profile_Photo_Border {
border: 3px solid #052d31;
height: 90px;
width: 90px;
border-radius: 3px;
position: relative;
}
.Profile_Photo {
background-color:#005e67;
height: 80px;
width: 80px;
border-radius: 3px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
And a guide from CSS Tricks for centering the div.
Another guide from CSS Tricks on Flexbox which is another better way.
Hope this might help you understand better.