Within my body tag I have a header and div#content element. My aim was to create a fixed header and then push the content of the content element out from under it using a margin-top attribute. However when I did this the header also moved down as though it were joined to the content. I fixed this by adding a position: absolute to the content. The trouble is I cant explain to myself why it worked. It just did. I am using Firefox on Ubuntu.
This is the header css:
header {
position: fixed;
top: 0px,
left: 0px;
margin: 0px;
background-color: #3F51B5;
font-family: sans-serif;
color: #FFFFFF;
width: 100%;
z-index: 1;
}
This is the content css:
#content {
position: absolute;
margin-top: 100px;
}
Here is the codepen.
Please educate me someone :)
Several observations:
position: absolute; didn't really fix it. Check out this codepen for a demonstration. Notice the fair amount of content I added after your divs and how they don't display correctly? This is because:
You had a typo on your first css element. Here's a codepen demonstrating a fix: http://codepen.io/anon/pen/YwvBJy You wrote , instead of ;. You didn't close the top: ; attribute so your browser tried to fix it by using the #content margin-top.
Bad syntax-- used a , instead of ; on line 3
header {
position: fixed;
top: 0px,
left: 0px;
so the attributes top and left are wrecked.
You used a comma instead of a semicolon here
head { top 0px }
Please replace the comma with smemicolon than you dont need position: absolute .
Related
I have this site:
http://dl.dg-site.com/functionmentes/
There is a div with color #D9D9D9
Code CSS:
#full_bar{background:#D9D9D9;width:100%;height:100px;}
I want to my div to be the full width site and to be glued to footer.
How can i make this?
I use a theme in Wordpress.
Thanks in advance!
By making the position fixed, this will ensure that it will follow the user as they scroll up and down your website.
#full_bar {
background: #d9d9d9;
width: 100%;
height: 100px;
position: fixed;
bottom: 0;
left: 0;
}
If you add position:absolute; left: 0; to the css, the bar will more or less do what you're trying to do, but it's a dirty hack.
The real problem is that you're adding your 'full_bar' in the wrong place (inside a div which restricts the width). Personally I would opt for placing the full-bar in your <footer> tag.
You should placed your gray bar outside the section, between section and footer or on footer on html.
But if you want a css solution, you need to put your section parent to position relative and set your gray bar on absolute bottom with full width:
section {
position: relative;
padding-bottom: 100px; // Your bar height
}
#full_bar{
background:#D9D9D9;
width:100%;
height:100px;
position: absolute;
bottom: 0;
left: 0;
}
You are putting #full_bar inside class="container". container is the parent of div id #full_bar, that's why its not taking full width.
Do your code outside contaner class and you can see the changes.
See the attachment, i think you want this as per i understand your question.
Actually this is a problem I encountered during the developing of blogger.
I want to write a navbar on my own, but the width of parent elements limit the style width:100%, even if I set the float properties to it.
Please see the image above. Only nav's HTML/JS/CSS are configurable. So how can I configure the CSS Style of class nav to archive this goal?
Or, If you have relevent experience in developing blogger, please tell me.
Thanks a lot!
use position absolute for your nav. Look at this FIDDLE
html :
<div class="first">0</div>
<div>
1
<div class="nav">NAV</div>
</div>
<div>2</div>
css :
div { background: grey; width: 75px; height: 50px; margin: 20px auto; }
.first { margin-top: 75px; }
.nav { background: red; position: absolute; top: 10px; left: 0px; width: 100%; margin: 0; }
EDIT
Your nav is in a position:relative; well you can append your nav to your body with that jquery (HERE THE FIDDLE UPDATED):
$(".nav").appendTo("body");
To achieve that kind of 'layering' you probably need to use absolute positioning, especially if your options are limited. This has the obvious caveat of taking it out of the page's flow, so you'll need to ensure your page is never too short for it to be visible. It won't affect other elements around it either.
So, something like:
nav {
left: 0;
position: absolute;
top: 400px;
width: 100%;
}
Hopefully one of its parents has a position: relative; so the nav knows where to use as an origin point when positioning absolutely, otherwise it'll use the top left of the browser pane.
You may also need a z-index value if you want your nav to appear behind the content.
Not sure if this is what you are searching for, but you can try giving your naviation position: absolute; and width: 100%;. This will get the navigation element out of the flow of the document.
I am trying to create a footer that is responsive and sticks to the bottom right of a page but can't get it to work consistently when a absolutely positioned div is on the same page.
The code I am using can be seen at:
http://192.241.203.146/sample-page/
I have tried:
position: absolute;
bottom: 0;
right: 0;
margin-bottom: 10px;
margin-top: 40px;
As well as:
float: right;
bottom: 0;
right: 0;
margin-bottom: 40px;
margin-top: 40px;
To get it to work, but it does not respect the absolutely positioned content on the page when it is resized down to mobile. It clashes like so:
I know that using position:absolute means that the div is removed from the flow of objects but I need to use it on the element in the middle of the page to avoid the objects jumping around when I use jQuery fades.
I suspect this is because it is not inside a span or row as per the bootstrap base I am using. Is that the problem?
I'm at a loss here - any guidance appreciated :)
Your problem is that the div is normal to the page, but his position is absolute. Inspecting your code i saw this:
if you want the footer is always visible in the bottom, you can wrap the footer to the div which width will be 100% of the width of the page. Like this:
div#footer_container{
min-width: 100%;
min-height: 100px;
position: relative;
}
div#footer_container div#footer{
position: absolute;
right: 0px;
bottom: 0px;
}
Result:
Red - main container of your page, Green - container of your footer (its always will be after the main container), Blue - your footer.
P.S. sorry for my english :)
I think I've found it!
Try this:
.main {
padding-bottom: 140px;
}
It works for me even if I reduce the width of the browser.
OK, So i've used to common "push" method with the footer to ensure that it stays to the bottom of the page... However, there is now an unnecessary gap between the container and the footer which means that there is always a scroll down, even if there is no content to push it down. I would hope that if there was no content, the footer would just stick nicely to the bottom of the website.
Has anyone else found this and been able to tackle it?
Thanks in advance :)
This can be done with just a few lines of CSS. Assuming that you are using the <footer> element, apply the following styling properties:
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
And that's it!
I use
#footer {
position: relative;
left: 0px;
bottom: 0px;
height: 150px; // whatever height you want
width: 100%;
}
works for me
I have an iframe which I want to fill all of an area on the page specified by the bottom, right, left, and top css styles. However, when I do the method I would expect to work, it does not:
HTML:
<iframe id="example_frame" src="http://example.com"></iframe>
CSS:
#example_frame {
position: absolute;
top: 1em;
left: 1em;
right: 1em;
bottom: 1em;
}
This results in a little box with the web page about 100x100 pixels
I think because iframes are replaced elements, you can't just set any combination of top, right, bottom, and left. Should you be able to? Absolutely. But you can't. Instead, you can set one vertical property (top or bottom), one horizontal property (left or right), and then set both height and width to 100%.
To achieve the effect you are going for where there's a 1em space around the iframe, simply wrap the iframe in another non-replaced element like a div.
<div class="abs-frame-container">
<iframe id="example_frame" src="http://example.com"></iframe>
</div>
The CSS that produces the effect you're going for is:
.abs-frame-container {
position: absolute;
top: 1em;
left: 1em;
right: 1em;
bottom: 1em;
}
.abs-frame-container iframe {
position: absolute;
top: 0;
left: 0;
border: 0;
height: 100%;
width: 100%;
}
Also look out for issues where setting border: 0 in CSS won't work in all browsers.
Absolute positioning works with one x and one y coordinate at a time. I'm guessing the browser is ignoring one set of your coordinates.
Also, since you haven't specified a with or a height for the iframe, it is defaulting to 100 x 100.
Try something like:
#example_frame {
position: absolute;
top: 5%;
left: 5%;
width: 90%;
height: 90%;
}
I don't know for sure, but don't you have to define the iframe as position: absolute to be able to set a size in terms of the browser window;? I'd imagine it's display:block by default?
Edited in response to comment from OP.
What doctype are you using? Does the problem occur in all browsers/platforms you can test on? Are you successfully calling the stylesheet? Are you using inline styles, styles in the head or an external sheet?
If you're not using inline-styles, try using them, just for a moment, to see if they work inline, or not.