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.
Related
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>
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.
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 must be missing something with the sticky footer tutorials I've been reading, because none of them make the slightest bit of difference to my wordpress site / theme.
At the moment, the content pushes my footer down, but it never sits at the bottom of the page unless there's something to push it there.
My css is:
body{
margin: 0;
min-width: 100%;
height: auto !important;
}
.header {
width: 75%;
max-width: 75%;
height: 40px;
padding-top: 32px;
padding-bottom:32px;
margin-right: auto;
margin-left: auto;
}
.content {
position:relative;
width: 100%;
max-width:100%;
height: auto;
}
.footer {
border-top-style: solid;
border-top-width: 1.5px;
border-top-color: #e1e1e1;
background-color: #ffffff;
height: 25px;
width: 75%;
max-width:75%;
padding-top: 30px;
padding-bottom: 30px;
margin-left: auto;
margin-right: auto;
}
Is there a sure-shot way of achieving this?
You can change the position of your footer to absolute with a bottom:0; and adjust it
html {
position:relative;
min-height:100%;
}
.content {
position:relative;
width: 100%;
max-width:100%;
height: auto;
padding-bottom:50px; //to avoid content overlaping the footer
}
.footer {
border-top-style: solid;
border-top-width: 1.5px;
border-top-color: #e1e1e1;
background-color: #ffffff;
height: 25px;
width: 75%;
max-width:75%;
padding-top: 30px;
padding-bottom: 30px;
margin-left: auto;
margin-right: auto;
position:absolute;
bottom:0;
left:12,5%; // Since the footer width is 75%
}
I usually accomplish this by adding a div around all the content after the body tag but before the footer div. Then set that div to min-height: 100%;
I have four divs on my asp.net page, div7_1(parent), div4_1 and div11_1 and div6_1 as child divs. This is the situation:
html
<div id="div7_1">
<div id="div4_1">
</div>
<div id="div11_1" runat="server">
</div>
<div id="div6_1">
</div>
</div>
css
#div4_1{display:table-cell; width:215px; min-height: 450px; top: 0px; float: left; background-color: #cc9933; text-align: center; border: 2px solid #999;}
#div6_1{display:table-cell; width: 185px; min-height: 450px; float: right; top: 0px; right: 0px; background-color: #cc9933; border: 1px solid #999;}
#div7_1{ position: relative; overflow: hidden; display: table; width: 1200px; min-height: 450px; top: 5px; left: 0px; padding-top: 0px;}
#div11_1{display:table-cell; float: left; padding-left: 5px; margin-left: 5px; width: 65%; min-height: 450px; top: 0px; left: 0px; border: 3px solid #999;}
I need to expand parent div height to height of child div with greatest height and expand the other child divs to that height. How can I do this? Probably I have some redundant lines in css, please correct me.
Thanks.
Not sure why you are floating either of the divs but just using display:table-cell on both seems to achieve your stated requirement
JSfiddle
CSS
#div7{position: relative;
overflow: hidden;
display: table;
min-height: 450px;
top: 5px;
left: 0px;
padding-top: 0px;}
#div4{display:table-cell;
width: 245px;
background-color: #cc9933;
text-align: center;
height:150px;
}
#div11{
display: table-cell;
position: relative;
padding-left: 5px;
margin-left: 5px;
width: 57%;
background-color: yellow;
}