I have a footer table which always has to stay at the bottom. In order to achieve this I have made a div with a class wrapper. wrappers height and width are 100%. The footer is not inside the wrapper so it is always at the bottom. By giving the wrapper a margin bottom of -150px I pull the footer up. However when you re size the page it becomes evident that the the table inside wrapper inherited the margin bottom -150px which is strange. If I do set margin bottom 150px for the table it stops working in safari and chrome.
Here is the site: http://canmill.zxq.net
Help is greatly appreciated
There's a few design choices (specifically your wrapping divs) which have contributed to the problem. The code provided on this page should help you correct it: http://www.cssstickyfooter.com/using-sticky-footer-code.html
try
.wrapper {
padding: 0 0 200px 0;
}
.footer {
margin-top: 0px;
background: url(images/bottombg.jpg) repeat-x;
position: fixed;
bottom: 0px;
}
Related
I am making a website: http://arc-angyal.hu/
My first problem is, I cannot get the red div on the left side to be as high to fill the space between the header and the footer. It's placed right after the header and before the nav. I already set:
html, body {height: 100%; margin: 0px; padding: 0px;}
and the div:
< div style="background: rgb(204, 0, 0); min-height: 100%;
height: 100%; float: left; width: 10%;">< /div>
Clear is only set for the footer, to prevent the div from hanging into that.
My other problem is with the aside nav. I would like to get the list items yellowish background to be as long as the longest one's. I already tried several methods to get their width to 100% and other techniques for similar things I found on web.
I've been searching for the solution for both my problems, but I just could not find any that solved it. Any advices are welcomed and appreciated.
Set the header and footer to float left and width 100% with float:left;width:100%;
and your sidebar element should be in between of header and footer and you can make it clear:both;
Please take a look here, on my code. I am trying to make a responsive web page, but there is weird margin from top and bottom of first article column. I am talking about margin between top navigation and content column and between footer and content column, and I just set 10px margin to right column like below.
.content {
width: 69%;
float: left;
margin:0;
padding:0 10px 0 0;
}
I am new to web designing, and I don't know what wrong I am doing here. Please help me
Using
.topcontent{
display: inline-block;
}
should solve your problem.
You're experiencing the way margins collapse together. Set the top-margin on the H2 tag to 0, and the bottom-margin on the last paragraph to 0. Then to restore the white space, add top and bottom padding to the article element.
More info about margin collapse here:
https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing
I want that if people scroll over the page, the header will keep showing (logo + navigation bar). This is the css code I'm using:
#header_bar
{
margin: 0 auto;
width: 100%;
background-color: #1F1D1E;
height: 80px;
position: fixed;
top:0;
}
But this is what happens now: http://puu.sh/6FiXY.jpg
As you see the header now overlaps the image, how can I fix this? I've tried using margin-bottom / padding-bottom, but margin does nothing while padding makes the background box larger.
How can I fix this?
Supposing your HTML structure looks like
<div id="header_bar">...</div>
<div id="someOtherDiv">...</div>
Add margin-top to the next element after #header_bar
#someOtherDiv {
margin-top:80px; /* 80px because #header_bar is taking up 80px in height. */
}
demo
Since your header has a fixed position all your other elements will not take this into account. You could create a "wrapper" div for all the other content that is positioned 80px from the top. Just adding a margin or moving the element of the most top div might work too as long as it has relative (default) position.
You should be adding a margin to your content tags so that they are not instantly overlapped by the header.
See here: www.jsfiddle.net/cranavvo/5F8EP/
I am working on a website, at the moment on a sign-up page. Its all perfect, right until i realize some very annoying. I have kinda 2 elements on this page. A sign up div, and an img, for the logo in the top. And it is not even close to fill the whole html page. But it still adds the SCROLL BARS, and i can scroll like 20 px up and down, and from side to side. Very annoying plz help
You want to add margin: 0; to your body.
It's already 100% wide, and the margin pushes the width beyond the space available on screen. This causes a vertical scrollbar, and that, in turn, causes a horizontal scrollbar.
This can be fixed in two ways
Either change the width and height of the body to auto as:
html, body {
width: auto;
height: auto;
background: #11BD83;
}
JsFiddle
Or as suggested by #Per Salbark add margin : 0 to the body
html, body {
width: 100%;
height: 100%;
margin : 0;
background: #11BD83;
}
JsFiddle
Im trying to markup a picture to show on the bottom right corner of the webpage.
If i set the overall width of the page to 100%
and i set the picture to float right at the bottom it makes the trick perfectly but above
the mentioned picture is a bigger width picture which is around 1600px so when you open the the page in the small window browser then the floated picture is aligned but the scrollbar apears and scrolls to the full width of the page without the floated picture..
body{width:100%;}
thepicture{width: 1289px;
height: 446px;
position:relative;
float:right;}
So the second aproach: to make the body or a wrapper div fix width that is bigger than the upper picture mentioned:
body{min-width:1600px;}
Than looks great until somebody has a bigger screen than 1600px... the float ends at 1600px;
The firs solution needs to be tweaked but i cant figure it out how, some responsive floating would be great jquery maybe?
thanks in forwards
The problem is the pearl:)
Updated
May be this work:
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%
min-width: 1648px; /* the width of the longest element */
}
#bottomwrap {
/* replace with your background color */
background: url(path/to/picture) bottom right no-repeat;
width: 100%;
}
Rememer to reset body margin, padding to zero and set body height to 100%
Update:
I have update the solution for your case, modify the HTML structure, you can review here http://jsbin.com/ulatis/1/edit
It sounds like you need to use a background image here. Put the background on a 100% width div and set the background position to right bottom.
div.background{background: url('images/bg.png') no-repeat right bottom; width: 100%}
Try position: fixed; z-index: -1;, it does exactly what you're looking for. Example