HTML:
<div class="col-lg-4">
<div class="outer-div"></div>
<div id="cropContainerMinimal1"></div>
</div>
CSS:
.outer-div {
padding-top: 75px;
padding-right: 72px;
padding-left: 69px;
padding-bottom: 92px;
background-image: url(../images/student-background.png);
background-repeat: no-repeat;
background-position: center center;
height:590px;
}
#cropContainerMinimal1 {
width:100%;
height:421px;
position: relative;
border:1px solid #ccc;
}
CSS is not working for me. If i play with absolute it destroys all the structure. How to fix this issue?
Move your outer-div inside #cropContainerMinimal1 and apply following css. You can play with top, right, bottom and left properties to make it according to your needs.
.outer-div {
position: absolute;
background: rgba(0, 0, 0, 0.5);
bottom: 10px;
right: 10px;
left: 10px;
top: 10px;
}
#cropContainerMinimal1 {
background: #ccc;
width: 100%;
height: 421px;
position: relative;
border:1px solid #ccc;
}
<div class="col-lg-4">
<div id="cropContainerMinimal1">
<div class="outer-div"></div>
</div>
</div>
Related
As the title says: I need the 'info-box' to not be fixed while the head-box and head-in-block are fixed.
I know it is possible. I have a live example: http://www.marktplaats.nl/.
The orange box is fixed (head-box) then the white part (my info-box) is not fixed. And the Title block is fixed again (head-in-block).
This is the css and html I'm using right now. What adjustment needs to be made to make the middle (white) box not fixed?
#head-block{
width: 100%;
height: auto;
background: rgb(245,245,245);
border: 1px solid grey;
z-index: 1000;
margin-top: 0px;
}
#head-box{
height: 5px;
background: #37326a;
}
#info-box{
height: 50px;
background: white;
position: static;
}
#head-in-block{
width: 1100px;
height: 60px;
color: #37326a;
text-align: left;
margin: auto;
padding: 10px;
}
.fixed{
position: fixed;
}
<div id='head-block' class='fixed'>
<div id='head-box'></div>
<div id='info-box'></div>
<div id='head-in-block'>
</div>
</div>
<div style='height: 1500px;' id='content'>
</div>
Test
Do you guys see the website the same I do?
The website you linked to hides the white box when the header is sticky. So to do that here, you would hide #info-box when #head-block has class .fixed
.fixed #info-box {
display: none;
}
#head-block{
width: 100%;
height: auto;
background: rgb(245,245,245);
border: 1px solid grey;
z-index: 1000;
margin-top: 0px;
}
#head-box{
height: 5px;
background: #37326a;
}
#info-box{
height: 50px;
background: white;
position: static;
}
#head-in-block{
width: 1100px;
height: 60px;
color: #37326a;
text-align: left;
margin: auto;
padding: 10px;
}
.fixed{
position: fixed;
}
.fixed #info-box {
display: none;
}
<div id='head-block' class='fixed'>
<div id='head-box'></div>
<div id='info-box'></div>
<div id='head-in-block'>
</div>
</div>
<div style='height: 1500px;' id='content'>
</div>
Test
<div>
header
</div>
<div>
sidebar
</div>
<div>
content
<img src="prev.png">
<img src="next.png">
</div>
how do I fix the arrow in the center of the div content to the right and left?
http://jsfiddle.net/shvj40ta/embedded/result/
SOLUTION
The question below helped me understand about override:
How to override "inherited" z-indexes?
I put the z-index in div arrows, not in children divs
With the help of user #justinas I got the solution
http://jsfiddle.net/gislef/3by7r0ek/1/
With css 'position: absolute; top: 50%; margin-top: -(height / 2)';
.wrapper {
background-color: rgba(0, 0, 0, .2);
position: relative;
margin: 10px auto;
height: 200px;
width: 300px;
}
.left,
.right {
width: 0;
height: 0;
border: 20px solid transparent;
position: absolute;
top: 50%;
/* actual height is 40 */
margin-top: -20px;
}
.left {
border-right-color: black;
left: 5px;
}
.right {
border-left-color: black;
right: 5px;
}
<div class="wrapper">
<div class="left"></div>
<div class="right"></div>
</div>
building an overlay containing a stylised container for some text, however this container seems to be producing a margin which when combined with the elements normal width takes up the entire parent element width. According to chrome dev tools its the .flipcontainerelement that is causing this.
It's really weird behaviour and I can't figure out why its behaving in this way.
If I wanted to place content to the right of the container for example, I would not be able to because of this margin being produced.
.flipcontainer {
height: 230px;
width: 150px;
}
.flipcalender {
border: 1px solid #dddddd;
border-radius: 25px;
margin: 0 auto;
margin-top: 0.2px;
background: linear-gradient(white, #f4f2f2);
}
.mmouter {
width: 100%;
height: 100%;
border: 1.5px solid #dddddd;
}
.mmmiddle {
width: 98%;
height: 98%;
}
.mminner {
width: 98%;
height: 98%;
background: linear-gradient(white, #f4f2f2);
position: relative;
}
.mmbreaker {
width: 99%;
background-color: white;
height: 2px;
position: absolute;
z-index: 1;
top: 115px;
}
#mmlightbox {
display: block;
width: 400px;
height: auto;
position: fixed;
top: 30%;
left: 40%;
z-index: 999;
background-color: white;
padding: 10px 20px 10px 0px;
/* margin-right: 239px; */
margin-top: -100px;
margin-left: -150px;
border: solid 2px #f21c0a;
}
<div id='mmlightbox'>
<div class='flipcontainer'>
<div class='flipcalender mmouter'>
<div class='flipcalender mmmiddle'>
<div class='flipcalender mminner'>
<p class='daysremaining'></p>
<p>days</p>
<div class='mmbreaker'></div>
</div>
</div>
</div>
</div>
</div>
Add float: right; to .flipcontainer css like so:
.flipcontainer {
height: 230px;
width:150px;
float: right;
}
Here is the JSFiddle demo
The margin you saw was because you specified the width to '150px'.
Adding float: left removes this and you can add content next to it
.flipcontainer {
height: 230px;
width:150px;
float: left;
}
See Fiddle http://jsfiddle.net/epe3bfdw/
I really need your help,
I can't seem to figure out as to why my div #text spills out past my container div? It should fit nicely inside its container?
Here is the CSS markup:
height: 100px;
width: 500px;
bottom: 50%;
right: 50%;
position: absolute;
display: none;
}
#container {
background: #FFF;
left: 50%;
padding: 10px;
top: 50%;
margin: 0;
padding: 0;
height: 100%;
border: 2px solid rgb(100,139,170);
height: 100%;
position: relative;
}
.topbar {
cursor: pointer;
color: white;
background: rgb(100,139,170);
padding: 4px;
font-weight: bold;
}
#text {
height: 100%;
border: 1px solid red;
}
HTML:
<div id="wrapper">
<div id="container">
<div style="float:left;" class="topbar">Custom Dialog Box</div><div class="topbar" style="text-align: right;">Close</div>
<div id="text"><p>test</p></div>
</div>
</div>
Here is a snapshot of the problem:
The height of #text is 100% which means it gets the height of the containing block, in this case #container. Both the height of #text as well as the #container are 500px. But #text is being pushed down by it's sibling .topbar, causing it to overflow.
To solve this you can use the css property overflow:auto as suggested by Jarred Farrish in the comments
Because #test {height:100%;} it will look for it's parent's height, all the way to #wrapper which is set to height:100px, so #test will get the same height, plus the borders, and the #container doesn't have enough space to hold it (due to the extra blue bar), so it overflows.
I also noticed the layout can be done simpler as follows.
#wrapper {
height: 100px;
width: 500px;
bottom: 50%;
right: 50%;
margin-bottom: -50px; /*half height*/
margin-right: -250px; /*half width*/
position: absolute;
/* display: none; */
}
#container {
background: #FFF;
border: 2px solid rgb(100, 139, 170);
}
.topbar {
cursor: pointer;
color: white;
background: rgb(100, 139, 170);
padding: 4px;
font-weight: bold;
}
#text {
border: 1px solid red;
}
<div id="wrapper">
<div id="container">
<div style="float:left;" class="topbar">Custom Dialog Box</div>
<div class="topbar" style="text-align: right;">Close</div>
<div id="text">
<p>test</p>
</div>
</div>
</div>
You are taking the height of the #container but remember that there is also sort of a header at the top of the container so the text height should be < 100% because you have to substract the height of the dialog header.
Amir got point, the way you can "fix" this is to add padding to content, so you got safe space.
CodePen Sample
<div id="wrapper">
<div id="container">
<div style="float:left;" class="topbar">Custom Dialog Box</div><div class="topbar" style="text-align: right;">Close</div>
<div id="text"><p>test</p></div>
</div>
#wrapper{
height: 100px;
width: 500px;
bottom: 50%;
right: 50%;
margin-right: -250px;
position: absolute;
border: 1px solid yellow;
}
#container {
background: #FFF;
left: 0%;
padding-bottom: 30px;
top: 0%;
margin: 0;
height: 100%;
border: 2px solid rgb(100,139,170);
position: relative;
}
.topbar {
cursor: pointer;
color: white;
background: rgb(100,139,170);
padding: 4px;
font-weight: bold;
border: 1px solid green;
}
#text {
height: 100%;
border: 1px solid red;
}
I also fixed positioning for you.
I need to create a html box which is not just a simple box, but it has a little tip at the bottom. I created this with HTML and CSS as you can see in the code below. First watch that.
.item{
width: 200px;
height: 130px;
background: gray;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: absolute;
float:left;
}
.title{
position: absolute;
bottom: 0px;
background-color: white;
height: 30px;
line-height: 30px;
width: 160px;
}
.tip{
position: absolute;
bottom: 0px;
right: 0px;
height: 30px;
width: 40px;
border-left: 25px solid transparent;
border-bottom: 30px solid white;
}
*{
box-sizing: border-box;
}
<div class="item" style="background-image: url('http://img.dummy-image-generator.com/buildings/dummy-400x400-Window-plain.jpg')">
<div class="title">Lorum Ipsum</div>
<div class="tip"></div>
</div>
<div class="item" style="left:230px;">
<div class="title">Lorum Ipsum 2</div>
<div class="tip"></div>
</div>
As you can see the image in the background is also in the tip at the bottom. At the right, you seen the same but without an image and a gray background. But this background actually needs to be white with an gray border in the contour of the gray background. So also the version with the image needs this border. Below an image of what I mean.
Is it possible to create this with only HTML and CSS with support for older browsers (at least IE9). Thanks in advance!
here is one solution that works in old browsers; I made the border red for visibility.
.item{
width: 200px;
height: 130px;
background: gray;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: absolute;
float:left;
border:1px solid red;
}
.title{
position: absolute;
bottom: -1px;
left: -1px;
background-color: white;
height: 30px;
line-height: 30px;
width: 160px;
border:1px solid red;
border-width: 1px 1px 0 0;
}
.tip{
position: absolute;
bottom: -1px;
right: -1px;
height: 30px;
width: 40px;
border-left: 25px solid transparent;
border-bottom: 30px solid white;
}
.tip-border{
border-bottom-color:red;
bottom:0;
}
*{
box-sizing: border-box;
}
<div class="item" style="background-image: url('http://img.dummy-image-generator.com/buildings/dummy-400x400-Window-plain.jpg')">
<div class="title">Lorum Ipsum</div>
<div class="tip tip-border"></div>
<div class="tip"></div>
</div>
<div class="item" style="left:230px;">
<div class="title">Lorum Ipsum 2</div>
<div class="tip tip-border"></div>
<div class="tip"></div>
</div>
http://fiddle.jshell.net/2bgdjckq/