I'm working on this website: www.lumn.net . The center panel (#overall) is supposed to be a div that stretches from the top to the bottom of the page. For some reason I can't figure out, I'm getting space at the bottom of every page. Even stranger, on only two pages, lumn.net/index.shtml and lumn.net/about.shtml, there's space at the top and the bottom both. <-- fixed
html and body both have height:100%.
If I set the height of the center panel to 100%, on the pages with extra space only at the bottom, it instead goes to 600px, a minimum height for one of its internal divs, and content beyond that runs out the bottom. On the pages with extra space at both the top and the bottom, nothing happens.
Setting top:0 and bottom:0 for the center panel has no effect on any of the pages.
I have no idea what I'm doing wrong or how to fix it other than things I've already tried.
Update: the problem with the space at the bottom was due to my footer being outside the center div and moved up into it using negative margins. When I move it inside, however, I still have a strange bit of extra space below it: lumn.net/about.shtml. How can I sit it inside my #overall center div properly?
Try changing the padding-bottom on #overal:
padding-bottom: 18px
Does that solve your problem?
On the homepage and about page you have some strange extra characters "? "
Maybe a php tag badly open?
Have you tried tp put a height of 100% on #overall? (for me it works...)
Your footer has a height of 28px (including the border) and a top of -42px. That leaves 16px of #overall sticking out below it - only 8px of which seems to be intentional.
As for the top of the page, that seems to be caused by an extraneous question mark (barely visible in the upper left-hand corner of the page).
Related
I have a news site and have a 300x600 banner in the middle of every post on the left side.
I want to move the banner 150px outside the 960px wide "page", so the banner is half in and half out.The only way I have figured out how to move the banner left is position:absolute, but the text doesnt wrap around the banner - which is what I need.
Yes, position:absolute doesn't wrap text because you are removing the element from the flow of the document.
You can margin it out by 150px using margin-left:-150px however, your css for the class .entry has overflow:hidden which will have to be removed in order for you to margin the banner ad outside the 960px post. Just be careful that removing that property doesn't cause other problems with your site.
Try with the property margin-left:-150px;
In my web site I am trying to lay out I am trying to get my page to have a left side sidebar/menu area with the main content area to the right. I want my main content area to stop at the right edge of the screen, so I tried to give the area a width: 100%, but this doesn't seem to work right. It seems to be 100% width, but then shifted to the right (and thus going off the side of the screen.
The code and result can be found at http://jsfiddle.net/KallDrexx/xmmSV/5/
How can I accomplish this to keep all the text in the page?
For your main-area, remove the width:100% and position:absolute, replace the left:160px with margin-left:160px and you're done.
It's because #main-area is set to 100% width, which will be 100% of the container (which is this case is body. So, it will be 100% of the page width. But because you're moving it left 160px, it's actual position is 100% of the body + 160px.
Does the layout need to be fluid? If not, you can just set the width of #main-area in pixels.
You can try to replace the: width: 100% with right: 0px of main-area.
Basically this tells that the right side of the box should be 0px to the left of the parent.
Now the main-area is still able to scale with the page width.
I'm trying to use sticky footers on my page but I'm having a problem where the footer appears below the window, even if there is no content.
This page says that this is caused by using margin on some of the elements, thus the footer is being "pushed" down by the accumulated values of the margin's. The page suggests to replace margin with padding, but that breaks my design, since they aren't exactly the same thing.
What else can I do to "pull" the footer up?
Here's a link to show my problem: http://john2x.com/wordpress/?p=4
If your div has padding maybe you should also sum the top and bottom paddings to the negative margin you're giving to it...
So for example if your div has 10px top and bottom margin, I think you should add 20px to its negative margins.
If there are elements with margin inside the footer that are pushing it down, maybe you should also add those margins to the negative margin of the footer.
I believe this is being caused by your #page-wrap min-height being set to 100%.
I think the easiest solution would be to move your footer div within the #page-wrap div, then it will fall within the bounds of the page.
Hope this helps!
I'm having trouble getting my footer to stick to the bottom of the page. It works in 1024x1280, which is what I'm designing for, but the #content section overlaps the footer and causes white space at the bottom of the window as soon as I test it in 1024x768 and 800x600. I've tried:
Setting the footer position to absolute w/ bottom:0 ;
Using position:fixed, which works, but overlaps the content. I want it to appear after the content.
Adding padding to the container and pulling the footer up with a negative margin
Adding padding to #content and pulling the footer up with a negative margin
Using a horrible hacky #push div set to the same height as the footer
Here's the page that's having the problem.
At this point I'm about ready to throw some Jquery at it and be done, but if there's a CSS way to solve the problem I'm open to suggestions.
Edit: If things look a bit wonky for a moment, it's because I'm adding a plugin to stretch the background image. Pardon the mess!
Check my website, and see the Divisions left menu. When you have maximized your broswer there is no problem, but when you restore it to half of screen, the left menu overlaps to the right.
Here is the CSS code. Can someone help me?
It's because your "divisions" div is absolutely positioned.
You can remove "position: absolute" and increase the width of the "divisions" div to 300px.
Your left menu is absolutely positioned that's why it overlaps other content when window size is too narrow. But the solution for this problem is quite tricky and actually depends on what you want to achieve.
Percentage
One possible solutions would be to set width on "divisions" and "content" div in percentage. This way they'll never overlap. But it depends if you can afford to have dynamic width for your "content" div.
Repositioning
If your content must be fixed width... You'll first have to decide how would you like your content/menu to appear when window is too narrow (maybe even narrower than content width)... And work from there.
Body element width
Set minimum window content (as in <body>) width. Either by using:
transparent image at the beginning of your document <img src="t.gif" width="1250">
set body's minimum width css as min-width: 1250px; has to be 1250px wide, because content is centrally positioned, so it must have equal space on the left and on the right (right one being useless empty space just allowing non overlapping space on the left of content)
The last one is actually the simplest and works. It only makes it a bit wide for smaller screen sizes, but your content width (including menu on the left) already exceeds 1030px anyway...
A very straight-forward and simple
and quick-fix solution would be with CSS :
#content {style.css (line 17)
left:-270px;
margin:0 auto;
padding:30px 10px 0 550px;
position:relative;
width:780px;
}
I tried this in my Firebug and it worked fine. hope it'll suit you're needs :)
next time just use css floats:
put the side menu and the content div in a wrapper,
float:left for the menu, and give the wrapper a fixed width, and center align it.
you can also make the navigation menu go "out" from the left with negative left positioning it.