As you can see by this fiddle here in white middle column (it is supposed to be coloured but jsfiddle wont for some reason) there is padding either side that leaves a horrible white strip down each side. I can't seem to find what is causing it though. Can anyone here have a crack at it? It does make it hard to see because obviously the color is the same but here is what it looks like normally. I need the 3 columns do be touching is all. Thanks for your help, I'm sure it's nothing too difficult.
http://jsfiddle.net/d9aSS/
body {
margin:0;
padding:0;
border:0;
width:100%;
background:#fff;
min-width:600px;
font-size:90%;
}
Stack overflow wanted some code with the link, please ignore.
.colright, .colmid, .colleft {
float: left;
position: relative;
width: 100%;
}
Remove the float: left; line to correct this... Hope it will help you... If any doubt ask...
Related
This white border is driving me crazy in IE and Edge, it does not appear in Chrome and Firefox.
If you follow the link:
Might.to
You will see that at the bottom of the page there is a white space of around 1 pixel high. I tried the common ways (after researching) to fix this:
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
border:0px;
margin:0px;
}
In my CSS:
*{
margin:0;
padding:0;
margin-top:0;
margin-bottom:0;
}
The white space only appears when I use position:fixed on my nav div (the top part). I want the "top" section to stick as the user browse through the website.
I looked around and I tried all solutions I could find on Stack Overflow or Google to no avail.
And I am unfortunately running out of ideas, can anyone help me out with this please?
Most of the site is made of "placeholders" for now, I want to fix the bugs and display glitches before changing everything.
Try to add:
width: 100%;
height: 100%;
border: none;
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
So I was having a look at my website on my mobile device and there are a few errors I haven't been able to fix. The first is the footer of my site.
http://www.webbmaster.com.au/web-programs/questdesign/
As you can see my footer looks distorted. Any ideas on how to fix it for mobile. This is my css code for the footer.
.footer {
background-color: #F6861F;
color: #fff;
padding: 20px 0;
text-align: center;
overflow: hidden;
width: 100%;
}
Also the other problem is the large amount of white space down the bottom of the page. How would I go about removing that?
Many thanks to whoever can help me sort this problem out.
It's because you're setting width by pixels. You cannot expect your website to be responsive if you specify height,width by pixels.
.body .container{
width:80%;
}
.navigation .nav-pills{
width:80%;
height:20%;
}
That should make your website look more acceptable in mobile view.
EDIT:
Add this to your css file.
#media screen and (max-width:767px){
.body .container{ width:80%; height:100%;}
.navigation .nav-pills{height:55px;width:100%;}
.nav > li{float:left;}
.nav-pills > li a{margin: 10px 10px;}
.sliderr{height:340px;}
.footer{margin-top:10%;}
}
Try it and let me know if you are happy with it. Also I don't think float left is needed. It's just a habit of mine :X
this worked out for me, had to go over my entire css a bit and edit, but seemed to work very nicely :)
http://www.cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/
html,
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
padding:1em;
background:#5ee;
}
#content {
padding:1em;
padding-bottom:5em; /* Height of the footer element */
}
#footer {
width:100%;
height:5em;
position:absolute;
bottom:0;
left:0;
background:#ee5;
}
This works for mobile and webpage, to keep the footer down there.
Doesn't have to be in px, I use em's :) Changed it to em's, this I find better for wwebpage setup :)
Tou can then have other items in absolute position to, just have to be relative to wour Wrapper, the part wich is your entire webpage :)
The body in min-height 100% wont do it, as the body adjust's to the content in the page, and therefore, if less text, it will not stretch out!
Hope ithis helps you as much as it did me :)
On my site here, the footer is white at the end when the padding-bottom isn't enough and wondered if someone could help diagnose.
Here's the footer CSS:
#footer {
color:#E0E0E0;
max-width:1280px;
margin:0 auto;
padding:1.45em 2% 0.4em;
}
And I'm wondering if the right-nav equal column CSS is affecting it:
.right-nav {
float: right;
width: 29.4%;
border-left: 1px solid #Dddddd;
padding-top:2em;
padding-bottom:10040px;
margin-bottom:-10000px;
}
Any ideas would be great.
*Update: this page here has a huge gap too, which is why I'm wondering if the right-nav has anything to do with it.
Sounds like you want to use a sticky footer.
http://ryanfait.com/sticky-footer/
This is the best tutorial I've found on the web. You may have to do some tweaking to your site's structure, though.
What this does is essentially forces the footer to always be at the bottom of the page, no matter what the size of the content. If the content is large enough, it sits at the bottom of the page as it should.
if i understood you right
then you need to add overflow to your footer
#footer
{
overflow:hidden;
}
Using this should work. Here is a jsFiddle example of it in action.
#footer {
bottom:0px;
position:absolute;
}
Ok, i've tried LOTS of solutions offered in StackOverflow about this issue, but none of them have worked. I guess this is a tricky thing and needs a tricky solution.
From what I've seen, each problem is different with this 'occupying' the body thing, so I guess I'm here with a different one.
I really need help here, guys.
Here's my problem: http://jsfiddle.net/Ff49Z/5/
And heres what I want: When the "wrapper" div does not fulfill the body, I want the div to expand to the bottom of it anyway. So, in the fiddle, what I'm trying to achieve is not a gray spot on my layout. As you can see, wrappers are 100% height (that is one common solution offered in SO for this problem) and that does not help.
It is this div that does not expand to fit the wrapper:
div#middle {
padding:10px;
margin:0 auto;
height: 100%;
}
BTW, when overscrolling, footer sticks and wrapper scrolls. That is the desired behaviour, and it works flawlessly.
I simply added:
div#middlewrap {
width:100%;
position:absolute;
margin-top:60px;
}
and works as you asked. EDIT: THIS IS WRONG - correct answer below
I was about to give up when I decided to rewrite the css from scratch, and it came out simpler than I expected. I simplified your CSS to the bones and added some cool overflow-y:auto; to the middle wrapper plus some sweet position:fixed; to the header and the footer. Then I adjusted the padding to the #middle content div and added a height:100%; to the body and html(so that every child of body can be successfully set to height:100%;) and that's what came out:
body, html {
margin:0;
height:100%;
}
div#headerwrap, div#footerwrap {
position: fixed;
left: 0;
right: 0;
}
div#headerwrap {
top: 0;
height:64px;
background-color: red;
}
div#middlewrap {
height:100%;
overflow-y:auto;
background-color: blue;
}
div#middle {
padding-top:70px;
padding-bottom:35px;
}
div#footerwrap {
bottom: 0;
height:32px;
background-color: green;
}
That's all the CSS you need. Pretty cool uh?
HERE IS THE FIDDLE
Note: I respected your syntax, which is also correct, but it's not necessary to write DIV before every #ID in your css. Deleting those selectors will dramatically decrease your css file weight in bigger projects.
Cheers.
Make all parent elements as height:100%:
body, html, body>div#middlewrap {
height: 100%;
}
div#middle {
min-height:100%;
}
Impossible solely with CSS. Need javascript involved. Take the client height - (header + footer) = min height for the content
Using % height doesn't work because the parent doesn't have a height defined.
I wanted to use "full width" stripe on my footer, but aparently it doesen't want to work. here is the example of what I have right now.:
I want the footer to do a repeat-x over its div. So, going off until the end of the screen (like its done on the upper part). This might be something extremely simple, but I'm fairly inexperienced with CSS styles, so please lend me a hand.
[EDIT] The footer div is inside a wrapper. The edges of the div are aligned with the wrapper width. My question is if its possible for it to "overlap" the limitations, until the end of the screen.
I would also like to give it a specific position, not variable with the end of the article. I understand that I need to use it as position:absolute, but it always apears right after the header, even if I give it a Y position. There is probably something simple I'm forgetting.
Here is the existent code I have in my Footer class:
#footer {
background:url(wp-content/uploads/2012/06/whitestripe.png) repeat-x;
position:relative;
width:100%;
clear:both;
text-align:center;
line-height:16px;
font-size:11px;
}
#footer a {
padding:2px 3px;
color:#004a6a;
text-decoration:none;
}
#footer a:hover {
color:#105a7a;
}
Thank you.
Marco Roberto.
Move the footer element outside the main wrapper so that it isn't constrained by it. Inside the body will do fine for example.
Then change the css:
#footer {
position: absolute; // or fixed if you want it to scroll along
left: 0;
right: 0; // or width: 100%
bottom: 10px; // change to the value you want
}
Hey now define in your css body and html width
as like this
html, body
{
width:100%;
}
background-image:url('paper.gif');
background-repeat:repeat-X;
Try this
http://www.w3schools.com/cssref/css3_pr_background-size.asp
This will help you to study...