I have tried a lot of grids from skeleton to golden and bootstrap but I was unable to find a better solution. The one that came close was grid pack. but I dont want any column margin. Is you can let me know what is the better way to do it. For eg. I want to use a 10 col with 6col floating div...with 12 col i tried 8col with 4col and 7col with 5col..but i dont get the exact width of the psd.
You can see i have added a screenshot of psd.
Thanks
PS. I am not attaching any code because im confused. so please dont down vote. I just need an advice or small demo
Grids are farely simple.
The reason why you might be slightly confused is that people use fixed and fluid grids, fluid is usually set in percentages and fixed pixels.
to use fixed just start with creating a container size that you will center in the browser so,
.container {
width:960px;
margin: 0 auto;
}
Divide 960px by 10 = 96px per column
In CSS, create a class for each grid size using the formula 96 * 1, 96 * 2, all the way to 10
grid_1 { width: 96px; }
grid_2 { width: 192px; }
grid_3 { width: 288px; }
grid_4 {...}
then apply the classes to the elements in your HTML so
<div class="logo grid_3"></div>
<div class="nav grid_7"></div>
Most grid systems also use a "prefix" and "suffix" with margin applied, which pushes or pulls elements to the left or right when you don't want a container that needs to be a grid_3 but your having to make a grid_7 because of spacing.
Grids are great at creating visual balance and also providing a way for us as developers/designers to lay out content easier.
fluid grids are slightly different and I would wrap your head around fixed first.
[edit] you should use what is in the design. use (suffix and prefix) like i explained to push and pull elements on the page, so use (suffix_1) as a way of pushing the right side element away creating the column gap in the design, same goes for preffix_1
Related
So I'm testing CSS's grid abilities and one of the things I can't figure out is zooming levels from browsers and the behavior of images within them.
e.g. If I change the viewport it's all fine. The grid and it's images scales perfectly but there are users who use ctrl+- or cmd+-.
If this is used the image is scaled like it should but the grid doesn't scale like I thought it would.
I created a basic grid containing 4 columns and no rows. I don't want to have the width full screen so I added a margin on the container holding the grid of 25%.
The grid is place within the center. Here is a Fiddle.
https://jsfiddle.net/kagprzae/
Can anyone see where I missed a turn?
---- SEMI-SOLVED IT----
So The trick is to use absolute pixels. That way you can use ctrl/cmd+-
The downside is that the grid isn't responsive anymore so you have to use #media queries to change layout...
I'm not sure what I believe would be the best approach to do this.
---- COMPLETE SOLUTION NO JS ----
So after some (a lot) of testing and thinking I came up with the following solution.
Give the .container a width (in my case I could) and calculate your grid according to a 100% width.
You can margin:0 auto; to center the div.
See this fiddle
I'm trying to reproduce this 3 column grid http://romeavenue.com/en/2/Tours-Of-Italy but i can't get it to work. All i get is a 2 column grid and i can't work out why - see http://eternalcitytours.com/en/2/Tours-Of-Italy
Can anyone see what i'm doing wrong?? PS sites should be responsive to change with viewport.
Thanks
Tom
Isotope calculates the number of columns, based on the width of the parent element. When calculating the width, you also have to bear in mind padding and margin, as part of the box-model.
Simply changing .feature to have a width of 1000px gives you three columns:
feature {
width: 1000px;
}
Obviously, you'll have to do a bit of adjustment of the rest of the layout to make it work correctly, but that should give you a start.
Given that there is no code available and i cannot yet comment, my first guess would be that the container hasn't got enough width for 3 columns.
i've a simple question. I'm learning now webdesign, but i find very difficult having grids based on pixels; the matter is due to responsive elements.
I can't just insert mediaqueries, because images, for example, have to resize for every pixel, not just at the logical breakpoint.
So my solution, as simple as possible, will set a width: %; for every column (I'll have 1 or 2 columns, but the images and the content have to resize for every pixel).
Then take Skeleton.. i saw it, but it seems it's the same copy of 960gs except for the mediaqueries... and it's still the same problem.
I can think that 960gs could solve problems just in a big site where you have many elements (3-4 columns) and you don't need to increase or resize their widths (for example for the max logical breakpoint at 1024, for example, u don't need another space for the columns, you just do a margin: 0 auto; for centering the whole site).
So, what do you think? I need an advice. Thank you.
EDIT:: a code sample (i said it was just 2 columns)
<header>
some social media pixtures
</header>
<nav>
logo and menu
</nav>
<aside>
pictures
</aside>
<section>
some articles
</section>
<footer>
copyright and about me
</footer>
960gs has been succeeded by Unsemantic. See: http://unsemantic.com/. The Unsemantic framework uses precentages for column widths and as percentages are relative to the container width, they are better suited to be used in reponsive grids.
Some small advice: use the grid system to specify your lay-out columns, instead of applying column widths to specific elements such as news lists, forms, images, etc. This allows the elements within the column to automatically gain their width via the column width itself.
When i make websites, it fits on my screen, but when i open the website on another screen, it doesn't work correctly (The divs overlaps eachother). It's the same when i resize the window. I saw a couple of posts about this, but still, no good answer. I tried making a container to put them all in. But it's still the same.
Any answers, why this is happening?
Container CSS code:
#container
{
width: 960px;
margin-left: auto;
margin-right: auto;
}
I put it into HTML like this:
<div id="container">
Content goes here
</div>
EDIT: Guys, i don't think you understand me. When i'm on another screen resolution, all the divs moves. I think everything moves, if i'm not completely wrong. I would like to know the real way of doing this. What do you do?
http://i49.tinypic.com/8wwo6r.jpg
http://i48.tinypic.com/359ydc9.jpg
FINAL EDIT: I fixed it with the percentage. It seems to work quite well! Thanks for all your answers! I know this will give me a kind of bad reputation, because i didn't make myself clear enough.
You can use percentages instead of pixel.
#container {
width: 80%;
margin-left: auto;
margin-right: auto;
}
You can figure out percentages having screen resolution and the size you want using this forumla:
WidthPercentage = ContainerWidth / ScreenWidth * 100
So for your example if your screen resolution is 1360x768:
WidthPercentage = 960 / 1360 * 100 = 70.5%
This is called responsive design.
You can find some guidelines here and some good articles here.
If you don't want to use percentages, you can go with Responsive Design and Media Queries. Basically, you call different CSS rules based on different browser properties (for example: width). See a nice tutorial about this here (you can also see it in action).
Quote:
The second part of responsive design is CSS3 media queries, which currently enjoy decent support across many modern browsers. If you’re not familiar with CSS3 media queries, they basically allow you to gather data about the site visitor and use it to conditionally apply CSS styles. For our purposes, we’re primarily interested in the min-width media feature, which allows us to apply specific CSS styles if the browser window drops below a particular width that we can specify
You've set your <div> (<div id="container">) to be 960 pixels wide. If you view the page in a browser window that's less than 960 pixels wide, then the <div> won't fit in it.
Your question isn't very clear. You've said "when i open the website on another screen, it doesn't work correctly", but you haven't said how it doesn't work. To get help, you need to describe the following three things with enough detail:
What you've done (e.g. what code you've written, what steps you're taking to run that code)
What results you expect from what you've done
What results you're actually getting
I am using Yahoo's UI Grids to structure most of my pages. One of my pages is a Google map and I need about a 400 pixel fixed left column to put map legend information into. YUI Grids however only offers 3 columns for their 100% page layouts, namely 160px, 180px and 300px.
Is there a way that I can customize their 'template 3' which provides the 300px column to get my 400px column I need?
I've determined how to do this. Kudos for Nate in the YUI forums for pointing me in the right direction.
To set a fixed left column, you need to divide the column pixel width by 13 to determine the em's for all non-IE browser's. For IE, divide the column width by 13.3333
e.g. wanting a fixed 480px width, 480/13 gives me 36.9231em for non-IE and 480/13.33 is exactly 36em for IE
Using template 3, the CSS is:
.yui-t3 .yui-b {
float: left;
width: 12.3207em; *width: 12.0106em;
}
.yui-t3 #yui-main .yui-b {
margin-left: 36.9231em; *margin-left: 36em;
}
Also, if you want to tweak margin's e.g. zero margin, you can do something like:
#doc3 {
margin: auto 0;
}
Grids is presently deprecated in YUI 3 - a bit of a shock when I saw that. There will be some browser(s) that drop off the A category in July and as a result, Grids will be reworked given that some of the initial design decisions were based on older browsers of course.
There is definitely a way. I think its just a matter of tweaking the CSS to either add in another 400px column, or modifying an existing column to fit your needs. If you are adding another column, be sure to account for the additional width (plus margin) and either reduce width on other elements, or increase the width of your containing element.
If the layout is using 100% width of the browser, width may not be an issue, but if your content is wrapped in a container element which holds all of your columns, be sure to adjust the existing elements to make up for the size of your new column.
EDIT: Also if you are dealing with 100% width layouts, its probably better to size your columns using percentage, instead of a fixed pixel size. Since the containing element for your columns will be the user's screen, if you use percentage then the column sizes should adjust relative to their resolution/window size.
If you want your new column to appear on the left of the your other columns, typically you would place it before the other columns in your markup, and apply a "float:left" property. But, take a look at how the other columns are set up in the YUI CSS, and follow their method.
I hope that helps.
Acorn