I am trying to make div set to full screen with following CSS but always a scrollbar shows up and if I lessen width and height more than 100% then this is not working perfectly responsively. Is there a way I can make div set to full screen responsively?
#fullScreen
{
position: absolute;
text-align: left;
left: 0px;
top: 0px;
width: 100vw;
height: 100vh;
z-index: 5;
background-color: #FFDAB9;
border: 4px solid #FF0000;
border-radius: 10px;
}
I think the problem is due to the increased size of border i.e 4px so just try this
#fullScreen
{
margin: 0px;
position: absolute;
text-align: left;
left: 0px;
top: 0px;
width: calc(100% - 8px);
height: calc(100% - 8px);
z-index: 5;
background-color: #FFDAB9;
border: 4px solid #FF0000;
border-radius: 10px;
}
You should read about the CSS box model.
The problem is that the border is considered outside the element. So your element has a width/height of 100vh + 8px. 8px from the border values of 4px.
You can easily fix this by adding box-sizing:border-box so that the border width is included in the element
See below
#fullScreen {
position: absolute;
text-align: left;
left: 0px;
top: 0px;
width: 100vw;
height: 100vh;
z-index: 5;
background-color: #FFDAB9;
border: 4px solid #FF0000;
border-radius: 10px;
box-sizing:border-box;
}
<div id="fullScreen">
</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>
I am successfully achieving my goal but in so doing the divs stick outside the normal area and require scrolling. How can I achieve this sort of masking while keeping everything contained horizontally. I've tried altering the position of various elements and can't seem to achieve this goal. *Note the colors are only there for reference, in the end the red/blue/green divs would be white.
https://jsfiddle.net/xevsz81c/
#leftDivider {
width: 50%;
height: 50px;
background:red;
float: left;
position: absolute;
left: -50px;
}
#leftDivider div{
bottom: 0px;
height: 0px;
border-style: solid;
border-width: 50px 0 0 60px;
border-color: transparent transparent transparent green;
float: left;
position: relative;
left: 100%;
}
#rightDivider {
width: 50%;
height: 50px;
background: blue;
float: right;
position: absolute;
right: -50px;
}
#rightDivider div{
bottom: 0px;
height: 0px;
border-style: solid;
border-width: 0 0 50px 60px;
border-color: transparent transparent green transparent;
float: right;
position: relative;
right: 100%;
}
.divider {
position: absolute;
bottom: 50px;
right: 0;
left: 0;
}
.row {background: orange; position: relative; height: 300px; padding: 0; margin: 0;}
html, body {margin: 0; padding: 0;}
<div class="row">
This div has a background image
<div class="divider"><div id="leftDivider"><div></div></div></div>
<div class="divider"><div id="rightDivider"><div></div></div></div>
</div>
I am having a difficult time recreating the issue in your fiddle, might be a lack of the image within the orange div. But try the following:
You would have to utilize the overflow: hidden property.
By doing this you hide the extra and disable the scrolling which sounds like what you need and are experiencing.
See the explanation here as well as its uses.
I am using the Sticky Footer code from HERE and for some reason the sticky footer overlaps my .content class on my site.
My site: http://tangotest.comoj.com
As you can see the 910x50px image at the bottom overlaps the white box when you scroll to the bottom on any given page.
I need the 910x50px image to be at the bottom of the white box when you scroll to the bottom.
CSS for the white box .content class
.content {
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
margin: auto;
width: 50%;
background: white;
}
CSS for the Sticky Footer .player class
.player {
position: fixed;
left: 470px;
bottom: 0px;
height: 50px;
width: 50%;
background: transparent;
}
You could try increasing the padding of the page body.
Currently it is:
body {
background-image: url('http://tangoworldwide.net/Themes/Altier_2/images/tango/city01.jpg');
padding-top: 20px;
padding-bottom: 20px;
}
try changing the padding-bottom to
padding-bottom: 30px;
.player {
position: relative;
left: 200px;
bottom: 20px;
height: 50px;
width: 50%;
background: transparent;
}
is this what you want? if not this.
.player {
position: fixed;
left: 200px;
bottom: 0px;
height: 50px;
width: 50%;
background: transparent;
}
You can set margin-bottom to footer:
Any margin greater than 10px will do:
.footer {
padding-bottom: 10px;
padding-left: 5px;
padding-right: 5px;
margin: auto;
margin-bottom: 10px;
width: 50%;
background: white;
}
to increase further gap between white div and fixed bottom div you can increase margin-bottom to greater values.
My image is displaying outside the element tag, like this:
Notice that the image itself is outside the element. Tried with both background image and IMG tag. Same results.
HTML and CSS structure:
.class {
width: 35px;
height: 35px;
position: absolute;
background: #FFFFFF;
margin-left: 310px;
border: 1px solid #E6E6E6;
border-radius: 50%;
margin-top: 5px;
}
.rounded {
border-radius: 100%;
}
.class2 {
height: 25px;
z-index: 100;
position: absolute;
width: 25px;
right: 0;
background-size: 25px 25px !Important;
background-color: black !important;
}
<div class="class">
<div class="class2 rounded" style="background: url('<image fetched with php code here>')" ></div>
</div>
The blue square in the image attached above code, is the inspector highlighting and NOT a part of the code/structure.
eThe actual question: Look at the blue element highlighter. That is the element, that the image has been assigned to. Notice how the image is sticking a few pixels out in the top and left side. Why is it outside the element?
I tried display: flex; as mentioned in a now deleted post, that didn't fix it.
just change position:absolute in .class (parent) to position:relative - that would do the trick. Like so:
.class {
width: 35px;
height: 35px;
position: relative;
background: #FFFFFF;
margin-left: 310px;
border: 1px solid #E6E6E6;
border-radius: 50%;
margin-top: 5px;
}
added later:
I see it now. That behaviour is absolutely normal cause they were sqares.
remove radius from .class2 for testing and zoom and you'll see why it happens.
Just adjust position of class2 adding this, and it would be ok.
right: 2px;
top: 2px;
If you set:
top: 0;
left: 0;
right: 0;
bottom: 0;
This will make the element adjustable by margin.
Then you can add:
margin: auto;
and it will display the image centered.
.class {
width: 35px;
height: 35px;
position: absolute;
background: #FFFFFF;
margin-left: 310px;
border: 1px solid #E6E6E6;
border-radius: 50%;
margin-top: 5px;
}
.rounded {
border-radius: 100%;
}
.class2 {
height: 25px;
z-index: 100;
position: absolute;
width: 25px;
right: 0;
left: 0;
bottom: 0;
top: 0;
margin: auto;
/*background-size: 30px 30px;*/
}
<div class="class">
<div class="class2 rounded" style="background: url('http://www.lorempixel.com/100/100/"></div>
</div>
I want to center 4 small, square child divs along each edge of a square parent div. My current solution depends on hacked-together absolute positioning. http://jsfiddle.net/Lrc4h/
HTML:
<div class="tile">
<div class="tile_inner"></div>
<div class="exit_left"></div>
<div class="exit_right"></div>
<div class="exit_up"></div>
<div class="exit_down"></div>
</div>
CSS:
.tile {
float: left;
width: 180px;
height: 180px;
background-color: gray;
border: 2px solid black;
}
.tile_inner {
width: 120px;
height: 120px;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid white;
}
.exit_left {
position: absolute;
top: 90px;
width: 20px;
height: 20px;
border: 3px solid pink;
}
.exit_right {
position: absolute;
left: 165px;
top: 90px;
width: 20px;
height: 20px;
border: 3px solid red;
}
.exit_up {
position: absolute;
left:90px;
top:10px;
width: 20px;
height: 20px;
border: 3px solid blue;
}
.exit_down {
position: absolute;
left:90px;
top:165px;
width: 20px;
height: 20px;
border: 3px solid green;
}
How can I get each of the exit directions centred along the edge of each axis?
Here is an updated snippet: http://jsfiddle.net/Lrc4h/3/
First of all you need to know that when you're using position: absolute the element will position with absolute coordinates based on the first parent that is position: absolute or position: relative falling back to the document if there is none.
Secondly it's important, when dealing with borders like in your example, to understand the box model and how nasty things get when borders cross the borders ;-). It's a common practice to use box-sizing: border-box to make things a bit easier and to mix relative and absolute units nicely. I've included a box model initialization how I prefer it on the top of the example I've posted.
Combining all this together you can start use relative units (percentage) in your absolute positioning. The example I've posted is still using absolute positions but relative to the .tile element. You should always make your absolute positions relative to a parent. Using left: 50% centers the start of your element to the center of your parents width. However, as your exit element also has a width this needs to be compensated by half of it's width. That's why there is a margin-left: -15px. You could also use the calc function if browser support is IE9+. This would look like this: left: calc(50% - 15px).
As you can see the example still has absolute positions and this problem is easy to solve with absolute positioning. You still have to "hard code" a few values, but they are all relative to the parent and you can easily change your .tile dimensions without changing the child elements.
Cheers
Gion
.tile_inner {
width: 120px;
height: 120px;
position: relative;
top: 50%;
left: 50%;
margin: -60px 0 0 -60px;
border: 1px solid white;
}
You just need to adjust the margin
Demo
.tile_inner{
margin: -60px 0 0 -60px;
}
Maybe as not as clean as it can get, but you can use the calc function to use percentages in conjunction with pixels (based on the width & height of the child divs. For example (I'm including only the changes to the CSS code:
.tile {
position: relative;
}
.exit_left {
top: calc(50% - 13px);
}
.exit_right {
left: calc(100% - 26px);
top: calc(50% - 13px);
}
.exit_up {
left: calc(50% - 13px);
}
.exit_down {
left: calc(50% - 13px);
top: calc(100% - 26px);
}
In that way, even when you change the parent div's dimensions, the child divs will remail in place.
Demo: http://jsfiddle.net/xPP32/
Here's slightly optimized version that relies on pseudo-elements and relative units of measurement (%). Scaling this one is a breeze. All you need to do is change the height and width on the .tile and the rest is taken care of. Here's the original square: http://jsfiddle.net/MGse6/. And, here's a square scaled up: http://jsfiddle.net/k9dxW/.
HTML:
<div class="tile">
<div></div>
</div>
CSS:
*, :before, :after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
padding: 10px;
}
.tile {
width: 180px;
height: 180px;
background-color: gray;
border: 2px solid black;
position: relative;
}
.tile > div {
width: 65%;
height: 65%;
border: 1px solid #fff;
margin: 17.5% auto 0;
}
.tile:before,
.tile:after,
.tile > div:before,
.tile > div:after {
content: "";
position: absolute;
width: 16%;
height: 16%;
border: 3px solid;
}
.tile:before {
top: 0;
left: 50%;
margin-left: -8%;
border-color: blue;
}
.tile:after {
top: 50%;
right: 0;
margin-top: -8%;
border-color: red;
}
.tile > div:before {
bottom: 0;
left: 50%;
margin-left: -8%;
border-color: green;
}
.tile > div:after {
top: 50%;
left: 0;
margin-top: -8%;
border-color: pink;
}
And, here's another solution where elements are arranged using flow: http://jsfiddle.net/xep9M/.
HTML:
<div class="tile">
<!--
It's very important
to have the divs stack
next to each other
-->
<div></div><div></div><div></div><div></div><div></div>
</div>
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
padding: 10px;
}
.tile {
width: 180px;
height: 180px;
background-color: gray;
border: 2px solid black;
box-sizing: content-box;
}
.tile > div {
width: 16%;
height: 16%;
display: inline-block;
border: 3px solid;
}
.tile > div:first-of-type,
.tile > div:last-of-type {
display: block;
margin: 0 auto;
}
.tile > div:first-of-type {
margin-bottom: 1.5%;
border-color: blue;
}
.tile > div:last-of-type {
margin-top: 1.5%;
border-color: green;
}
.tile > div:nth-of-type(3) {
height: 65%;
width: 65%;
border: 1px solid #fff;
}
.tile > div:nth-of-type(n + 2) {
vertical-align: middle;
}
.tile > div:nth-of-type(2) {
margin-right: 1.5%;
border-color: pink;
}
.tile > div:nth-of-type(4) {
margin-left: 1.5%;
border-color: red;
}