I'm making a page with HTML and CSS and the width of the page is growing as I use
position:relative;
left:100px;
When I put this code in CSS, the page is pushed to the right 100px making a huge blank area to the right of my website which looks horrible.
Here is a link to my website: Wagicalmales
If you side scroll right you'll see what I mean.
Thanks in advance,
Alex
That is the correct behaviour when using position: relative (the position is set relative to where it would have been).
I'm assuming the element you are having issues with is the h1 with the 'WagicalMales' text it. To fix your problem change left:200px to margin-left:200px.
Related
I have difficulties sticking a footer at the end of each pages without showing a bottom margin on very big resolutions (2560x1440 for instance).
When used as "position:absolute" element it works fine on small heights pages such as http://www.perfect-profile.fr/mesdames
Unfortunately, when on big heights pages, the footer will stays in the middle of the page : http://www.perfect-profile.fr/prix
I tried "position:relative" and that's the opposite : it show at the end of the content on big heights pages and keeps a margin in the bottom on small heights pages. I could determine a section min-height but the result would be hasardous on big resolutions.
Do you have any clue what I could do ? Thanks
You need to use:
position:fixed
and your footer will stay at the bottom of the viewport...
Well, as it seemed trickier than expected I had no other choice than to rethink the display.
I used a "position:fixed" and "bottom:0" footer to put it at the very bottom of the viewport no matter how much content the pages have. Not what the client expected but that does the trick.
Thanks everyone for trying to help me on this one. Problem solved.
<style>
footer
{
position:absolute;
bottom:0;
width:100%;
}
</style>
you have to set footer position fixed or absolute
I am working on a small PSD to HTML File. So did everything and completed the whole index file somehow but now at last when I came to create the footer and nothing is showing up.
Wondering why footer is not showing?
Here is the index page link : http://www.webngraphicssolutions.com/urgent_psd/index.html
Because you have style="position:absolute; top:150px;" applied to the image inside the footer. And there is nothing in the footer other than that.
Do this, to see that footer image is loading but is not visible due to positioning.
style="position:absolute; top:50px; left:100px"
or do this
style="position:fixed; bottom:0; left:40%;"
You need to remove absolute positioning and let the footer fall where it should, then apply relative positioning or absolute one if required.
A comment: bad bad HTML/CSS programming.
But as an exercise,
first create Container, Header, Content and Footer.
Fill them with data. Do not apply CSS yet, get to know their static positions first.
Then, move things around with position and floating.
This is not how seasoned web designer work, but it's a start.
position:fixed; on your css
see if it helps
Is it even possible? I made a header for my site position at "fixed". The i also have an image positioned at "relative". Whenever I scroll the site.... I noticed that the image was layered "above" the header. Even the twitter profile widget i placed was above the header. They both overlap the header and i dont want that. Any idea on how to resolve my problem? please HELP!
Btw.... ive heard that "fixed" is buggy esp in Android, where I am making my site.
You'll need to use z-index to set the layering, something like this:
.menu {position:fixed; z-index:99999}
.content {position:relative; z-index:1}
Then you can fine tune it by using numbers in between.
I want my footer to always be at the bottom of the page. I tried using:
bottom:0px;
position:relative;
But that seems to let it go into the middle of the screen under the text. What am I doing wrong. I really dont want to used fixed because of the IPAD!
Use position:absolute and make sure, that the footer is not inside another element with position:relative or position:absolute.
However, that will position your footer at the very end of your page, not at the lower rim of the screen. To do this you will have to do nasty Javascript hacks. Google for "iPad" and "position fixed" to get started.
Or see this SO question.
I want my footer (on some pages) to remain fixed to the bottom of the browser window regardless of the height of the content. Similar to some of the toolbars you see fixed on the bottom of the browser window on sites like www.facebook.com and the meebo toolbar (e.g. abduzeedo.com).
I did some quick searching and I see some jQuery scripts and CSS hacks with users complaining about IE incompatibility, etc... is there a good standard way of doing this? Even with meebo and facebook, it seems like the toolbar can kind of jump a little as you scroll whereas the CSS solutions look very solid. Is there a simple CSS solution? I assume it's something along the lines of making the footer have absolute positioning with bottom: 0...
If you want something to "stick" to the bottom, you should use the css fixed position. This will locate it to the bottom of the window.
Using "absolute" will not be correct, because it will located the div relative to the first non-static element. Most of the time this is the window, but that doesn't have to be the case.
Html code:
<div class="bottom"><h1>Add to bottom</h1></div>
Css code:
div.bottom {
position:fixed;
bottom:0px;
height:200px;
left:0px;
right:0px;
border:solid 4px red;
}
There is a very good tutorial from a guy called Soh Tanaka - http://www.sohtanaka.com/web-design/facebook-style-footer-admin-panel-part-1/
Use absolute positioning in CSS.
http://jsfiddle.net/TMD9X/