I have a responsive fluid design portfolio with 3 columns. Something is wrong with the CSS that I am having trouble pinpointing.
If I have exactly 3 items on a row, it appears fine. However, if the last item ends on a line with only 1 or 2 columns, then the whole format gets distorted. This can be seen by resizing the browser.
If you can help me pinpoint the CSS fix for this, I will appreciate it GREATLY.
The example page is here: http://bit.ly/KzfN2g
I believe this is the main css style that is the culprit of the problem, however I could be wrong:
.mosaic-block-three {
margin-right:3%;
width:29.3%;
background:url("../img/progress.gif") no-repeat scroll center center #F5F5F5;
border:1px solid #FFFFFF;
box-shadow:0 0 4px 0 #888888;
float:left;
margin:10px 40px 30px 0;
overflow:hidden;
position:relative;
width:291px;
}
whoa, holy registered trademark batman! i would put a
<sup>®</sup>
if i were you :) but to the question at hand...
why do you have so many lists with only one item? you've also got some styles in there that aren't defined, but i think your biggest problem is that you have items within
<li>
that are floated while the containing elements are not.
try floating .portfolio-three-item then clearing the contents within it. having floated elements inside non-floated elements (without using a clearing class or
<br clear="all" />
confuses the browser and it doesn't look as though any of the contents need to be floated.
I was able to accomplish this using simple jQuery to get the height of the image on page load and declare the height in css, then get the height of the image on window resize and redeclare it in css
$j(document).ready(function() {
// Set portfolio image item height after images load,
$j(".mosaic-backdrop img").load(function(){
var portfolioItemHeight = $j(".mosaic-backdrop img").height();
$j(".portfolio-three-item").css("height", portfolioItemHeight);
});
// reset portfolio image item height each time window is maximized
if(screen.width > 1200) {
$j(".mosaic-backdrop img").load(function(){
var portfolioItemHeight = $j(".mosaic-backdrop img").height();
$j(".portfolio-three-item").css("height", portfolioItemHeight);
});
}
// reset portfolio image item height each time window is resized
$j(window).resize(function() {
var portfolioItemHeightReized = $j(".mosaic-backdrop img").height();
$j(".portfolio-three-item").css("height", portfolioItemHeightReized);
});
});
Thank you, #kristina childs, for helping me realize it was that the height was not set properly!
Related
Using w3css with a pinned navbar (ie enclosed in a with class w3-top) how can I know the height of the navbar (which will vary with screen size) so I can leave this much space at the top of my non-pinned content so the navbar doesn't overwrite content?
My best solution so far is to duplicate the navbar in javascript and insert that at the top of the page without the w3-top class so that there is a hidden element which is always the same size at the top of the page.
...
<div id="pinned_nav" class="w3-top">
<ul class="w3-navbar w3-light-grey w3-border">
<li>
...
<script type="text/javascript">
//Duplicate the nav without pinning it to the top - this means that the other content will adjust to height of pinned nav
var nav = document.getElementById("pinned_nav");
var nav_copy = nav.cloneNode(true);
nav_copy.classList.remove("w3-top");
nav.parentElement.insertBefore(nav_copy, nav);
</script>
...
Since this seemed less error prone than just copy and pasting the HTML block.
But it's still rather clunky and I just wondered if there was a simpler way I was missing.
Other questions like this one which are not w3css specific suggest using a fixed margin to skip a pinned toolbar but I can't see how to determine this margin height with a responsive navbar.
You could use a Javascript script to get the height and append it however you want to use it.
function getHeight() {
var nav = document.getElementById("pinned_nav");
var nav_height = nav.offsetHeight; //append this var where you need to.
alert(nav_height);
};
window.onload = getHeight();
window.onresize = getHeight(); //edit, added for if you resize the page
#pinned_nav {
height: 100px;
/*as example */
background-color: red;
}
<div id="pinned_nav" class="w3-top"></div>
EDT
Added resize event subscription.
Is there an elegant way to set breakpoints, of sorts, on height of containers.
Example:
Say you have a div and a min-height is set at say 100px. As soon as the content gets too much it doesn't just grow, but grows by another 100px and when the content eventually gets to the bottom of the 200px extend the height by another 100px.
Has anyone do anything like this before?
I don't think this is possible only using CSS, but you can use javascript:
html:
<div id='div'>hello</div>
javascript:
var div = document.getElementById('div');
var height = 0;
div.style.height = height + "px";
while(div.scrollHeight > div.clientHeight){
height += 50;
div.style.height = height+"px";
}
http://jsfiddle.net/fa7d0/JkT7R/
I found your question very interesting so i took the grow bit literally and created a fiddle where content changes is handled and the containing div is increased either in width or height by a defined threshold.
Fiddle: http://jsfiddle.net/Tvswj/1/
The main idea is that you'll only have to listen for DOM changes and then run a jQuery function as such:
// Trigger the resize function on content change
$(myDiv).bind('DOMNodeInserted DOMSubtreeModified DOMNodeRemoved', function () {
$(this).breakpointResize(threshold);
});
If you find it useful, please go ahead and use it and modify as you want.
Credits for DOM events: How to alert ,when div content changes using jquery
You can use container style height: auto ! Important; and min-height: 100px; width: 100%;
I'm having some issues with scrollbars on element with position: absolute. The behavior I'm experiencing is that chrome 21 and firefox 15 displays scrollbars inside the box, resizing it's content thus hiding some of the text, however opera 12 and internet explorer 9 displays it also on the inside, but without resizing it's content and resizing the box instead (which is in my opinion correct, since the box doesn't have width defined). Is there any solution to make this look the same in those 4 browsers?
JsFiddle: http://jsfiddle.net/Kukkimonsuta/GaMD7/2/
Edit: as Siva Charan pointed out, it works correctly when overflow-y is set to "scroll" however that shows scrollbar always which is not desired
Edit: my final solution based on answers from Siva Charan and anonymous down voting is lame
http://jsfiddle.net/Kukkimonsuta/GaMD7/15/
function updateAutoScroll(element) {
var $element = $(element);
if (element.scrollHeight > element.clientHeight)
$element.css("overflow-y", "scroll");
else
$element.css("overflow-y", "auto");
}
The only way to do this dynamically across all browsers is with JavaScript, for simplicity I used jQuery.
http://jsfiddle.net/iambriansreed/mYuQx/
$(function(){
// loops through each container
$('.container').each(function(){
if(this.scrollHeight>this.clientHeight)
$(this).children().wrapAll(
'<div style="padding-right:'+scrollbarWidth()+'px;"/>'
);
});
// gets the browsers current scrollbar width
function scrollbarWidth() {
var parent, child, width;
if(width===undefined) {
parent = $('<div style="width:50px;height:50px;overflow:auto"><div/></div>').appendTo('body');
child = parent.children();
width = child.innerWidth() -
child.height(99).innerWidth();
parent.remove();
}
return width;
};
});
Add overflow-y: scroll; to .container.two
.container.two {
top: 250px;
overflow-y: scroll;
}
Refer LIVE DEMO
UPDATE:
If you are comfortable, you can use text-overflow: ellipsis; and replace to actual space
This is more of a workaround than an actual solution, but it might be good enough. Basically, first wrap the contents of container two in another div, and add some right padding to it. Make sure you also set width: 100% in .item.
Here's a modified version of your demo: little link.
This isn't perfect, but I hope it helped!
I have a side bar that contains two divs. The first div may or may not have content, depending on what else is done on the page. The second div contains a long list of things and has a limited height, so scrolling is possible. I want to have the sidebar be as tall as the page, and I want the list container in the sidebar to be as tall as the sidebar minus the height of the header (which will change while using the page). I don't care about limiting the size of the header. The biggest is will get isn't anything significant.
Right now I'm just setting the height of the list container to be some number that is won't go over a maximized window height if the header div as as much content as it can, but this leaves an empty space at the bottom when the header is empty, and still doesn't work very well if the window is resized.
The layout is similar to this.
Is there a css solution to what I'm looking for, or will I have to use javascript and get window height/set div heights in pixels? I'm fine with either, it just seemed like there should be a CSS way to accomplish it.
If you're not opposed to using a little jQuery, here's a little code snippet that should help you equalize the height of the two divs, no matter which has more content. You can change it to your liking too.
var leftHeight = $(".left").height();
var rightHeight = $(".right").height();
var maxHeight = 0;
var div = "";
if (leftHeight >= rightHeight)
{
maxHeight = leftHeight;
div = ".right";
}
else
{
maxHeight = rightHeight;
div = ".left";
}
$(div).each(function(){
if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});
$(div).height(maxHeight);
and credit where credit is due, this is an edit of a code snipped found at css-tricks.com
is this what you want?
http://jsfiddle.net/YWNyr/
CSS tips:
If you use 'absolute' positioning, width,height,left,top, etc... is relative to the first ancestor that has a "position" property other than "static", or the body if nothing is there.
for static menus, it is common to use 'position:fixed' as it will simplify scrolling issues
When using jquery its easier(and faster) to toggle a class than to change the DOM since that requires redrawing of the elements by the browser
-edit: for refreshing the sidebar size some javascript is necessary:
$('#headerAdd , #headerRemove').click( function()
{$('#sideContainer').height($(window).height()-$("#header").height());
} );
Try setting the height of your list container to 100%, and your overflow to scroll:
#listContainer {
height: 100%;
overflow: scroll;
}
This will keep the list in a scrollpane that reaches to the bottom of the page, no matter how large the header grows or shrinks.
ok there are several similar questions but not quite anything that I want.
I have few ajax requests on page and I want to show the image in the center of the screen, and its all working OK.
Just to make it look more prominent, I wanted to place that image on a div with translucent background, so its more obvious for the end users. Now comes the tricky part.
I made the div with css like this:
.divLoadingBackground
{
filter: Alpha(Opacity=40); -moz-opacity:0.4; opacity: 0.4;
width: 100%;
height: 100%;
background-color: #333;
position: fixed;
top: 0px;
left: 0px;
}
This fills the page up alright, or, I should say, this fills the viewport. If I scroll the page down, the page is again normal. I want this div to span the ENTIRE LENGTH of the page, no matter how long the page is.
Here is an example mockup of the problem I made to quickly demonstrate:
As you can see, I took the example of SO for the mockup ;) image 1 shows that its okay when it appears. image 2 shows that it goes up with the page on scroll.
I'm a c# developer and css is as alien to me as ancient latin.
How to make this divLoadingBackground div to fill out the entire length of the page?
Many thanks for any help.
If you need any additional info, please comment!
One thing I dont see in your css is z-index. Fixed, although, fixes this problem, sometimes, based on how other divs are positioned, your divLoadingBackground div could end up in one of the divs.
try adding
z-index: 9999;
or something similar and see if it works.
Would have put this in a comment, but it seems I have too low rep to comment.
Where is the .divLoadingBackground div located in the DOM tree? Since it has fixed position, it shouldn't scroll with the page. This makes me belive that the element is too deeply nested. Try putting it right in the body level of the page and see if that helps.
Also, are you sure that some other css directive isn't changing the position attribute to absolute or something?
Also, make sure to use the right DOCTYPE. That has some impact on fixed position elements.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Oh, and ofcourse, fixed position isn't supported in IE6 and below.
I believe you will need JavaScript/jQuery to dynamically set the height of the div in question to the height of the page once rendered.
And if you're entering the world of web, it's time to learn that new language "CSS" as well as perpahs-not-quite-as-daunting JavaScript.
When I needed such a functionality some years ago, I examined how Google Calendar did it.
Basically, they use a timer-driven JavaScript file that checks for the height of the window and adjust the height of a contained DIV tag accordingly (or of an IFRAME tag, just any container tag that you like).
Here is a code snippet from a page I worked on:
<script type="text/javascript">
document.getElementsByTagName("body")[0].style.height = "100%";
document.getElementsByTagName("html")[0].style.height = "100%";
document.getElementsByTagName("body")[0].style.minHeight = "100%";
document.getElementsByTagName("html")[0].style.minHeight = "100%";
function height()
{
try
{
height_iframe();
}
catch(err)
{
}
}
window.onload=height;
// --
var ie6WorkaroundIFrameResize = 1;
function height_iframe()
{
var any = false;
var offset = 300;
var c = document.getElementById("iframecontent");
if ( c!=null )
{
c.style.height = (GetClientHeight()-offset)+"px";
any = true;
var d = document.getElementById("iframeie6");
if ( d!=null )
{
d.style.height = (GetClientHeight()-(offset+ie6WorkaroundIFrameResize))+"px";
any = true;
ie6WorkaroundIFrameResize = 0;
}
}
if ( any )
{
setTimeout( 'height_iframe()', 300 );
}
}
function GetClientHeight()
{
return document.documentElement.clientHeight;
}
</script>
Basically, the script regularly checks for the height of the window via the GetClientHeight() function and adjusts the element in concern ("iframecontent") accordingly.
I subtract some offsets of fixed-height headers and footers.
AFAIK you would need to set the size of this divthrough javascript. I would recommend using jQuery, in this way :
//$(document).height() gives the size of the document
//(as opposed to $(window).height() that would give the size of the viewport
$("div#overlay").css('height',$(document).height());