I have an implementation of a sticky footer. I actually have the "sticky" stuff working. But now I want to add a interior "content-box" div which will span the entire screen.
Please refer to this page.
What is needed to have the white area be the same height as the cyan area?
It's not possible in this setup,
but what you can do is apply a 1px height background image with background-repeat:repeat-y; on the body or parent container, to simulate the white background of the .content-box div(including the left and right borders).
add
background:url(simulatewhitecontainer.png) repeat-y center top;
to div.main
and remove
border-right: 1px solid #B0B0B0;
border-left: 1px solid #B0B0B0;
from div.content-box
Update: Check this fiddle: http://jsfiddle.net/gqSau/ for an example
using the following css for the content
.content {
padding: 0px;
position: absolute;
bottom: 50px;
top: 70px;
right: 0px;
left: 0px;
}
Related
I have a modal that should always appear at the bottom of the page. But, whenever its height exceeds the screen height, its top region is cut off. I want to prevent that. Here is the simplified version of the code.
<div class="modal">Modal</div>
.modal{
position: absolute;
width: 440px;
height:700px;
z-index: 9999;
background-color: #ffffff;
right: 20px;
bottom: 20px;
border: 1px solid #dbdbdb;
}
This is what max-height is for. Add this to your modal styling:
max-height: calc(100vh - 20px);
In this example I am subtracting the 20px that you are spacing from the bottom from the height of the screen (100vh). Feel free to adjust as needed.
If the height of your modal gets shorter than its content you need to add:
overflow-y: scroll;
I'm fighting with css code to obtain something that should be pretty easy:
adding a triangle at the bottom of multiple div on the same page.
Here it's the code I'm working with:
.areatitolo {
background-color: #bb0000;
color: #fff;
font-size: 18pt;
font-weight: bold;
text-align: center;
padding:5%;
margin-top:100px;
width:100%;
margin-bottom:60px;
}
.areatitolo:after{
content:'';
position: absolute;
top: 100%;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
height: 0;
border-top: solid 50px #bb0000;
border-left: solid 100px transparent;
border-right: solid 100px transparent;
}
There shouldn't be any problem, apart from the fact that only the first one works and I need to use the same effect 3 times...
Do you know where I made the mistake?
https://jsfiddle.net/federico_feroldi/0zrfL4q1/4/
Thank you for your help.
Add position: relative; to .areatitolo.
you should use position :relative to the class .areatitolo .Because you have used absolute for ::after. whenever you use position absolute to a child element ,you should use position relative to parent if not the absolute child will take body as relative parent by default ,thats why the first triangle appears at the top all the other triangles get overlaped on top
For a child element to be absolutely positioned, the parent must have a position: relative; property applied to it. This gives the child a reference point for it's positioning.
Additionally, consider using ::after instead of :after for a more modern CSS3 syntax. See MDN for more information.
I have problems with the stick footer. I am using bootstrap 3's sticky footer approach from here: Sticky Footer - BootStrap. Its width is 100% and does not inherit the same width from the parent (html's or body's width). My website already has a margin: 10px which affects everything else on the page including the footer. Common sense would tell me to set the footer like so: margin-left: 0 !important, but this doesn't work. Also, I could just use overflow-x: hidden; to eliminate the scrollbar but that's just being lazy and not the right way of doing it. I just want the footer's width to inherit (in other words, cut out the footer's width that spans more than its parent) and maintain the same exact width as the parent.
Here is a visual example of my problem: http://jsfiddle.net/ubc92/
Sticky Footer CSS:
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
footer {
position: absolute;
bottom: 0;
width:100%; /*this adds a horizontal scrollbar more than the body and html's width.*/
margin-left:0 !important; /*Tried to override and eliminate the scrollbar by setting the footer without any margin properties, but wasn't effective*/
/* Set the fixed height of the footer here */
height: 60px;
background-color: transparent;
color:white;
}
*{
border: 1px dotted blue;
}
Solution 1 (css solution)
If you want to achieve this, just replace your footer css with this:
footer {
position: fixed;
bottom: 0;
right: 10px;
left: 10px;
height: 60px;
background-color: transparent;
color:black;
border: 1px dotted red;
}
Solution 2 (javascript solution)
If you want to achieve this just:
Load jQuery and add this into the javascript:
$('footer').width($('.jumbotron').width())
and change the footer position from absolute to fixed:
.footer {
position: fixed;
}
On this page: http://www.chronicallyhappy.nl/
I added a "footer-wrap" div to the "footer" div (in the footer.php of the Wordpress theme). Then in CSS I added a background image to the "footer-wrap" div. The problem: it keeps showing below the background color for the "footer" div. I tried adding "position:relative" and "z-index" values for both divs, but no luck.
This is the result I want to achieve: http://nl.tinypic.com/r/2hhdcwn/8
What am I doing wrong?
My CSS:
.footer-wrap {
padding-top: 19px;
background: url("../style/img/golfjes.png") repeat-x top left;
clear: both;
position: relative;
z-index: 5;
}
.footer {
width: 100%;
padding: 65px 0 31px;
border-bottom: 4px solid #C71A4E;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
position: relative;
z-index: 1;
}
Thank you so much!
Stefaan
you should put the ribbon in the footer, not wrapping it around, and position it top minus a few pixels. As you have the footer within the wrap, and it has a background color, it overlaps with its bg.
so what you need is:
<footer div with background color>
<ribbon div positioned a bit top minus>
</ribbon div>
<footer content>
</footer content>
</footer div>
I have a web page like this (codes). AS you can see, there is a content div . And a little div which fixed to page, and scrolling with it. I want to align it to content div's left. I t will be like this page. There is a small fixed box which containing social sharing buttons. It's aligned to contents left. I want to do like this.
Try this update of your fiddle. I think it does what you want, but there are much nicer solutions when the order of the two div's can be rearranged.
you need to modify your css for your sosyal-paylasim div to this (notice the last 2 elements):
#sosyal-paylasim {
background-color: #F3F6FE;
border-color: #A5B2D0 #DBE4F3 #DBE4F3;
border-style: solid;
border-width: 2px 1px 1px;
box-shadow: 0 2px 3px #E2E2E2;
min-height: 150px;
overflow: hidden;
position: fixed;
top: 200px;
width: 64px;
z-index: 100;
left: 50%;
margin-left: -490px;
}
Further explanation can be found here.
----------- EDIT TO MAKE DIV OUTSIDE CONTAINER ---------------
Per your comment, if you want it outside of the container, use this:
#sosyal-paylasim {
background-color: #F3F6FE;
border-color: #A5B2D0 #DBE4F3 #DBE4F3;
border-style: solid;
border-width: 2px 1px 1px;
box-shadow: 0 2px 3px #E2E2E2;
min-height: 150px;
overflow: hidden;
position: fixed;
top: 200px;
width: 64px;
z-index: 100;
left: 50%;
margin-left: -557px;
}
The trick is that you are centering the div with the left: 50%, and then pushing it back to the left by half the width of the main container (plus the width of the div(64px) plus both borders for the div(2px) plus the left border for the container (1px) to make it outside).