trying to re-write another's template (which works well and is written in raw css3 – but is very messy).
Most stuff is easily translated to bourbon/neat but I'm stuck on getting up a responsive image grid.
<section class="page-content">
{% for post in site.posts reversed %}
<div class="myevent" style="background-image:url({{post.cover}});">
{% endfor %}
</section>
inside an outer-container I have a set of dynamically generated divs (using jekyll's tempting) and on large screens I have each div taking up span-columns(4) [I have media queries that change columns to 8 and 4 depending on width].
Each div has an image as a background and a header text label.
If this was a fixed screen with no side borders (i.e. each div was 33% of the width it would be simple to add 33vw as the div height to go square
My problem is getting the div to be square. As I do not know in advance what screen width, how much side padding the outer-container gets, how many columns, if there is a gutter (yes normally but no in single column) .....
.page-content {
#include outer-container;
}
.myevent {
#include span-columns(4);
#include omega;
//
// has to be square - can't figure out how to calculate this
//
}
.nth-element {
// clear gutter every third
#include omega(3n);
}
// I also have new-breakpoints at certain widths dropping to 8 and 4 columns automatically with corresponding omega(2n) and omega(1n) changes as the column totals change.
I am at a loss how to calculate the actual width of the .myevent and setup the height of these divs to equal to the width
One possible answer for this (and the solution I would probably use) is to relatively position the span-column object and absolutely position the content inside of it. Then I would add something like:
.my-cool-column {
position: relative;
&::before {
content: "";
display: block
padding-top: 100%;
}
}
This'll cause the padding top to be equal to the width of the parent element. That should work.
Related
The following CSS style dictates that an image that's 400 pixels wide will appear to be 200 pixels wide if it's placed in a div measuring 400 pixels...
img { width: 50%; }
But is there a style that makes an image display at half its own size, regardless of the container it's in?
I'm asking this because I have a lot of floated image slices to work with. For example, suppose you take an image of a dinosaur that's 400 pixels wide and slice it into quarters horizontally. The four resulting images might measure 350px, 300px, 280px and 200px. If I want to display them in a mobile device, I have to create separate styles for each piece, setting the width at half of the original width, one third the original width, or whatever.
So I just wondered if there's some sort of style I could use that would automatically reduce each image by a third, a half, etc. Thanks.
But is there a style that makes an image display at half its own size, regardless of the container it's in?
I can’t think of one simple property for the image itself – but if you place them in an element with display:inline-block, you’ll get exactly what you want:
<div style="width:400px"><span><img src="http://placehold.it/400x200"></span></div>
<div style="width:600px"><span><img src="http://placehold.it/400x200"></span></div>
<div style="width:800px"><span><img src="http://placehold.it/400x200"></span></div>
div { background:red; }
span { display:inline-block; }
img { width:50%; }
http://jsfiddle.net/H8AQY/
I've defined a Susy-based responsive grid system handling 4 (mobile), 8 (tablet) and 12 (desktop) columns. My layout is having a fixed header bar which is divided in two sections "logo" and "toolbar".
The "logo" div is not nested within Susy's grid-container and is positioned absolute to always be on the very left.
The "toolbar" div contains the Susy grid-container and holds a search- and a logout-action - so far so good :)
When resizing the browser its in the nature of the grid to change total-columns when there's no more space for say 12 columns. This causes following problem:
The "logo" div gets overlapped by the grid since its positioned absolutely.
Is there a way to tell Susy to break the layout to 8 columns before the black border of the "logo" div is being reached?
Any advice would be highly appreciated. Thanks in advance.
#Eric: I managed to get it working. This is what is used:
#mixin update-container {
#include container;
#include susy-grid-background;
}
.page {
#include update-container;
#include at-breakpoint(865px 8 1149px) {
#include update-container;
}
#include at-breakpoint(1150px 12) {
#include update-container;
}
}
So I've explicitly described the min- and max widths to tell the columns when to change. Is this the "right" way to go or is there any more elegant way for solving this?
Thanks :)
Atm I'm doing my first attempt at a website, recently got a new job which requires me to learn some basic HTML&CSS so for a starters I set myself up to duplicate an exsisting site.
The question/problem is:
I wanna make 3 columns at 100% height, the left and right being scaleable to 0 upon downsizing the browserwindow, while the middle column is containing the actual content of the site, min-width at 60%. At lower resolutions im planning on implementing media-things in my css to remove the left n right columns when the resolution goes below a certaint limit.
I've set html&body&all to hight & width 100%.
I'm trying to do something a bit like here: The site im trying to duplicate
My current attempt can be found here: My attempt
Some code for the lazy ones that don't wanna inspect the site:
<div id=all>
<div id=leftmargin></div>
<div id=wrapper>
<div id=header></div>
<div id=nav></div>
<div id=content></div>
<div id=rightmargin></div>
</div>
</div>
Since im very new to web development, please excuse me if you need more info.
My problem is in essence that "leftmargin' and 'rightmargin' overlaps the 'wrapper'-div. I'd very much like that to be in the center of the page and then make the margin-divs 'expendable' at lower resolution by css.
I hope I made myself relatively clear, thanks in advance.
Kind regards
Mike
I'd avoid using a div for the sole purpose of creating a margin space. Instead, let your side bar content create the margin you're looking for. The content is overlapping the margin because it's not contained within the margin div. You'll need to tweak how the main content is centered by using "margin-left: " the same size as the sidebars or some other way, but it'll improve your overall structure.
As for text overlapping the container at small sizes, remove the "width: 18.8%;" and "white-space: nowrap;" from #lefttop and "max-width: 18.8%;" from #leftnav. This will let the text be the full width of the gray container on the left, and the words will wrap if the line doesn't fit.
Finally, to get rid of the side bars at small widths, as jerrylow recommended, use
/* screen sizes smaller than 750px apply these styles */
#media screen and (max-width: 750px) {
#leftnavwrap {
display: none;
}
#shortcut {
display: none;
}
#content {
width: 100%;
}
}
i have an dynamic image gallery to display, using PHP...
My PROB
the style & positioning should be that if there is not enough space for a whole div, like in the image above, then the DIVs in the row should position them like the following
centered and equi distant...
here is JS-Fiddle basic template set, if somebody wants to try something on jsFiddle
If you wanted to achieve this with just CSS, the code would be as so:
#div {
clear:both;
width:500px
}
.img {
display:block;
width:150px;
height: 50px;
float:left;
}
As far as I remember, that's it..
Good luck!
Never "clear" the float (at least until the end of the grid).
Enclose each img in its own DIV with the float:left style,
Important: Give each of those DIVs the same HEIGHT (slightly larger than the largest photo), otherwise if the images are different heights you will get some weird floating.
Optional: If your images are different widths, and you want a nice 'grid pattern', then you can give all the DIVs a width property.
Beware of the effects of margins on overall height/width.
Also note that if you use the standard meta viewport tag on your pages to format them for narrow mobile screens, this will shove all your images into columns to fit that screen without shrinking them unbearably (provided something else doesn't make the page wide).
#div {
width: 220px;
height: 215px;
float: left;
}
you can achieve all of that simply with css width property for div
#div {
width:500px;
}
We implemented almost the same here
http://www.art.com/gallery/id--b1823/animals-posters.htm?ui=9E23F1D932F54F2F8F2E37851C860158
here also , you can switch between grid view and normal view , all we are playing around is with divs width
http://www.allposters.com/-st/Animal-Posters_c622_.htm
Google had the same problem with their image search... they had to overcome it with fancy scripting. Looking at the source, each row of images is a <ul> inside a <span>, and each image is in an <li>. Then when you resize the window, the images get moved from one <ul> to another. That's the best method they could come up with, apparently.
So, using jQuery:
blocksPerRow = Math.floor($('#container').width() / blockWidth);
$('.row ul').each(function () {
while ($(this).children('li').size() > blocksPerRow)
($(this).children('li:last-child').prependTo($(this).nearest('.row').next()));
while ($(this).children('li').size() < blocksPerRow)
($(this).nearest('.row').next().find('li:first-child').prependTo($(this).nearest('.row')));
});
I think that should do it. Add that to $(window).resize() as well as the document ready event.
This website http://www.elkaniho.com/ has a CSS layout which is what i want, you see, the divs stack on top of each other, not on a precise grid, but just at the bottom and on the side.
And when you re-size the browser, they all re-adjust perfectly?
anyone know how i can get the same layout like at elkaniho.com or what type of layout this is called?
There is also a neat jQuery plugin called Masonry that can deal with div's of varying width and stacks them up as tightly as possible. Depends on your content.
That's just a six column layout. Easily done with 6 divs:
<div id="container">
<div class="column">one</div>
...
<div class="column">six</div>
</div>
As a fluid layout:
#container { overflow: auto; }
div.column { width: 16%; float: left; }
You can of course fix the widths too.
Each column then has several divs which do what divs (and in fact any block element) do: they stack top to bottom.
The effect you are speaking of is created using javascript. If you look at the source code, you will find a link to a javascript file called funciones.js which includes functions called cajas and cajasInterior that are responsible for this effect. Also note that they are using jQuery.
The functions:
Figures out the maximum number of columns based on the body width, box width and margin
Sets all divs with a class of box and boxInterior to have absolute positions and set their width
Goes through each box and calculate the left and top positions.
I would contact the webmaster of the site and ask permission to use this script and change it to fit your needs.