I'm developing a site using 960gs and I'm running into some troubles. I want to display a small (beveled) border between my columns. One way (i'm using now) is to give the main container a background-image, but this means I have to manually make images for 2, 3 or more columns. I rather set a background to the columns themselves, but this would mean that I have to get rid of the margin. What would be the neatest approach to handle this?
Thanks,
J.
go to the 960.gs site and click generate css. u can then edit the column width there and make the columns a little smaller to accommodate the bevel width on both sides
Yes, avoid using images whenever possible, specially for things like this. If for example, you have 3 columns, 300px each, 30px of margin between them:
column 1 - 300px wide
column 2 - 300px wide, margin:0 30px (left and right = 30)
column 3 - 300px wide
Just change the rules a bit and give that central column the borders, for example
column2 {border-left:1px dashed #ccc; border-right:1px dashed #ccc; margin:0 29px;}
By reducing the margin by 1 px you make space for the space now taken up by the borders
Related
I want to add blank space in between this two columns, and I have tried the padding way with inner , used offset, etc. I can't figure it out.
I am not fuzzy about the amount of space, just that it is clear that there are two columns.
Another important thing, I want it to be centered in the screen. I've been able to get the blank gap with it not being centered, but that doesn't work for me.
http://www.bootply.com/eUwlCeISme#
Thank you!
You want to use a margin to make some whitespace on the sides of the columns, which you cannot do with display: table-cell. Use something like display: inline-block for .row2 instead, apply a margin to .row-centered like margin: 0 2px; or something, and then use a different method to keep the column heights the same, for example min-height: 225px;.
http://i.imgur.com/zK2uVkL.png
I am working on a responsive grid system for a project. The grid is made up of blocks which are floated left and have a width of 25%.
Inside these block are are images which are set to either 100% *height/width* or 50% *height/width*.
All the images within the blocks a butted up next to each other, and all the blocks are butted up next to each other so it looks like a seamless grid of images.
The issue I'm getting is at certain browser sizes or when you resize the browser you get a little 1px gap between certain blocks.
An example can be seen here:
http://dahliacreative.com/responsivegrid/
I think it may be down to the blocks floating as if you take the float off all seems fine.
I tried using display: inline-block etc, but couldn't get anything working!
Does anyone have an idea to fix this ?
This is due to using full round percentages such as 50%, when you get to certain widths and heights (e.g 561px * 393px) then those won't divide into 50% evenly hence this remaining 1px gap.
Have a look at twitter bootstrap CSS to see the percentages done to 6 decimal points to avoid this issue.
I fix it by adding css class to last column, css for this class
.your_class_for_last_column { float: left !important;}
/* TO FIX 1px Foundation 5 bug fix*/
You can use the new css3 with colum gap and column count.
column-count:
column-gap:
Chris made a really good example with images, which is related to yours.
You can do almost the same thing with li or table or so on elements
Make sure to use prefix and doesn't work in IE less than 10
http://css-tricks.com/seamless-responsive-photo-grid/
I have some very simple sub-navigation that I'm trying to build across the top of the content area within my web site, but CSS doesn't seem to have any simple solutions for such a common problem: I want either 3 or 4 equally spaced DIVs across the top of the page.
1) e.g. 3 Variable-Width, Equally-Spaced DIVs
[[LEFT] [CENTER] [RIGHT]]
2) e.g. 4 Variable-Width, Equally-Spaced DIVs
[[LEFT] [LEFT CENTER] [RIGHT CENTER] [RIGHT]]
My solution for the first problem with only 3 DIVs was to float the left and right DIVs, and then assign an arbitrary size to the middle DIV and give it "margin: 0 auto". That's not really a solution, but assuming there are no changes to the navigation, it gives a rough approximation of what I want the results to be.
The solution I have for the second problem with 4 DIVs is to simply center a DIV in the same way as before, but then float two DIVs within that, e.g.
[[LEFT] [[LEFT CENTER] [RIGHT CENTER]] [RIGHT]]
But again, this requires applying an arbitrary size to the middle DIV for alignment, and if any language or image changes are made to the site, alignment values will have to be recalculated. As well, it's simply an over-complicated solution that requires merging structure with presentation.
Any help is greatly appreciated.
EDIT 07/20/2012 5:00PM
Alright, I put the "table-cell" solution into place using percents, but I encountered another issue within my slightly more complex implementation: the issue at hand is that each DIV I was referring to is actually a container for two more DIVs which are icon-label pairs, inlined either by float or by display:inline-block.
e.g. http://jsfiddle.net/c3yrm/1/
As you can see, the final element in the list is displayed improperly.
Any help is again greatly appreciated!
EDIT 07/20/2012 7:16PM
Final solution with arttronics' help: http://jsfiddle.net/CuQ7r/4/
Reference: jsFiddle Pure CSS Demo
The solution was to float the individual breadcrumbs while using a simple formula to determine the percentage of breadcrumb width based on the number total breadcrumbs.
You could use percentages, then it just comes down to simple math:
[[LEFT=22%]2% margin><2% margin[LEFT CENTER=22%]2% margin><2% margin[RIGHT CENTER=22%]2% margin><2% marginRIGHT=22%]]=100%/??px
You could then specify a width for its container and use
display:inline;
to keep them inline.
Note: If you use borders to see what the divs are doing that will add space unnaccounted for so you would need to reduce your elements width by 1% or so OR just change their background colors.
ol {
width: 400px;
/*width: 800px;*/
display: table;
table-layout: fixed; /* the magic dust that ensure equal width */
background: #ccc
}
ol > li {
display: table-cell;
border: 1px dashed red;
text-align: center
}
like here: http://jsfiddle.net/QzYAr/
One way I've found to do it is using flex boxes (or inline-flex).
Here is a great explanation and example of how it can be done.
I think in the future, flex boxes will be the superior way of handling this sort of thing, but until other browsers catch up with Mozilla's way of thinking for how to use the flex-basis attribute (with min-content, max-content, fit-content, etc. as values), these flex boxes will continue to be problematic for responsive designs. For example, occasionally the inner content (a_really_really_long_word) can't fit in the allotted space when the window is squished down, and so sometimes some things might not be visible off to the right of the screen if you're not careful.
I think perhaps if you make use of the flex-wrap property, you might be able to ensure everything fits. Here is another example of how this might be done (in Mozilla browsers anyway).
I tend to use flex boxes for letterheads or tables where the width is fairly fixed (not too small) because they usually space themselves nicely; I tend to use nested float and inline-block objects for websites where the content must squish down very small (as suggested in some of the other answers here).
Lets say I have 1000 px wide 2 column layout with 100 px gutter space (margin) and 50px on the left and right.. How do I apply the golden ratio to this layout?
Method One
c1+c2=800px;
c1/c2=1.618;
=>c1= 495px and c2= 305px
50px, column 1 (495px), 100px, column 2 (305px), 50px
Method two calculate the column widths ignoring the margins.
c1+c2=1000px
c1/c2=1.618
=>c1= 618px c2=392px
effective column width after adding the margins/paddings
c1=618px -100px = 518px
c2=392px -100px = 292px
50px, column 1 (51), 100px, column 2 (305px), 50px
% difference in two methods 518-495/518= 4%
The 4% difference would not make any any difference, but the % difference will be more when dealing with narrow layouts.
If you see this article,
http://www.smashingmagazine.com/2010/02/09/applying-mathematics-to-web-design/
In the first example they took padding out of the golden ratio, and in the other they made padding part of the GR.
Can someone please suggest which method is better.
I'm developing this layout for a customizable wordpress theme, I'm providing an option to pick fluid layout.
I cannot use the first method with golden ratio ( Can I ?? ).
Can I use method 2 without losing the harmony that GR brings to the design.
Please include the links and ref supporting your answer.
PS: I posted this question in graphic design section before, I was suggested to post it here. I hope I'm not violating any rules.
I can point you to this marvellous article about the golden ratio:
http://www.alistapart.com/articles/more-meaningful-typography/
It also contains a link to a useful tool to calculate numbers based on golden ratio and another couple of ratios. Here's the link for convenience:
http://modularscale.com/
Use these on your two column divs:
.golden-ratio-horizontal-primary {
flex: 1.618;
// or width: 62%;
}
.golden-ratio-horizontal-secondary {
flex: 1;
// or width: 38%;
}
When using the Grid 960 Framework in FF 3.6.14 OS X 10.5.8,
using CSS shorthand
margin: 50px 0 0 0;
cause the margins to shift down and left. All values must be long hand:
margin-top: 50px;
Has anyone encountered this,if so how and why does it occur?
You're probably overriding a different CSS value, maybe margin: x y z j or sort.
It's better to override CSS with long hand elements, so, you're good.
This is due to the fact it works on column system and it is centered within a certain width of 960px. When u add extra margins. It disrupts the floats etc because it is pushing the content out of the 960px area that is set.
You can go to the 960.gs site and then click generate css which will allow u to edit the margin and column sizes urself and redownload the template. Alternatively you could do it manually edit widths for individual divs but you may have to take away some margin/padding another element to make sure it does not excede the 960px for each row on your site