I am working on this site - http://agencymaiclientpages.com/phononic/cms/
One of the requirements is that footer goes to the bottom of the page. I know there are height:100% values on body and html required, but whichever combination I tried (there are several element within content area) - it just doesn't work. I tried putting all the main content into 100%, nothing, tried several elements within stack, still nothing. What am I doing wrong? Or perhaps, what am I missing?
I even tried to remove some of the elements (#primary) so the stacking isn't so "high", but the footer either goes below the screen (so scrolling is required) or stays just below the main content area.
You need fixed positioning. This will ensure your footer is at the bottom of the page:
.site-footer {
position:fixed;
bottom:0;
width:100%;
max-width:100%;
}
But be careful, if the window height is 'small', it will cut of the main content. So depending on your main content, you could only apply the fixed positioning after a certain vertical height, for example something like this:
#media (min-height:600px) {
/*fixed positioning here*/
}
Something like:
.site-footer {
color: #ddd;
font-size: 14px;
font-size: 1.4rem;
text-align: center;
position: fixed;
bottom: 0px;
left: 50%;
margin-left: -120px;
}
?
Your question needs more info...
The footer comes to the bottom.
CSS :
.site-footer {
bottom: 0;
position: absolute;
width: 100%;
left: 0;
right: 0;
font-size: 1.4rem;
text-align: center;
color: #ddd;
}
Remove padding and margins from some places so that all the main contents come in one page . for example:
.site-footer {
padding: 1em 0;
}
.menu-main-container {
margin-top: 30px;
}
p {
margin-bottom: 1.5em;
}
Because your footer doesnot have any background color so when main content div is bigger the footer overlaps it and doesn't look good.
Try this code, it will help :
.my_footer {
position : absolute;
bottom : 0px;
color: #0f0;
padding : 0 auto;
font-size: 16px;
font-size: 1.0rem;
text-align: center;
left: 50%;
}
The position: absolute; and bottom : 0px; will make the footer to be placed at the foo of the page.
Related
I have a background image for the first section of my site that I need to touch the nav bar. The arm is the background image. It needs to touch the nav bar for the design.
background image
The first section starts with a header (h3) which has padding-top on it:
h3 {
font-size: 1.5em;
margin-top: 3em;
margin-bottom: 0.7em;
text-transform: uppercase; }
I need the background to "ignore" the padding so theres no gap between it and the navbar.
the CSS for the background image
.start {
background-image: url(../images/goldenarmamend.png);
background-position: top right;
height: 100%;
width: 100%;
Hope this makes sense!
remove background position...
.start {
background-image: url(../images/goldenarmamend.png);
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 100%;
}
set right value as per your need in pixel or em.
I am trying to display fixed footer at the bottom of the screen for mobile browsers. I have tried putting position: fixed in the Footer id. However, it is still not working correctly. How can I set the footer to continuously display as the user scrolls down the page?
#footer {
color: #333333;
font-size: 70%;
font-style: italic;
text-align: center;
padding: 0;
position: fixed;
}
Do it like this:
#footer {
color: #333333;
font-size: 70%;
font-style: italic;
text-align: center;
padding: 0;
position: fixed;
bottom: 0px;
width: 100%;
}
The 'bottom: 0px' will fix the footer to the bottom of the screen, and the 'width: 100%' will center the footer contents. You will have to add a background color as well so that your page content does not show through the footer.
Plus, as #Adrift said, remove the extra closing div tag from the footer area.
So I have two elements floated next to each other and one has a set width and the other needs to be a percentage so that when the window/browser is resized the content will flow with it. However I am having trouble keeping the content floated next to each other when the window size is smaller than certain ratio.
Here is my css code:
.box {
width: 50px;
height: 50px;
float: left;
margin-right: 10px;
background-color: blue;
}
p {
width: 95%;
float: left;
margin: 0;
padding: 0;
}
Is there a way around this? Here is my fiddle so you can see what is going on.
My example
If you make the size smaller you will see the P tag drops down below the box.
If the box is a fixed width you can use the following styles:
.item {
padding-left: 60px;
}
.box {
width: 50px;
height: 50px;
float: left;
margin-left: -60px;
background-color: blue;
}
p {
width: 100%;
float: left;
margin: 0;
padding: 0;
}
http://jsfiddle.net/3QhzS/1/
otherwise you will need to add a little bit of jquery to it to add styles on the fly:
http://jsfiddle.net/3QhzS/6/
If you don't know the width of the div.box (as you stated in comments) then you can use position:relative to the p tag which will do the trick.
p{
position:relative;
/* anchoring top, left and right sides */
top:0px;
right:0px;
left:0px;
margin:0;
padding:0;
}
Working Fiddle
Working Fiddle(with two div's)
So I've got this:
<div class="addedcartbg"><div class="addedcart"> Successfully added to cart. </div></div>
And I want it to pop up in the middle of the screen when an image is clicked. The image is currently opening "#" so it just goes to the top of the page.
My problem is, when I set the addedcartbg to position:fixed, it dissapears from the page completely. I also need to know how to centre it in the middle vertically on the screen, I know I can set left and right margins to auto to centre it horizontally, but that doesn't work with top and bottom.
This is my current CSS code for the divs:
.addedcartbg .addedcart {
background-color: #999;
height: 40px;
width: 300px;
margin-right: auto;
margin-left: auto;
padding-top: 15px;
}
.addedcartbg {
background-color: rgba(153,153,153,0.3);
height: 80px;
width: 320px;
padding-top: 40px;
padding-right: 30px;
padding-left: 30px;
}
I assume that this is your lighbox class than modify it like this, this should do the work for you
Demo
.addedcartbg {
background-color: rgba(153,153,153,0.3);
height: 80px;
width: 320px;
padding-top: 40px;
padding-right: 30px;
padding-left: 30px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px; /*half of total height + half of top padding*/
margin-left: -175px; /*half of total width + half of left padding*/
}
There are top and bottom along with position. You might also want to add, style for body.
body {
text-align:center;
/*the rest of your style*/
}
.addedcartbg {
position: relative;
top:200;
margin-right: auto;
margin-left: auto;
/*the rest of your style*/
}
you should also add a z-index
.addedcartbg {
z-index:9999; // include this to avoid overlay of other divs.
}
Im very new to css and I still find hard to understand some concepts especially positioning.
Anyway, my problem is that my when I set position: relative; of the container and my footer position: absolute;
bottom: 0; the footer became small. It had the same width as the container which is supposed to be before I placed those codes. I did it because I want my footer to be at the most bottom part of the container.
Below is the screen shot:
The maroon is the footer.
In my footer I don't use div but instead I use html element <footer>.
My css codes:
div#container {
height: 100%;
width: 1000px;
margin: auto;
background-color: #C9C9C9;
position: relative;
}
footer {
background-color: #340B09;
height: 50px;
position: absolute;
bottom: 0;
}
Please help.
Add width: 1000px; to your footer
Check this, if that may help you
https://developer.mozilla.org/samples/cssref/css-positioning.html
i will also encourage, you to have firebug installed in your browser
Also above the footer, add some div container, give it some height.. so that footer will stay at bottom. don't use positioning explicitly... since you are new to this.
Get yourself some time, you will be there on top of it..with CSS position :- )
Is it necessary for you to use relative and absolute positioning ? I'm asking since it has one drawback which is that the layout of the page will not be the same as always for all the different sizes of the screen.
Since you wanted to display footer at the bottom of the container, so here it can be done in this way.
<style type='text/css'>
body{
margin: 0px;
padding: 0px;
background-color: black;
}
#inbody{ /* main page */
padding-top: 10px;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
padding-bottom: 10px;
height: 1170px;
}
#container{ /*container */
padding: 10px;
margin-top: 10px;
margin-left: 30px;
margin-right: 30px;
height: 1130px;
background-color: orange;
}
#header{ /* header */
margin-left: 168px;
height: 51px;
}
#midbody{ /* middle body */
margin: 10px;
padding: 0px;
height: 999px;
}
#footer{ /* footer */
padding: 10px;
height: 30px;
background-color: black;
}
</style>
Moreover you can change colors of every part to see the changes. Also use inspect element which shows the HTML and CSS of the web page. Also for the box model concept try experimenting the metrics in the inspect element.
You are using;
footer {
background-color: #340B09;
height: 50px;
position: absolute;
bottom: 0;
}
If footer is some ID or Class, it should be defined in CSS like #footer or .footer and no problem if you are using html5 element footer.
If you want to stretch an element to fill container, use width: 100%. Add this to your footer if footer is inside your container. Otherwise it will stretch to screen.
I properly solved it by declaring width of footer to 980px; When I tried 1000px it became wider than the container because after researching I found out that mozilla and webkit doesn't include padding in the width.