I've been looking for a solution, but haven't come up with anything so far.
I am building my site on wordpress. Everything is going fine, but I have a margin on the entire body on the right. You are able to scroll to the right and see where my header cuts off and there is a white margin. it does not do that with the admin bar at the top, only my theme body. I didn't add any margins to the body, the width is 100%. Anyone have an idea or a link with a solution? I'ved looked at it on a different computers and browsers and it does the same thing.
here is my website (work in progress)
http://www.thewaymultimedia.com/wordpress/
The problem appears to be your footer element. It has a width of 100% and also has left-right padding. If you make padding style on this element padding: 10px 0px the problem goes away.
Related
Having an issue with content with floated images and text that is now deep inside a flex container (wasn't in previous site). See here for example: https://m2.alocalprinter.shop/products/flyers-leaflets/flyer-printing
Scroll down to the description below the products. The floated icons next to the text should be 60x60px with 20px right padding and variable bottom padding. But they are rendered at 40x40px. If I increase image width to 80px then it renders at 60px. For whatever reason flex is setting the image width to width minus padding. Only way I have found to correct this is to switch from padding to margin then it behaves as expected. For example, first icon using margin instead of padding:
Problem is that would require us to go through all the content to make this change. I've tried to reproduce this on CodePen but with a simple layout it doesn't happen. Must be something to do with the more complex layout of a real page. I've tried everything I can think of and have found but nothing other than using margin instead of padding fixes it.
Can anyone see a way to fix this flex bug with CSS rather then having to change all the content to workaround it?
Yes there are better ways to lay out the content but what's been done is what worked perfectly well before and suits the skills of staff that manage the content day-to-day.
#Adam Because there is box-sizing property applied by default. So in this case you can initialize image box-sizing: initial; by adding css for images.
so this will help you.
.category-below-description img {
box-sizing: initial;
}
I have a website called http://www.willtakesurveysforfood.com/. On that website I have two issues:
The navigation bar is making my website scroll sideways. The width is at 100% so I'm not sure what's wrong.
The bottom border of the .POST Div is missing.
If I can get any help that'd be great. Thanks!
Remove the padding from your UL. Since you have given your UL a width of 100 % the padding will be added on top of that, unless you use a box model.
Gatekeeper answered your other question in a comment.
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).
Think that you have a content div whether the content of a website is presented. This div has a margin-top of 20px, because it has to have some margin from the header. There is also a right sidebar. Meaning there is an external div, say whole content and inside two floating divs next to each other. One for the content, one for the sidebar. Pretty standard.
Now, i suddenly need to add breadcrumbs to the content. Now, the breadcrumbs should not have any margin from the header. The content, however, needs to have 20px top margin independent of whether breadcrumbs are active or not.
Apparantly, i can just make it so that breadcrumbs is on a different div, right on top of the content div. This would need that the content div will now be split into two divs, say 'breadcrumb' and 'main_content'.
This sounds like a bad idea to me, because i reckon that a breadcrumb is actually part of content. Moreover, i would need to change all my templates in order to present them with this new div and general markup change.
I tried to add a top-margin: -20px to the breadcrumb div, but it's not good, because it gets applied to the other content as well.
Any ideas on how to do that in a good way ?
P.S. The sidebar div does not have the same 20px margin, only the main content has that margin, for its internal content.
Does position: relative; top: -20px; work for you?
Give position:relative for main_content div. then you have to apply position:absolute, top:some-px; bottom:some-px as per your requirement.
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!