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.
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'm trying to get a text within div to be entered with word spacing and image in the background.
An example of what i'm trying to achieve:
Her's a fiddle that shows what I achieved so far:
div {
width: 200px;
}
h2 {
display: inline-block;
text-align: center;
color: #000000;
word-spacing: 40px;
background: url("http://s33.postimg.org/twxfn1by7/Playlist_Triangle.png") top center no-repeat;
background-size:50px;
padding: 20px 0;
}
<div>
<h2>
Some text
</h2>
</div>
https://jsfiddle.net/wes2sa1t/
You'd have to wrap the words in something like a span so you can center them. This is how to do it with CSS, as you tagged this with the CSS tag, but you could also achieve this with jQuery.
HTML:
<div>
<h2>
<span>Some</span> <span>text</span>
</h2>
</div>
CSS:
h2 {
display: inline-block;
text-align: center;
color: #000000;
word-spacing: 40px;
background: url("http://s33.postimg.org/twxfn1by7/Playlist_Triangle.png") top center no-repeat;
background-size: 50px;
padding: 20px 0;
}
span {
width: 100px;
display: inline-block;
text-align: right;
}
span:nth-child(2) {
text-align: left;
}
Rather than centering something, it more seems like you want the image evenly spaced between the words. I agree w/ Blaine that the words need to be wrapped in a span. I don't agree with setting a fixed width though, as that is very constraining.
Instead, I would move the background image from the h2 and place it on a psuedo-element of one of the spans:
h2 {
display: inline-block;
text-align: center;
color: #000000;
padding: 20px 0;
font-size: 0; // gets rid of whitespace between the spans
}
span {
font-size: 24px; // resets the font-size of the words
}
span:nth-child(1):after {
content: '';
display: inline-block;
width: 50px;
height: 50px;
background: url("http://s33.postimg.org/twxfn1by7/Playlist_Triangle.png") top center no-repeat;
background-size: 50px;
}
Using inline-block places everything right next to each other, and putting a font-size: 0 on the h2 removes any whitespace.
Now the words can be any length, and the image will remain perfectly spaced between them.
Here's a demo: https://jsfiddle.net/rq8u5b3k/1/
If you can't control the markup for whatever reason, here's a jQuery snippet that will wrap each word in a span:
var words = $("h2").text().split(" ");
$("h2").empty();
$.each(words, function(i, v) {
$("h2").append($("<span>").text(v));
});
Updated demo: https://jsfiddle.net/rq8u5b3k/3/
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.
I am trying to duplicate this style of a sidebar menu with the background image, but when I use the same stylesheet code and image, it doesnt span the entire height of the sidebar.
The example: http://demo.ponjoh.com/Simpla-Admin/index.html
The css used (on example site and mine):
#sidebar {
background: url("../images/bg-sidebar.gif") no-repeat scroll left top transparent;
color: #888888;
font-size: 11px;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 230px;
}
On my site, the image only displays in its actual dimensions (230x197) and doesnt fill the sidebar. What am I missing?
The person who coded that CSS implemented the background image of the sidebar twice. Once in the body and once inside the sidebar.
body {
font-family: Arial, Helvetica, sans-serif;
color: #555;
background: #F0F0F0 url('../images/bg-body.gif') top left repeat-y;
/* sets bg image of sidebar, and #F0F0F0 for the rest */
font-size: 12px;
}
Here's what you're missing though:
background: url("../images/bg-sidebar.gif") repeat-y top left;
If the background image is a repeatable image... change no-repeat to repeat or vertically repeat-y
You would have to add a bottom: 0; as well as position: relative; to the #body-wrapper and activating the background-repeat. But be warned! This is a very dirty CSS coding method and will probably lead to misunderstandings and failures - still it works.
#body-wrapper {
/* Your code stuff ... */
position: relative; /* absolute positionings are 'relative' to their first 'position: relative;' parent */
}
#sidebar {
width: 230px;
position: absolute;
left: 0;
top: 0;
bottom: 0;
background: url("../images/bg-sidebar.gif") repeat-y scroll left top transparent;
color: #888888;
font-size: 11px;
}
I want to display a noscript warning when users have javascript disabled, in the same way StackOverflow does.
I use this html:
<noscript>
<div id="noscript-warning">
Este sitio funciona mejor con JavaScript habilitado. Descubrí
cómo habilitarlo.
</div>
</noscript>
and this css:
#noscript-warning
{
font-family: Arial,Helvetica,sans-serif;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 101;
text-align: center;
font-weight: bold;
font-size: 12pt;
color: white;
background-color: #AE0000;
padding: 10px 0;
display: block;
}
#noscript-warning a
{
color: #FFFFC6;
}
#container
{
width: 98%;
margin: auto;
padding: auto;
background-color: #fff;
color: black;
border-style: solid;
border-color: #3E4F4F;
border-width: 1px 2px 2px 1px;
line-height: 130%;
}
where #container is the main content element of my template.
When the noscript tag is visible, it appears in front of some content. I don't want that, the content should be displayed below the warning.
How can I do that?
If you want the behavior of position: fixed AND need to push the initial content down from the top, you can include a second div in your noscript area. Give this div visibility: hidden and a height equal to the height of the div with position: fixed.
The problem is with you setting position: fixed on the warning. You can't really expect the page's content to move around that, since you're fixing it to the top of the browser window. What would happen when you scroll down? The whole page's content rearranges itself to go around the warning?
Do you want the warning to be stuck at the top of the browser window even if they scroll? If not, position: fixed isn't what you're looking for.