So I had my "My Work" page laid out exactly the way I wanted it yesterday, and I needed to change servers. I changed servers, and all my other sites are fine, but the look of my "My Work" page got messed up. Basically the background image from the bottom widget area is now in the middle of the page. It looks like nothing on this page is inside of its container anymore. It definitely was before I changed servers.
Any help would be greatly appreciated, I've no idea why it's only affecting this one page on this one site. I tried re-uploading the css file, and the entire theme to the new server and nothing changed.
Edit: Sorry, here is the css for the widget area that's floating in the middle of the page:
.widget-area {
padding-top: 40px;
font-family: 'Alegreya Sans', sans-serif;
font-size: 20px;
color:#d2c1ad;
margin-top: 3%;
background-image:url(images/widgetarea.png);
background-repeat:no-repeat;
background-size: 101%;
}
EDIT:
Floated items do not take up any space. So even though you have a bunch of .gallery-item divs in there, they are not making the container have a height since they're floated. You need to clear the float. The easiest way is to add a div after the last .gallery-item. Give it the css of clear:both;
On line 555 of your stylesheet where you have .widget-area, add:
background-position: bottom center;
The problem is the margin-top on your aside objects in the widget. To prove this, change the margin-top to a smaller value for your .widget class. For me, this moved the black wiggly thingy to the bottom, just above the footer, and the three aside elements were to the right, all above or below each other.
I'm guessing there is a better way to make this work, and I personally would stay away with using percentages. But I'm in no way a css expert and there are plenty of those on here that might give you a better, more robust solution to your problem.
Related
I recently read about the "holy grail" design and read implementations for it.
I saw a solution that does something strange on the menus from the sides.
{
margin-bottom: -3200px;
padding-bottom: 32000px;
}
I understand this mechanism causes the menu to be "infinite", I also found out this trick is called bleeding.
I don't understand how it works. Can someone please explain?
EDIT:
both answers were great. Wish I could pick 2. Picked the first one answered. I found another resource that emphasizes on negative margin values which explains bleed as well.
http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/
Thanks.
Padding-bottom at that value with stretch the background of the menu down far enough that it will always be seen to take up the whole length of the page. The margin adjustment gives the ability to still position content over this stretched out menu at a position according to the design of your site. Here is an example with the properties adjusted so that you can more easily see what is happening:
http://jsfiddle.net/PVKbp/23/
.two
{
margin-bottom: -3200px;
padding-bottom: 32000px;
margin-left: 100px;
margin-right: 100px;
background-color: #aaaaaa;
}
Bleed in printing is where you create a design purposely extended over the boundaries of the canvas, to ensure that all the page is covered. It basically means that you won't get any dodgy white edges where your design didn't "fit" the document properly:
http://www.duggal.com/connect/wp-content/uploads/2010/08/bleed2.jpg
I suppose the idea of bleed is the same in this instance, whereby you're trying to cover having any potential white spaces by adding padding to the menu
CSS
The only "holy grail" I've heard of in CSS is the 3-column one? If this is the case, I would say that having padding 32000px will be needlessly resource intensive
I've never really created 100% height responsive stuff, so here's a good resource for you: Twitter Bootstrap2 100% height responsive
This is some html and css, you can see what it does:_ (The first box is really the one that matters)
http://jsfiddle.net/rcGsH/2/
The problem is to make this work properly with the image there, I have to use some tricks to get it to work properly that don't seem very good... like
floating the img left or right so it's not really taking up space.. (is there another way around this? or is it fine how i'm doing it?)
.ad img {
height: 175px; width: 175px;
float: left;
}
And making another wrapper div around the text inside the ad_info div and setting it to bottom: 175px so that the text stays in the transparent part... is there another way to this as well?
If anyone has proper fixes to these problems or these are fine please tell...
OR I have another idea where i could put the image as a background image with JQuery, (since the image will come from php), i have a good idea of how that would work but could anyone tell me which solution is better?
Thanks!
There is a lot of ways to do this, you are doing right (maybe some extra divs), but I thinks this is what you are looking for:
Boxes, images and captions
Like an extra, they use a little bit jquery, to animate the boxes ;)
First off, let me apologise for the lack of SSCCE. I don't really have enough expertise in this area to figure out what's relevant and what isn't.
In short, the problem is that on two different computers running the same resolution (1366x768), the top border (around the content) on my girlfriend's tumblr theme is off by about 1-3 pixels on one or the other screen. We've tried using measurements in pixels, percentages and em but to no avail. One system is running chromium on Ubuntu 11.10, the other is running Chrome on Windows 7. At the moment, it's the Windows 7 system that's wrong.
Here's what it looks like on my screen:
Hopefully it's obvious what it should look like.
Here's the snippet that counts:
#header {
width: 650px;
height: 10px;
background: url('http://24.media.tumblr.com/tumblr_m7nz4c8UrU1rnrxu1o1_1280.png') no-repeat;
margin-left: 34.40em;
margin-top: 30px;
}
I'd like to draw particular attention to the margin-left rule as that is the rule that, if changed, affects the alignment of the border.
Finally, here's a pastebin link to the entire page, markup and all, in case there's something else that's relevant:
http://pastebin.com/MfxYgv0C
try to use wrapper div for header and content and set the left margin to wrapper.
I am unable to get the white space at the bottom of this page to disappear. I have both min-height and height tags in body. Any suggestions? Thanks!
http://womancareolympia.webs.com/
I find it quite remarkable that out of 6 answers, none of them have mentioned the real source of the problem.
Collapsing margins on the last p inside #fw-footer is where that extra space is originating from.
A sensible fix would be to add overflow: hidden to #fw-footer (or simply add margin: 0 on the last p).
You could also just move the script inside that last p outside of the p, and then remove the p entirely; there's no need to wrap a script in a p. The first p (#fw-foottext) has margin: 0 applied, so the problem won't happen with that one.
As an aside, you've broken the fix I gave you in this question:
CSS3 gradient background with unwanted white space at bottom
You need html { height: 100% } and body { min-height: 100% }.
At the moment, you have html { height: auto } being applied, which does not work:
(This happens with a window taller than the content on the page)
The problem is how 100% height is being calculated. Two ways to deal with this.
Add 20px to the body padding-bottom
body {
padding-bottom: 20px;
}
or add a transparent border to body
body {
border: 1px solid transparent;
}
Both worked for me in firebug
In defense of this answer
Below are some comments regarding the correctness of my answer to this question. These kinds of discussions are exactly why stackoverflow is so great. Many different people have different opinions on how best to solve the problem. I've learned some incredible coding style that I would not have thought of myself. And I've been told that readers have learned something from my style from time to time. Social coding has really encouraged me to be a better programmer.
Social coding can, at times, be disturbing. I hate it when I spend 30 minutes flushing out an answer with a jsfiddle and detailed explanation only to submit and find 10 other answers all saying the same thing in less detail. And the author accepts someone else's answer. How frustrating! I think that this has happend to my fellow contributors–in particular thirtydot.
Thirtydot's answer is completely legit. The p around the script is the culprit in this problem. Remove it and the space goes away. It also is a good answer to this question.
But why? Shouldn't the p tag's height, padding and margin be calculated into the height of the body?
And it is! If you remove the padding-bottom style that I've suggested and then set the body's background to black, you will see that the body's height includes this extra p space accurately (you see the strip at the bottom turn to black). But the gradient fails to include it when finding where to start. This is the real problem.
The two solutions that I've offered are ways to tell the browser to calculate the gradient properly. In fact, the padding-bottom could just be 1px. The value isn't important, but the setting is. It makes the browser take a look at where the body ends. Setting the border will have the same effect.
In my opinion, a padding setting of 20px looks the best for this page and that is why I answered it this way. It is addressing the problem of where the gradient starts.
Now, if I were building this page. I would have avoided wrapping the script in a p tag. But I must assume that author of the page either can't change it or has a good reason for putting it in there. I don't know what that script does. Will it write something that needs a p tag? Again, I would avoid this practice and it is fine to question its presence, but also I accept that there are cases where it must be there.
My hope in writing this "defense" is that the people who marked down this answer might consider that decision. My answer is thought out, purposeful, and relevant. The author thought so. However, in this social environment, I respect that you disagree and have a right to degrade my answer. I just hope that your choice is motivated by disagreement with my answer and not that author chose mine over yours.
I had white space at the bottom of all my websites; this is how I solved the matter:
the first and best thing you can do when you are debugging css issues like this is to add:
*{ border: 1px solid red; }
this css line puts a red box around all your css elements.
I had white space at the bottom of my page due to a faulty chrome extension which was adding the div dp_swf_engine to the bottom of my page:
<div id="dp_swf_engine" style="position: absolute; width: 1px; height: 1px;"></div>
without the red box, I would have never noticed a 1px div. I then got rid of the faulty extension, and put display:none on #dp_swf_engine as a secondary measure. (who knows when it could come back to add random white space at the bottom of my page for all my pages and apps?!)
Try setting the height of the html element to 100% as well.
html {
min-height: 100%;
overflow-y: scroll;
}
body {
min-height: 100%;
}
Reference from this answer..
This will remove the margin and padding from your page elements, since there is a paragraph with a script inside that is causing an added margin. this way you should reset it and then you can style the other elements of your page, or you could give that paragraph an id and set margin to zero only for it.
<style>
* {
margin: 0;
padding: 0;
}
</style>
Try to put this as the first style.
The problem is the background image on the html element. You appear to have set it to "null" which is not valid. Try removing that CSS rule entirely, or at least setting background-image:none
EDIT: the CSS file says it is "generated" so I don't know exactly what you will be able to edit. The problem is this line:
html {
background-color: null !important;
background-position: null !important;
background-repeat: repeat !important;
background-image: url('http://images.freewebs.com/Images/null.gif') !important;
}
I'm guessing you've put null as a value and it has set the background to a GIF called 'null'.
There is a second paragraph in your footer that contains a script. It is this that is causing the issue.
It is happening Due to:
<p><script>var _nwls=[];if(window.jQuery&&window.jQuery.find){_nwls=jQuery.find(".fw_link_newWindow");}else{if(document.getElementsByClassName){_nwls=document.getElementsByClassName("fw_link_newWindow");}else{if(document.querySelectorAll){_nwls=document.querySelectorAll(".fw_link_newWindow");}else{document.write('<scr'+'ipt src="http://static.websimages.com/static/global/js/sizzle/sizzle.min.js"><\/scr'+'ipt>');if(window.Sizzle){_nwls=Sizzle(".fw_link_newWindow");}}}}var numlinks=_nwls.length;for(var i=0;i<numlinks;i++){_nwls[i].target="_blank";}</script></p>
Remove <p></p> around the script.
(class/ID):after {
content:none;
}
Always works for me
class or ID can be for a div or even body causing the white space.
I had the same problem when parsing html to string. Removing the last <p></p> (and replacing it with an alternative if desirable, like < /br>) solved it for me.
I faced this issue because my web page was zoomed out to 90% and as I was viewing my page in responsive mode through the browser developer tools, I did not notice it right away.
I couldn't find a previous post for this, and I apologize if this is an uber-n00b question.
I am working on my first practice site (just XHTML and CSS/3 stages right now). I wanted to test the page to make sure that when I reduce the size of the browser window everything still looks the same. When I did that, my navigation column overlapped part of the page and the background image I have embedded in my h1 header doesn't fill all the x-axis all the way to the right.
What did I do wrong, and how can I fix this the right (web standards)?
P.S...Here's the code
h1 {
font-size: x-large;
color: white;
padding-top: 2em;
padding-bottom: .2em;
padding-left: .4em;
margin: 0;
background: navy url(backgrounds/header-bg.jpg) repeat-y right;
}
#navigation {
width: 180px;
height: 484px;
background: #7da5d8 url(backgrounds/nav-bg.jpg) no-repeat;
}
There are several strategies. it's really an art and it's a bit too involved to be answered fully here. It's something web designers have been dealing with for years, and you'll develop your own style and strategy, but there are good recommendations and best practices available on the web to find.
I'd start with this search:
http://www.bing.com/search?q=web+design+gracefully++resize&src=IE-SearchBox&FORM=IE8SRC
This is the first truly good result from that search: http://mirificampress.com/permalink/daynamically_resizing_text_with_css_and_javascript
but there are other good results as well.
Try giving a fixed width to the main container or the body itself.
body{
width:1000px;
}
If you post your current code, we may give you a better solution.
Ah well, this was going to be a comment, but I just kept going...
The nav column overlap is most likely because it is defined with a fixed width (px or em (which are fixed for this purpose)) and not a fluid unit like percentage. With all respect to David Stratton (and he's right, it is an art to in-depth to be answered here), try building your layout using percentages when appropriate to make the page scale well.
In response to the idea of fixing the width of an outer container, that is also a possibility, but one which doesn't degrade nicely if the user has a very small or large screen or a very high or low resolution.
Try googling with fluid page layout web design