|
| |
|
|
paul rayner
Posts: 232
Joined: 3/15/2001
From: yeppoon, qld, aus
Status: offline
 |
960 grid again - 10/21/2009 5:18:05
Hi
I decided to persevere with the 960 grid. I used the template in Fireworks to map out a site. I ripped this off for sample only.
I want 2 columns that run down as a menu block - the rest then is either a 7 col, 3 col, or a 1,2,2,2,2,1 block.
I've include the HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Brushwoodglen Nursery</title>
<link href="960_12_10_10.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container_12">
<div class="grid_12"><p>960px</p></div>
<div class="clear"></div>
<div class="grid_2"><p>Menu</p>
<p>Menu</p>
<p>Menu</p>
<p>Menu</p>
<p>Menu</p>
<p>Menu</p>
<p>Menu</p>
<p>Menu</p></div>
<div class="grid_10"><p>Main Content Area</p></div>
<div class="clear"></div>
<div class="grid_7">Welcome</div>
<div class="grid_3">Video</div>
<div class="grid_1">empty</div>
<div class="grid_2">Angel</div>
<div class="grid_2">Mango</div>
<div class="grid_2">Veg</div>
<div class="grid_2">Bug</div>
<div class="grid_1">empty</div>
</div>
</body>
</html>
and the CSS --------------------------------------------------------------------------------*/
.container_12
{
margin-left: auto;
margin-right: auto;
width: 960px;
}
/* =Grid >> Global
--------------------------------------------------------------------------------*/
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {
display: inline;
float: left;
position:relative;
margin-left: 10px;
margin-right: 10px;
}
/* =Grid >> Children (Alpha ~ First, Omega ~ Last)
--------------------------------------------------------------------------------*/
.alpha {margin-left: 0;}
.omega {margin-right: 0;}
/* =Grid >> 12 Columns
--------------------------------------------------------------------------------*/
.container_12 .grid_1 {width: 60px; background-color:#FFCCFF;}
.container_12 .grid_2 {width: 140px;background-color:#FFCCFF;}
.container_12 .grid_3 {width: 220px;background-color:#FFCCFF;}
.container_12 .grid_4 {width: 300px;background-color:#FFCCFF;}
.container_12 .grid_5 {width: 380px;background-color:#FFCCFF;}
.container_12 .grid_6 {width: 460px;background-color:#FFCCFF;}
.container_12 .grid_7 {width: 540px;background-color:#FFCCFF;}
.container_12 .grid_8 {width: 620px;background-color:#FFCCFF;}
.container_12 .grid_9 {width: 700px;background-color:#FFCCFF;}
.container_12 .grid_10 {width: 780px;background-color:#FFCCFF;}
.container_12 .grid_11 {width: 860px;background-color:#FFCCFF;}
.container_12 .grid_12 {width: 940px;background-color:#FFCCFF;}
/* =Prefix Extra Space >> 12 Columns
--------------------------------------------------------------------------------*/
.container_12 .prefix_1 {padding-left: 80px;}
.container_12 .prefix_2 {padding-left: 160px;}
.container_12 .prefix_3 {padding-left: 240px;}
.container_12 .prefix_4 {padding-left: 320px;}
.container_12 .prefix_5 {padding-left: 400px;}
.container_12 .prefix_6 {padding-left: 480px;}
.container_12 .prefix_7 {padding-left: 560px;}
.container_12 .prefix_8 {padding-left: 640px;}
.container_12 .prefix_9 {padding-left: 720px;}
.container_12 .prefix_10 {padding-left: 800px;}
.container_12 .prefix_11 {padding-left: 880px;}
/* =Suffix Extra Space >> 12 Columns
--------------------------------------------------------------------------------*/
.container_12 .suffix_1 {padding-right: 80px;}
.container_12 .suffix_2 {padding-right: 160px;}
.container_12 .suffix_3 {padding-right: 240px;}
.container_12 .suffix_4 {padding-right: 320px;}
.container_12 .suffix_5 {padding-right: 400px;}
.container_12 .suffix_6 {padding-right: 480px;}
.container_12 .suffix_7 {padding-right: 560px;}
.container_12 .suffix_8 {padding-right: 640px;}
.container_12 .suffix_9 {padding-right: 720px;}
.container_12 .suffix_10 {padding-right: 800px;}
.container_12 .suffix_11 {padding-right: 880px;}
/* `Push Space >> 12 Columns
--------------------------------------------------------------------------------*/
.container_12 .push_1 {left: 80px;}
.container_12 .push_2 {left: 160px;}
.container_12 .push_3 {left: 240px;}
.container_12 .push_4 {left: 320px;}
.container_12 .push_5 {left: 400px;}
.container_12 .push_6 {left: 480px;}
.container_12 .push_7 {left: 560px;}
.container_12 .push_8 {left: 640px;}
.container_12 .push_9 {left: 720px;}
.container_12 .push_10 {left: 800px;}
.container_12 .push_11 {left: 880px;}
/* `Pull Space >> 12 Columns
--------------------------------------------------------------------------------*/
.container_12 .pull_1 {left: -80px;}
.container_12 .pull_2 {left: -160px;}
.container_12 .pull_3 {left: -240px;}
.container_12 .pull_4 {left: -320px;}
.container_12 .pull_5 {left: -400px;}
.container_12 .pull_6 {left: -480px;}
.container_12 .pull_7 {left: -560px;}
.container_12 .pull_8 {left: -640px;}
.container_12 .pull_9 {left: -720px;}
.container_12 .pull_10 {left: -800px;}
.container_12 .pull_11 {left: -880px;}
/* `Clear Floated Elements
----------------------------------------------------------------------------------------------------*/
/* http://sonspring.com/journal/clearing-floats */
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */
.clearfix:after {
clear: both;
content:' ';
display: block;
font-size: 0;
line-height: 0;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
I figured the stuff to the right of the nav block would have to be nested isnide a 10 col block. But that doesn't work for me. I got all my info and the template etc from here.
Any ideas would be appreciated.
 Attachment (1)
_____________________________
" In theory, there is no difference between theory and practice. But, in practice, there is!"
|
|
|
|
womble
Posts: 6009
Joined: 3/14/2005
From: Living on the edge
Status: offline
|
RE: 960 grid again - 10/21/2009 6:31:16
quote:
I figured the stuff to the right of the nav block would have to be nested isnide a 10 col block. But that doesn't work for me.
Can you be a bit more specific about what you mean by "that doesn't work for me"? Do you mean that you want the four columns on the right to take up the full width of the right portion of the page?
If so, I'm presuming the problem is that 4 into 10 doesn't go without a bit being left over (hence my scepticism over the grid system on the other thread and its inflexible nature). If that's the case, the only thing I can suggest, sticking to the grid system, is that you could make either the outer two of those four columns three columns right and the inner two two columns wide, or the other way round and have the inner two wider, and slimmer outer columns (so you'd have 3, 2, 2, 3 or 2, 3, 3, 2). Whether that would work as well aesthetically though, I'm not sure, but sticking to the columns, I can't see there's another way of doing it.
_____________________________
~~ "A cruel god ain't no god at all" ~~
~~ Erase hate. Practice love. ~~
| |
|
|
|
paul rayner
Posts: 232
Joined: 3/15/2001
From: yeppoon, qld, aus
Status: offline
|
RE: 960 grid again - 10/21/2009 7:49:31
Here's the URL of the uploaded page.
My understanding of the grid, it that you can have any combination that adds up to 12.
The nav bar that I want to continue down the left side side is 2 wide - leaving 10.
You can see how that's pushed stuff down the page. I want Welcome etc to sit to the right of the nav bar.
I tried to find a forum for the 960 grid - but couldn't track one down.
And yes, I want the four columns to take up the portion of the page to the right of the nav bar.
Cheers
_____________________________
" In theory, there is no difference between theory and practice. But, in practice, there is!"
| |
|
|
|
paul rayner
Posts: 232
Joined: 3/15/2001
From: yeppoon, qld, aus
Status: offline
|
RE: 960 grid again - 10/21/2009 16:21:31
After a late night, I think I've nailed it. I'll clean up the code and paste here later today.
Operator error - no problem with 960 Grid. (But you knew that anyway!!!!)
_____________________________
" In theory, there is no difference between theory and practice. But, in practice, there is!"
| |
|
|
|
womble
Posts: 6009
Joined: 3/14/2005
From: Living on the edge
Status: offline
|
RE: 960 grid again - 10/21/2009 16:49:40
The problem's with your HTML, not the grid system. If you want the "welcome" etc. to the right of your navigation, assuming that the main content area's intended to hold all the content (i.e. that it's nested) then your divs 7,3,1,2 and 1 etc. need to be within the opening and closing div for your main content area.
When I look at the source code for your page, all you have in the main content div is the text "Main Content Area". The text editor I use has syntax highlighting which highlights matching HTML tags, and as soon as I clicked on the opening tag for the main content area, the closing tag lit up. Unless I'm missing something about how the grid works, if you move the other divs below the main content div in your HTML, they should move to the right of your menu where you want them.
Edit: Oooops! This is what happens when I start a post, go off and do something else, then come back and finish the post and post it without refreshing the thread first!  Glad you've got it sorted!
_____________________________
~~ "A cruel god ain't no god at all" ~~
~~ Erase hate. Practice love. ~~
| |
|
|
|
paul rayner
Posts: 232
Joined: 3/15/2001
From: yeppoon, qld, aus
Status: offline
|
RE: 960 grid again - 10/23/2009 5:00:58
Here's the URL with the 960 grid implemented.
Not "designed" to be finished - just a prototype to see the 960 grid in action - from Fireworks mockup to Dreamweaver implementation.
And it seems to do everything I'd want. Any positive criticism or feedback welcome.
The only flaw I can find, is that it doesn't work well on IE6. In IE6 the last 2 columns in the 6 column row seem to wrap. I'd really love to be able to fix that.
In FF 3.5 and IE 7 it seems to do what I'd ask. The CSS can be found here.
If anyone has ideas to prevent the IE6 glitch, i'd welcome them, or a URL to a forum that specifically addresses grid type questions.
_____________________________
" In theory, there is no difference between theory and practice. But, in practice, there is!"
| |
|
|
|
womble
Posts: 6009
Joined: 3/14/2005
From: Living on the edge
Status: offline
|
RE: 960 grid again - 10/23/2009 14:02:54
Looks good. My only criticism really is that the header for some reason stops about half way across the width of the video, so you've got an empty space where the header should be. Either you need an image the full width of the page, or give the background underneath the header a colour matching the green background of the header.
_____________________________
~~ "A cruel god ain't no god at all" ~~
~~ Erase hate. Practice love. ~~
| |
|
|
|
paul rayner
Posts: 232
Joined: 3/15/2001
From: yeppoon, qld, aus
Status: offline
|
RE: 960 grid again - 10/23/2009 17:43:14
Thanks Womble
yeh, it needs centering, need a background colur hebind the banner, no background colours, remove the pink in all the columns. All that needs to be done yet. It won't happen cos I "stole" all the stuff.
But it's only a prototype to demo the 960 grid. Probably shouldn't be sooo lazy, but other stuff to do too.
Just need to get the grid working in IE6 - won't worry about 5.5. Then I'm done!
CSS url has changed to http://www.rightintoit.com/960grid/960.css
Any ideas why the grid wraps those last 2 columns in IE6 - it's supposed to work in IE6, so it must be operator error.
< Message edited by paul rayner -- 10/25/2009 4:49:38 >
_____________________________
" In theory, there is no difference between theory and practice. But, in practice, there is!"
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 