I'm creating a responsive skeleton of a gallery that will be inserted in a wordpress. The gallery is made of images of different sizes. The thing is I can't figure out how to stick div, which are on the "second row", right below the div of the "first row".
Here is a codepen of my actual work:
http://codepen.io/anon/pen/JdXPde
And I want my gallery to look like: http://webplantmedia.com/starter-themes/wordpresscanvas/features/gallery/gallery-columns/#gallery-6
Ahh, it loaded eventually. I don't think you can achieve what you are after with inline, inline-block nor floats. I think you would need to use absolute positioning as per what they are using on the link you forwarded. I can recommend using isotope https://github.com/metafizzy/isotope which does all that for you. It is a great tool.
Depending on your browser support matrix you could use CSS columns if you don't wish to use JS.
.wrapper {
column-width: 500px;
/* plus browser prefixes */
-moz-column-width: 500px;
-webkit-column-width: 500px;
}
Stick a div around your elements with a class of wrapper.
Related
I have 3 images within a table, which is the only way I could figure out how to get them adjacent to each other. The problem I am having is that while on the screen I am using, they look like how I want them to be without a scroll bar at the bottom, but on other size screens they force the whole page to extend and therefor requiring scrolling to see the whole width of the page. How can I make the appearance responsive so that the images remain the same size relative to everything else?
Screenshot attached
There are a couple of good ways to make webpages like this responsive to screen size. I'll describe two of them, but again, there are many more:
Making the table width match the page width
An external style library, like Bootstrap
Making the Table Width Match the Page Width
First, you need to make sure that the page itself has the style position: relative on it - so that any of its children (including your table) can be positioned or sized relative to it. There are a couple ways to do this with css, but if you're using classes, you can just assign all of the standard high-level elements in html to be positioned relatively, and to be the full-width provided by the browser.
html, body {
position: relative;
width: 100%;
min-width: 100%; //we do both width and min-width for compatability with old browsers
}
Now that that's out of the way, you have a starting point for your dynamic width. If the table is a direct child of the <body> element, then you should define a class for it that will also give it a width of 100%. Remember, this width maps to the width of it's parent, so since the <body> is the full page width, then the table will attempt to be too! If you want to add some space around it (so that it doesn't literally hit the page edges, you can add some padding too!
.fullWidthTable {
position: relative;
width: 100%;
min-width: 100%;
padding-left: 20px;
padding-right: 20px;
}
Now you can put that class on your table element, and it should map to the page size! Keep in mind that if your images don't re-size according to the size of their <td> parents, then they might overlap or have some other undesired behavior.
Using Bootstrap
So if you're interested in using existing frameworks for organizing your html elements on the webpage, I would strongly recommend Bootstrap. Bootstrap provides you a number of pre-defined classes that have a consistent and predictable structure which you can use to make dynamic websites. In general, bootstrap structure involves three main classes:
containers
rows
columns
It's actually quite similar to working with an html table - but it takes dynamic sizing into account by design.
You can find full documentation and examples for using Bootstrap here: Bootstrap Docs
The page i've made so far can be viewed here.
And the HTML here: http://jsbin.com/fujozekoqama/1/edit?html
Notice what happens when you make the browser window smaller.
Why does the image lose alignment to the menu if they are in the same container?
Here are pictures of what I'm seeing:
aligned: http://i.imgur.com/aZUkVIR.png
unaligned: http://i.imgur.com/o0Mdg4J.png
You need to remove this from your styles, because it's affecting the responsiveness of the layout:
.container .navbar-default {
min-width:640px;
width:640px;
}
and add the .img-responsive class to your image, like this:
<img class="logo img-responsive" src="http://placehold.it/350x75">
and then close the first .container div, which is open
with these tiny changes, it will work just as you want, and your layout will be responsive (which is the whole idea after Bootstrap after all).
If you need some min-width, add it in the .container class, not the inner elements. For this purpose, it's always a good idea to add an additional class to re-usable classes, for example <div class="container myMinWidth"> so you can target the .myMinWidth class without affecting the .container class, which you will need to use everywhere in Bootstrap.
And finally, unless you really need it (which you probably don't), avoid using fixed sizes in responsive layouts, if needed, try to use percentages, but make sure to check Bootstrap docs, because there are lots of built-in classes like img-responsive that will adjust your images like in your present situation
I'm working with WP 3.5.1 ATM. My goal is to make the articles 300px in width, then float them to the left, then the rows stack directly underneath each other in vertical & horizontal alignment. The issue I'm having is that when it get's to the second row, it doesn't line up directly underneath the first row vertically, but does horizontally. This sometimes leaves huge vertical gaps between the first and second row, if one article in the first row is long, while the others are short.
I have never tried doing this layout before, so I'm wondering if I can get some pointers from those that have. How can I make this happen? Or perhaps a tutorial site? I googled it, but didn't find anything on the method.
Examples of my goal are mysocialcloud.com, new.myspace.com, so.cl, and this one in particular: http://www.eleventhemes.com/gridly/
Thanks.
Alternatively, if you are looking for JS-based method which offers better cross browser compatibility, try jQuery Masonry.
Float your elements as per normal, but Masonry will then reposition your elements according to the available space by absolute positioning.
If you are happy to use CSS3 then you can wrap all of your content in a div and then use the column CSS:
-moz-column-count: 3;
-moz-column-gap: 1em;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
column-count: 3;
column-gap: 1em;
I have made a Fiddle http://jsfiddle.net/DVfGP.
I created a div with the column css and then a div to contain each element. I applied the following css to the elements:
display: inline-block;
width: 100%;
this keeps the all of the element in the same column. Hope that is what you were after.
I'm having a great deal of trouble in getting all items inside a specific Div to resize within that Div, depending on the Div's width (Which is currently width:100%).
I've tried using the display:inline-block but that doesn't seem to work. There has to be something that will work? Basically I have a Div Wrapper that is width:100% and then a Div Container inside that which is a specific width.
The background of a Div inside all of those, has a background image, which I need to automatically resize according to the width. The site resizes down so it is Mobile friendly, which is where I'm getting the issue with the background image being huge still.
The link to the page in question, is here - Link to Page
The below code, is the bunch of Divs mentioned above:
#content-home {
float: left;
min-width: 100%;
padding: 40px 0px;
}
.home_container {
margin: 0 auto;
width: 320px;
}
Hope you guys can help out at all! Just as a warning, it's a WordPress site too but this is specifically a CSS issue. I'm not too sure if there is a Javascript or jQuery function, able to handle this idea?
Thanks!
Mark
It seems like the problem is that you're mixing % and px units for calculating the widths. Try using only % for both widths.
If that isn't the problem, then try using just "width" instead of "min-width". It seems like the "min-width" property might be the issue.
I have a grid of products four wide
http://jsfiddle.net/QpX4f/4/
Why won't margin:0 auto; on the product images centering them? And why aren't those view buttons inline?
http://jsfiddle.net/QpX4f/5/
Note that i'm not sure what you're trying to achieve with the blue bg but it appears to be the exact same size at the product image... i've just placed it exactly behind the product image, move as you please
edit :: I'll add my two cents to give you some pointers so you can learn.
A few notes, your CSS could use some real organization. This smashing article is great for learning about css.
Next, you're using floats all over the place and I'm not sure why. Float only the elements you need to which is your container for each production.
For the bg image, you just need to actually set its coords to center it, also, the floating if the product image inside the link was messing up its position, and your margins were taking it out of center.
The view button is unnecessarily wrapped in a p tag, which does nothing.
In my opinion your markup is extremely bloated. You should start with simple cases and only add declarations when you see fit. Lean CSS is often much easier to debug than bloated. (as with any code really)
Also, using a tool like Firebug or Web Inspector will really help you see how your css declarations actually affect the positioning of elements.
answering your new question
your margin:0 auto was most likely messed up by the floats. This would would if it was using a normal inline display with not float. The view buttons were inline, they were just pushed down according to the content above, to take it out of this display mode I made it position:absolute (note you have to position the parent relative) and just set it to be at the bottom left.
Here you go: http://jsfiddle.net/gVLXV/
So...
ul.display li .image { background: url(http://propono.co.uk/image-shadow.png) no-repeat top center; } /* Added top and center to the background. */
ul.thumb_view li .image { padding:0 0 0 8px; }