I'm having troubles achieving my designers goal of a fluid picture grid, but based on rows of equally high pictures, not columns of equal width which everyone seems to be so fond off.
here's he design:
https://dl.dropboxusercontent.com/u/7187819/Capture.PNG
here's the point where i got stuck:
http://jsfiddle.net/EwTjD/1/
my goal is a fluid picture-grid that scales with the map next to it when you resize the browser.
I tried background-image first, but that got me stuck with a height that didn't scale. And to be able to use transform i got to use position:absolute, which messes up my floating img's...
any help? :)
ps: this should be achieved without Javascript
im going to start charging for doing peoples work. lol.
you need to set static heights if you want them to line up horizontally.
in your design example, those pictures sizes where carefully calculated. u need to take into account the amount of padding, add up how much padding space will be used, and then subtract that from the total amount of space u got. then u can divide that amongst the images
Related
This is a tough question and I've struggled with it long enough - time to ask people who probably know more than I about CSS layouts and why my layout is such a nightmare.
Consider this image:
The blue line represents the viewport. The layout is forced by the application to be horizontal / landscape. The user understands this, so not an issue.
The constraints... The column on the left can occupy no more than 30% of the available viewport space. That's easy enough. The tic-tac-toe grid to the right will occupy the remainder. Between the left column and the grid, there is about 12px space (margins, padding, whatever gets it done). The grid on the right, in this example, has 9 boxes, but can have less and needs to flow accordingly. The widths of the columns in the grid must be equal. The heights of the rows in the grid must be equal. The text in each box in the grid cannot force the size to become unbalanced (width or height), meaning overflow: hidden is acceptable or truncate and add ellipsis.
This can be displayed on a desktop computer, phone, tablet, etc. The layout should adapt, but that's not a huge issue. Maintaining the ratios/sizes is.
So, that's about it. Tricky. I intentionally haven't posted code because my code for this has become such a monstrosity as to become useless and likely to taint any ideas the enlightened folks here might have.
Thoughts? Help? Thank you so much in advance!
You can do it pretty easy using flexbox . Here's a complete tutorial on flexbox
Also, you can do it by using javascript, getting the wrapper width and height and divide by 3, and assign the values to the tic tac cells
It would be great if u have included your code
Try using Flexbox for this. That would help you solve your probelm easy.
Hope this links help you to solve your problem.
1.Link 1
2.Link 2
I'm testing out some code for a random personal project and I'm looking to place 3 boxes side by side (I believe as divs). But as you'll see they're not really centered (as three)/spaced out so well. I figured assign them unique IDs and increase padding but is there a more efficient way?
Also when the screen shrinks, the third box dips underneath, while the second box is still on the same line I want it so all boxes drop at the same time.
Unfortunately, I need more reputation to post my code in the proper format it seems.
Not 100% sure if I get you correctly.
For "But as you'll see they're not really centered (as three)/spaced out so well. I figured assign them unique IDs and increase padding but is there a more efficient way?", if you wanna make them horizontally centered, you can try this:
wrap them in a container node.
assign a width to this container in its style.
set both margin-left and margin-right of this container to auto
This should then make these 3 boxes (actually the container) horizontally centered.
For "_Also when the screen shrinks, the third box dips underneath, while the second box is still on the same line I want it so all boxes drop at the same time. _", perhaps width: calc(100% / 3) is what you want to put in the styles of these boxes.
In modern web browsers, even if #Slash_D response is correct, you can get a more flexible alignment using flexbox (here you have a complete guide https://css-tricks.com/snippets/css/a-guide-to-flexbox/).
Futhermore, if you want all the containers drop at the same time, you have to deal directly with media query based on resolutions (https://www.w3schools.com/css/css_rwd_mediaqueries.asp) , or use a grid system, like bootstrap, that helps you with media queries based on classess (https://v4-alpha.getbootstrap.com/layout/grid/#how-it-works)
Hope it helps
I'm attempting to create a responsive column system for my site. Essentially, a block of images in a grid, that will look similar to this in the end:
Where the black lines represent the container, and the colours represent an assortment of images.
The problem is, this layout would require a 6-column grid with 0 gutter. Working with percentages, each column would need to be 16.66% repeating, which would be difficult to keep accurate. What is the best way to deal with creating something like this? The only way I would know of is using CSS to set widths to percentages, but, like I said, that would be difficult to keep accurate with decimal places and all.
If I was producing exactly that layout with static HTML, I'd have classes for multiples of width 16.6% and just round up the rightmost div for each row to make up the 100% (E.g 5x16.6% and 1x17%). Sounds messy but you could do it quite cleanly with Class attributes like "two-col right" etc.
Personally my OCD would force me to rethink the number of columns or add a gutter to make everything add up cleanly. Also, if you are happy to provide javascript dependent pages, this is a fantastic (already responsive) jQuery plugin for this type of layout http://isotope.metafizzy.co/v1/index.html.
I am developing website everything was done and successful , but my problem is please look attached images , if browser is in maximize position the website looks neat but in minimize situation everything comes closer and text is overlap by another, please suggest me.
Try using % value of width and height of html elements instead of its pixel values in style sheet.
Since you didn't provide actual source code, i have to guess. I guess your page layed out using tables. And either elements have no width property or they have width in percentages like . The black top bar on the first images seems like it made with a table with two columns, second column being align=right.
For table layouts to work, you should set all columns' width to some constant number. Especially first rows' columns' width must be set.
I need to build a layout similar to the one at www.PInterest.com, where - depending on the browser width (yes responsive design) the amount of columns varies. The problem is not the horizontal stacking but the vertical. How do i make the boxes different height and stack on top of each other som that it will not let the highest box determine the height for the entire row?
Using ASP.NET MVC 3, HTML/HTML5, CSS/CSS3
Make three elements (div, for example), that are fluid in their width. These will serve as your columns. Put the elements you want inside each column with the respective <div>.
I just made this as an example: http://jsfiddle.net/N4zkF/
I think viewing the example would be more helpful than me explaining it in words. The three columns are bordered in red, blue, and green. The content of each has a gray/black background and a fixed height.
This answer was edited. Last time I linked the wrong jsfiddle (was wondering why I got a downvote). Hopefully this will help you, OP.
u need to set the width of the colums with a percentage and have a min-width on each of the columns..
Say u want 3 column's,for a responsive design -- set the width of all 3 columns as width:33% and add a min-width for the least resolution that you are supporting,
say,1024x768 in that case -- 1000px is the total width that you might have at the minimum (ignoring the extra 24px for the browsers scroll bar on each sides).. so,let the min-width:333px.. so,if the width of the browser is more,it'll occupy the space.. else,min-width will be set anyway so you need not worry about the layout getting screwed..
here's a fiddle to get you started - jsfiddle.net/mvivekc/XwYDr
here's a nice tutorial that i stumbled upon
-- http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts
-- http://css-tricks.com/the-perfect-fluid-width-layout/