I've got a mindblowing task... for me. Here is the jsFiddle example of what I'm trying to achieve.
Code in the fiddle:
HTML
<div id="container">
<div class="smallsq">Small Square</div>
<div class="bigsq">Big Square</div>
<div class="smallsq">Small Square</div>
<div class="smallsq">Small Square</div>
<div class="smallsq">Small Square</div>
<div class="vertsq">Vert Square</div>
<div class="smallsq">Small Square</div>
<div class="smallsq">Small Square</div>
<div class="smallsq">Small Square</div>
<div class="smallsq">Small Square</div>
<div class="smallsq">Small Square</div>
<div class="smallsq">Small Square</div>
<div class="smallsq">Small Square</div>
</div>
CSS:
#container {
width:500px;
height: 500px;
background: #ccc;
display: block;
}
.bigsq {
width: 20%;
height: 20%;
background: red;
float: left;
display: block;
}
.smallsq {
width: 10%;
height: 10%;
background: green;
float: left;
display: block;
}
.vertsq {
width: 10%;
height: 20%;
background: blue;
display:block;
float: left;
}
In short:
I've got 3 square sizes. I really need to surround the Big Box and Vert Box with Small boxes but notice NO MATTER WHAT THEIR POSITION IS (eg. two smalls before big, or big-small-small-big-ver, or four smalls-vert-small-big, etc). Not only to the right of the Big & Vert boxes but and in left should have a Small boxes too, so there'll be no empty rows like in my example... Please notice also that I don't want to use eg. "small holder" to hold my small boxes like I've been read recently for the only solution of this problem.
I have no problem to use jquery or js or everything you propose to reach the Goal :)
P.S: The image of the result wanted:
The Masonry Layout ?
My answer comes from a search and what you are trying to achieve is explained here really well.
As expected, to achieve this goes beyond the capabilities of just CSS ( though perhaps boxflex will get us there / near for a CSS only solution )
From that article are a number of links to javascript libraries.
http://masonry.desandro.com/ http://www.wookmark.com/jquery-plugin
http://isotope.metafizzy.co/
http://suprb.com/apps/nested/
http://yconst.com/web/freetile/
No credit to me, as this info came off a search - hopefully it puts us in the right direction by studying the article and the javascript libs to see what is going on and find the simplest implementation for your job.
Here is a possible css solution. Basically I'm making the large boxes cover the small ones, and making them layout-neutral.
.bigsq {
width: 20%;
height: 20%;
background: red;
float: left;
display: block;
margin-bottom: -20%;
margin-right: -20%;
z-index: 1;
position: relative;
}
http://jsfiddle.net/sabof/6H5ex/
A possible solution would be possible using jQuery Nested.
Here is how your code would look like:
HTML
<div id="container">
<div class="box size11"></div>
<div class="box size12"></div>
<div class="box size21"></div>
<div class="box size22"></div>
...
</div>
JS
$("#container").nested({selector: '.box'});
Not sure what you mean, but try this
#big {
float:left;
width:100px;
height:100px;
background-color:gray;
border-top-left-radius:10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}
#small {
float:left;
width:50px;
height:50px;
background-color:gray;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
}
Related
NB
My Header:
<header>
<div style="float:left;margin-left:20px;">
<div style="float:left; margin-left:10px;margin-top:55px;background-color:#2BC3A7; height:3px; width:200px;"> </div>
<div style="clear:both;float:left;"></div>
<div style="float:left; margin-left:10px;margin-top:5px;font-family:DIN; font-size:12pt;color:#2BC3A7;">Services/Products</div>
</div>
</div>
</header>
I have 2 divs:
<div id="#content1">
<div id="divWelcome" style="margin-top:50px;">
<div id="headerimg" style="position: relative;">
<div style="position: absolute; bottom:255px; left: 20px; width: 550px; font-family:DIN; font-size:23pt; font-weight:600; color: white; letter-spacing:0.01em;">
We offer Cloud solutions for small businesses to help them manage their workflow requirements
</div>
<hr style="height:6px;position: absolute; bottom:210px; left: 20px; width: 490px;"/>
<div style="position: absolute; bottom:175px; left: 20px; width: 550px; font-family:DIN; font-size:14pt; font-weight:500; color: white; letter-spacing:0.01em;">
Our core sectors of expertise are professional services, data management and outsourcing.
</div>
</div>
<div id="divAboutContents" style="margin-top:50px; background-color:red;position: relative;display: none;">
</div>
</div>
</div>
So when the page loads the 1st div shows. The effect I want is when the user presses a button the divFirst gently fades away and the divSecond gently fades in. I have used this bit of jQuery but the affect does not look very pleasing.
<script type="text/javascript">
$(document).ready(function () {
$("#divAbout").click(function () {
$("#headerimg").fadeOut();
$("#divAboutContents").fadeIn();
});
});
</script>
What else can I try/read up on? Thanks
NB
This is part of my CSS
#content1 {
clear: both;
position: absolute;
}
Also I was fading the other one out. just forgot to put it in the question. The affect I get is 'clunky'
'Pleasing' is a very subjective term, however to improve it you could place both div elements within a parent container positioned absolutely so they overlap. You can then fadeToggle() between the two as needed. Something like this:
$('#container').click(function() {
$(this).find('div').fadeToggle();
})
#container > div {
position: absolute;
}
#divSecond {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="container">
<div id="divFirst">some content with images</div>
<div id="divSecond">different content with images</div>
</div>
Click the text to see the fade transition in action.
I found many solutions on the internet about different height image grids but i'm trying to make an easy div grid with different heights.
See my JSfiddle here:
http://jsfiddle.net/44ffoafu/1/
(I want the blocks to float into the empty spaces)
I already tried adding one of the following display tags to the div's but they don't work.
display:inline;
display:inline-block;
display:block;
display:table-cell;
I know of javascripts like FreeWall and Masonry but i'm looking for an easier way and a way that works with percentages. A CSS only solution is what i'm looking for but if someone has a small javascript hack, please let me know too!
you can try this one:
only use pure CSS : column-count & column-gap.
firstly:
change your html like this one:
<div class='wrapper'>
<div class="block" id="one"></div>
<div class="block" id="two"></div>
<div class="block" id="three"></div>
<div class="block" id="four"></div>
<div class="block" id="five"></div>
<div class="block" id="six"></div>
<div class="block" id="seven"></div>
<div class="block" id="eight"></div>
<div class="block" id="nine"></div>
<div class="block" id="ten"></div>
<div class="block" id="eleven"></div>
<div class="block" id="twelf"></div>
<div class="block" id="thirteen"></div>
</div>
and then change your css code like this:
.wrapper {
-moz-column-count: 4;
-moz-column-gap: 5px;
-webkit-column-count: 4;
-webkit-column-gap: 5px;
column-count: 4;
column-gap: 5px;
}
.block{
width:100%;
display:inline-block;
margin-bottom: 0px;
margin-top:0px;
}
#one {
height:150px;
background:#ff0000;
}
#two {
height:150px;
background:#00ff00;
}
#three {
height:300px;
background:#0000ff;
}
#four {
height:150px;
background:#000000;
}
#five {
height:150px;
background:#ff0000;
}
refresh your browser.
it's work fine for me.
I want to make a grid 3x3, but problem is that the height on some of the cells will expand with content.
Apart from those height marked with the red arrows, the rest is fixed px.
I made a 3x3 grid with divs to test:
<div id="container">
<div id="one">1</div> <div id="two">2</div> <div id="three">3</div>
<div id="four">4</div> <div id="five">5</div> <div id="six">6</div>
<div id="seven">7</div> <div id="eight">8</div> <div id="nine">9</div>
</div>
#container {
width: 300px;
margin: 0px auto;
}
#one, #two, #three, #four, #five, #six, #seven, #eight, #nine {
width: 100px;
float: left;
padding: 0px; 0px;
text-align: center;
}
But as soon as I change one height they jump out of place.
Any idea?
It looks to me like you want columns.
A structure like this:
<div class="column-thing">
<div class="left-thing">
<div>A</div>
<div>C</div>
</div>
<div class="right-thing">
<div>B<br>B</div>
<div>D</div>
</div>
</div>
And some absolute positioning:
.column-thing {
position: relative;
}
.left-thing {
left: 0;
position: absolute;
right: 50%;
}
.right-thing {
left: 50%;
position: absolute;
right: 0;
}
Voilà.
You can also use lists (ul/ol, li) (without javascript)
<ul class="list">
<li>
<ul>
<li><div>1<br/>1</div></li>
<li><div>2</div></li>
<li><div>3</div></li>
</ul>
</li>
...
</ul>
http://jsfiddle.net/xKjNG/
If you want to ensure that there's three divs in each row, you need to ensure that there's actually a div enclosing each set of three divs...
Try this:
<style>
#one, #two, #three, #four, #five, #six, #seven, #eight, #nine {
width: 100px;
float: left;
padding: 0px; 0px;
text-align: center;
outline: 1px solid black;
}
.clear_float {
clear: both;
}
</style>
<div id="container">
<div id="one">1</div> <div id="two">2</div> <div id="three">3</div><div class = "clear_float"></div>
<div id="four">4</div> <div id="five">5</div> <div id="six">6</div><div class = "clear_float"></div>
<div id="seven">7</div> <div id="eight">8</div> <div id="nine">9</div><div class = "clear_float"></div>
</div>
I'm taking it that the content shouldn't be table based which is why you don't want to use a table.
But an idea would be to use a faux table:
<div class="table">
<div class="tr">
<div class="td">
</div>
<div class="td">
</div>
</div>
</div>
Then on .table add CSS display:table and on .td add CSS display:table-cell.
The naming convention helps work with the code because you'll be used to working with a table's tags structure.
I made a quick example (needed more work than I thought it would): http://jsfiddle.net/cyv6y/1/
needs tidying up a bit but the concept works.
I have made a jQuery script in which you can hide or show one of divs (first one) on click of button hide
The code looks like this in script:
$('.hideButton').click( function() {
var toggleWidth = $(".first").width() == 100 ? "10px" : "100px";
$('.first').animate({ width: toggleWidth},200);
if ( $('.first').width() == 10 ){
$(".content").attr("hidden",false);
}
else if ( $('.first').width() == 100 ){
$(".content").attr("hidden",true);
}
});
HTML:
<div class="contain">
<div class="row">
<div class="navigation">
navigation
</div>
<div class="advert">
advert
</div>
</div>
<div class="row">
<div class="main">
main
<br/>
<button class="hideButton">hide</button>
<br/>
<div class="first">
1
</div>
<div class="second">
2
</div>
<div class="third">
3
</div>
</div>
</div>
</div>
CSS:
.row{
margin-left:0px;
}
.navigation{
height:100px;
background-color:orange;
width:400px;
display:inline-block;
}
.advert{
height:100px;
background-color:lime;
width:200px;
display:inline-block;
}
.main{
width:600px;
height: 300px;
background-color: magenta;
}
.first{
width:100px;
height:80%;
background-color: yellow;
display:inline-block;
}
.second{
width:100px;
height:80%;
background-color: blue;
display:inline-block;
}
.third{
width:100px;
height:80%;
background-color: red;
display:inline-block;
}
And best way is that you see it in jsfiddle: http://jsfiddle.net/dzorz/EhjeA/
Now I have a issue with other two divs. When I click the hide button and first div gets animated, other two divs on animation, both skip to the end of first div and when the animation is done they get back in place.. It is really annoying and I don't know how to solve it...
I just need that one div that gets hidden on click of button and that he does not affect anything else...
Is this example fixable or maybe you could suggest me some nice jQuery plugin that does the same?
Instead of displaying these 3 as inline-block, remove the display and float them left instead using float: left in your CSS.
JSFiddle Demo
.first{
width:100px;
height:80%;
background-color: yellow;
float: left;
}
.second{
width:100px;
height:80%;
background-color: blue;
float: left;
}
.third{
width:100px;
height:80%;
background-color: red;
float: left;
}
You can wrap the offending divs in a wrapper with a fixed width: http://jsfiddle.net/EhjeA/1/
.wrapper {
display: inline-block;
width: 100px;
}
<div class="wrapper">
<div class="first">
1
</div>
</div>
Try adding this to your CSS:
.first,.second,.third {
vertical-align: top;
}
During the animation, the overflow is set to overflow: hidden which causes the other inline elements to shift down. Adding the vertical-align: top should fix the issue.
Updated fiddle: http://jsfiddle.net/EhjeA/3/
I want to create an Element, which is very thin, and very high. I want the element to be visible all time, even if you scroll to the right. It should be position:fixed to the right, and left, but it should be scrollable down and up.
I searched with google, but couldn't find an appropiate way to solve the problem.
I only found this site:
http://demo.rickyh.co.uk/css-position-x-and-position-y/
This is exactly, what I want to have, BUT I am using jQuery, and not MooTools. I am looking for the same function in jQuery. I do not really want to use 2 Frameworks. Does anyone know help? Anything? I have been looking several hours, but I can't find something that fit to my needs in jQuery.
Here's a solution with jquery
jsfiddle demo
the html
<div style="width:1000px;height:1000px;">
<div id="box1" class="box" style="left:20px;top:20px;">
My position-x is fixed but position-y is absolute.
</div>
<div id="box2" class="box" style="left:20px;top:120px;">
My position-x is absolute but position-y is fixed.
</div>
<div id="box3" class="box" style="left:20px;top:220px;">
Im positioned fixed on both axis.
</div>
</div>
the code
$(window).scroll(function(){
var $this = $(this);
$('#box1').css('top', 20 - $this.scrollTop());
$('#box2').css('left', 20 - $this.scrollLeft());
});
and some css
.box
{
width:400px;
height:80px;
background:gray;
position:fixed;
}
Depending on a previous answer that helped me with what I was trying to do, keeping a header div with position-y fixed, a left div with position-x fixed, and a content div which would scroll on both x and y.
Figured I would post my jsfiddle in case anyone finds it useful:
My jsfiddle demo
The HTML
<body>
<div style="width:5000px;height:1000px;">
<div id="box1" class="box">
My position-x is fixed but position-y is scrollable.
</div>
<div id="box2" class="box">
My position-y is scrollable but position-x is fixed.
</div>
<div id="box3" class="box">
My position-x and position-y are both scrollable.
</div>
</div>
The code
$(window).scroll(function(){
var $win = $(window);
$('#box2').css('top', 0 -$win.scrollTop());
$('#box1').css('left', 120 -$win.scrollLeft());
$('#box3').css('left', 120 -$win.scrollLeft());
$('#box3').css('top', 20 -$win.scrollTop());
});
The CSS
.box {
position:fixed;
}
#box1 {
top: 0px;
left: 120px;
width: 1000px;
height: 20px;
background-color: #FF0000;
z-index:150;
}
#box2 {
top: 0px;
left: 0px;
width: 120px;
height: 520px;
background-color: #00FF00;
z-index:200;
}
#box3 {
top: 20px;
left: 120px;
width: 1000px;
height: 500px;
background-color: #0000FF;
color: white;
z-index:100;
}