Basically I'm a tad confused. You'll see at http://furnace.howcode.com , in the second column, the bottom scrollbar button is extended slightly beyond the end of the viewport. I'm pretty confused as I've been examining the CSS and can't find anything that's causing this.
Can you have a look? It's probably something simple that I've just missed! :)
Screenshot:
(source: droplr.com)
It's because you have used a fixed pixel height on #tabscontainer but a percentage on #ajaxresults. Resizing the window will show (or cut) more of the scrollbar since 90px won't always be 10% of the viewport.
The easiest way to fix this is to set #tabscontainer to have height:10%.
EDIT: Just noticed your comment about the tabs being a fixed height. Looking for an alternative fix.
Okay, found a fix though I haven't tested this in IE so you may want to have a look at that ;)
Give #col2 a position:relative
Remove height:90%, min-height:90% and max-height:90% from #ajaxresults.
Give #ajaxresults: position:absolute, top:90px and bottom:0.
Try that out and it should work as intended, but like I said I haven't checked IE so you may need to do a little more hacking to get it to work there.
Height on #tabscontainer element.
#tabscontainer {
background-color:black;
height:90px;
max-width:529px;
min-width:326px;
overflow-x:hidden !important;
width:100%;
}
Try:
#tabscontainer {
height:30px;
...
}
Follow-up on comment:
Decrease the #ajaxresults height then:
#ajaxresults {
height:70%;
max-height:70%
...
}
Related
demo http://www.bootply.com/pK8YqTHQXr
I want to add hover to the block to make appear the 3 Images but now I seem stuck at the overflow thing. The lower part of the box didn't wrap within the main block. Why?
I tried height 100% it become even worse.
try something like this
.box{
height:auto;
}
LINK TO CHECK http://www.bootply.com/ukAgZY9WBu
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).
Have a look at this fiddle: http://jsfiddle.net/h4VS7/
How do I make the yellow element align (horz) with the grey background no matter how the window is resized? I refuse to believe it can't be done with css. Yes, js hacks and Scroll Follow plugin works but lags.
Please, anyone?
Edit:
Found a solution. If the container margins are expressed as percentages the content part can be expressed as the remainder percentage. See here: http://jsfiddle.net/h4VS7/1/
Though not sure why it doesn't align perfectly. It should I think. Could be jsfiddle margin/padding related.
It's not particularly difficult if you don't mind adding an extra element to wrap .top:
http://jsfiddle.net/Ud3ZQ/
And also, a properly aligning (well, almost) version of your solution:
http://jsfiddle.net/h4VS7/3/
The problem was that jsFiddle loads http://fiddle.jshell.net/css/result-light.css:
body {background: white; padding: 10px; }
Anything is more specific than * (including body), so the padding was being applied, regardless of * {padding:0; margin:0}
.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.
I have been using a lot of position:relative; in my design, I just find it the easiest way to get everything where I need them to be.
However, the more items I add on my site (each one with their individual div) each one ends up further and further at the bottom of my page, so I have to manually position them higher.
This leaves a lot of empty space at the bottom, and I thought that adding height: 1000px; would limit the scrolling a bit, but this method doesn't seem to work.
I've even tried adding height: 1000px; to the wrapper and it's still not working.
How can I limit vertical scrolling, to the number of pixels I choose?
Thanks so much in advance.
Wait, so you are creating a div, using position relative to move the content of the div to the correct location, and the issue being that the div tag itself is still in the same place and creating a vertical scroll even though there is no content there?
If so you should look into floats.
Here are some tutorials.
Floatutorial
Learn CSS Positioning in Ten Steps
You can specify both the height and the overflow:
.someClass
{
height:1000px;
overflow:scroll;
}
The most common values for overflow are scroll, auto, and hidden.
To limit the distance someone can scroll, I think you'd need to use JavaScript. I'm not sure how, but I can't think of anything in CSS that would do that.
If you are looking to set when something should scroll instead of just be cut off or expand the tag, use overflow:auto;.