Maybee this has been answered before, but can't find an real useful answer, so here goes:
I have this layout layout test, where I need the orange box to have the same height as the green, which will have dymanic content.
I'v tried different solutions, but not getting the right resultat. One solution was to have the orange and green box have:
padding-bottom: 500em;
margin: -500em;
and the parent overflow: hidden;
but the problem began with the red box bottom (floating on top of the purple) was cut off because of overflow: hidden;
Does anybody have an solution or maybe an idea? I prefer pure CSS, if possible.
The solution which works for me:
New layout test
Sorry i couldn't find a solution with pure CSS, but with this simple jquery you may have the desired result:
jQuery(document).ready(function( $ ){
var green = $('.col3').height();
var red = $('.col1').height();
$('.col2').height(green - red + 15);
});
Updated with my own solution, link in question.
Related
I like to change a little bit the TopBar Navigation in SharePoint 2013. I like to have only one line instead of two lines...
What I like to do:
1. I like to remove the green DIV that contains the links: Newsfeed, Skydrive, ... (suiteBarLeft)
A: This I have done with display: none;
2. I like to get the blue DIV "suiteBarRight" next to each other from the yellow DIV "s4-ribbonrow". The DIV "s4-ribbonrow" should be on the left side and the DIV "suiteBarRight" should be on the right side without any 'width' definitions...
A: Every time I have the problem that the DIV "suitebarRight" is behind the DIV "s4-ribbonrow" but I can not work with 'margin or width' tags here...
Any idea how I could do this?
See the following picture:
Picture
It's very hard to provide you with a code solution without you providing us some base code to work with. That said...
This should be approximately what you need to get started...
#suiteBar { float: left; }
#s4-ribbonrow { float: left; }
I found a solution by myself:
I had to use:
overflow: hidden;
Thanks for your answer.
Regards
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 ;)
I need a purple line along the top of the site. Instead of using an image I'm using the border-top property on the body. This works in full view but when I resize the browser window the purple line appears only in the viewport, when I scroll to the right I get a white space. Here's the fiddle so you can see what I mean. I've tried width: 100% on both the body and the container, but to no avail. Can someone suggest ways to accomplish what I need?
Thank you.
Not sure if this is the best way to accomplish it, but you can add position: absolute; to the body. This may have some undesired side effects.
If you know your documents width then you can specify a min-width.
body { min-width: 960px; }
Try the body border hack :)
http://css-tricks.com/558-body-border/
Designed for fixed position but should work for you as well.
Adding display: inline-block; to both body and container also worked. See http://jsfiddle.net/K5zVq/16/.
A secondary answer, related to skoh-fley's though maybe with less consequences, is to add float: left to the body: http://jsfiddle.net/K5zVq/20/. Though I think I would lean toward my first answer posted here (though you know your situation better than I).
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.
.leavesbg {
background: #f7fff7 url(/images/leaves4.png) repeat-y fixed 480px top;
}
So if the page is being viewed at greater than 800px wide, I'd like to move the bg image half that much further to the right. That is to say, if they were viewing it in 1024x640 for example, I'd like to add 112 ((1024-800)/2) to the width (so ... fixed 592px top;
Here's my jquery attempt to move it
function moveBG() {
var bgoffset =480;
var pagewidth = $('body').width();
if (pagewidth>800) {
bgoffset=pagewidth-bgoffset;
bgoffset=bgoffset/2;
}
$('.leavesbg').css(background-position: bgoffset +'px top');
}
$(document).ready(function(){
moveBG();
$(window).resize(moveBG);
});
I expect I'm just forgetting something simple, but I'm still relatively new to jQuery.
bgoffset=bgoffset+'px top';
$('.leavesbg').css('background-position', bgoffset );
So I was doing some of the original math wrong (but that's not terribly relevant to the actual question), but as far as I can tell the actual error in my code was the "change the css" line, and I think this works. There's probably a better and more efficient way to to this then the cobble I have have above, so I'd still welcome suggestions for how to code it better.
Thanks.
I answered this in a similar question with this fiddle:
http://jsfiddle.net/9ZgWg/26/
Here's the original question: centering an img within a div - both being resized
Good, you caught the syntax error in .css(attr,value) assignment. However if your pagewidet <= 800 the background-position is "480" not "480px top;" which I think is what you want. Also remember the common gotcha with css, if your element with a class of '.leavesbg' has a style attribute after the class attribute, and the style has 'background-position', it wins.