A simple question about CSS... - GoFuckYourself.com

xenigo · 01-02-2011, 02:44 AM

So, here goes:

The CSS Framework grid by the name of "Blueprint CSS" contains both a CSS grid, and a PSD grid by which to design your site around. How in the FUCK do you tie the sliced PSD to the CSS grid?

I'll get even more specific:

How do you get (for instance), text to show up on the 10th column, 10th row, on the CSS grid?

I've been searching for this all over Google and the FAQ of the grid sites and CSS positioning sites and haven't found anything yet that makes sense to me.

Kiopa_Matt · 01-02-2011, 02:53 AM

You got it wrong. The PSD grid is for a designer to open up Photoshop, and actually design the page. The PSD grid helps make sure the design is symmetrical, fits into various resolutions nicely, etc.

From there, you chop up the PSD design, and stick it into CSS. Not sure what "CSS grid" you're talking about, but I doubt it has anything to do with the PSD one.

xenigo · 01-02-2011, 02:56 AM

I understand that you chop up the PSD and put it into the CSS. But what do you do exactly to put the elements of the PSD into the CSS, exactly? I'm not really finding anything that's very clear-cut on how the process works.

How do you position relative to the grid? Take a look at http://blueprintcss.org and tell me what you think.

Kiopa_Matt · 01-02-2011, 03:12 AM

You're either going to have to Google "CSS tutorial" and start learning, or make your website one huge image.

There's no simple step-by-step process to turn a PSD into a web site. Either have to teach yourself, or hire a web designer.

xenigo · 01-02-2011, 03:16 AM

I figured there was at least an answer to how to overlay text and form fields over a PSD sliced into HTML.

Obviously I'm missing something from the grid / framework concept, I'm just not sure what.

Kiopa_Matt · 01-02-2011, 03:18 AM

For positioning (overlay), start here:

http://www.w3schools.com/css/css_positioning.asp

Deej · 01-02-2011, 12:07 PM

The PSd is sliced up into sections within the psd itself. Photoshop will spit them out in the gridded up chunks. some have programs that automatically put that psd layout into a CSS layout. Some do it by hand. While youre viewing your design online it has absolutely nothing to do with the psd anymore. Text can be overlayed on that specific area with proper positioning. shit another graphic can be put on a that graphic "grid". CSS possibilities are near endless.

Its all in the markup...

MetaMan · 01-02-2011, 12:09 PM

I slice individual images and build the code by hand. No idea what you are even talking about and i have mastered the code.

Deej · 01-02-2011, 12:12 PM

Quote:

Originally Posted by MetaMan

I slice individual images and build the code by hand. No idea what you are even talking about and i have mastered the code.

What he said, but, meaner...

potter · 01-02-2011, 12:15 PM

The grid is for symmetrization. There is no "10th grid, 10th column". The point of the grid is so that every element is a specific size.

For example, if each column is set to 20px in the PSD. That means if you make a three column layout. One column could be 160 pixels, and the other two 400 pixels. They are all multiples of the 20 pixel. If there are 20 "columns" in the PSD. You're not actually creating a 20 column layout. Those columns are only there to "snap" your ACTUAL columns and elements to. They're there to make everything proportional.

Deej · 01-02-2011, 01:10 PM

Quote:

Originally Posted by potter

The grid is for symmetrization. There is no "10th grid, 10th column". The point of the grid is so that every element is a specific size.

For example, if each column is set to 20px in the PSD. That means if you make a three column layout. One column could be 160 pixels, and the other two 400 pixels. They are all multiples of the 20 pixel. If there are 20 "columns" in the PSD. You're not actually creating a 20 column layout. Those columns are only there to "snap" your ACTUAL columns and elements to. They're there to make everything proportional.

Theres a word for that layout but I cannot think of it right now...

potter · 01-02-2011, 02:23 PM

There's a bunch of them. 960 grid is the most popular. http://960.gs/

rock-reed · 01-02-2011, 06:13 PM

Bump for Zenniego

xenigo · 01-02-2011, 06:52 PM

Quote:

Originally Posted by Deej

The PSd is sliced up into sections within the psd itself. Photoshop will spit them out in the gridded up chunks. some have programs that automatically put that psd layout into a CSS layout. Some do it by hand. While youre viewing your design online it has absolutely nothing to do with the psd anymore. Text can be overlayed on that specific area with proper positioning. shit another graphic can be put on a that graphic "grid". CSS possibilities are near endless.

Its all in the markup...

Well I know it's all about the markup. But there's a reason why the Blueprint CSS grid has both a PSD grid and a corresponding CSS grid.

Use of the PSD grid is obvious, and I know that even without utilizing the CSS contained within the Blueprint ZIP, I can use CSS positioning to map my text in the exact position down to the pixel.

Can anyone explain what the use of the Blueprint CSS is exactly?

xenigo · 01-02-2011, 07:49 PM

Here's an example of the grid I'm talking about:

http://www.spry-soft.com/grids/grid....ter_w idth=20

JD · 01-02-2011, 08:37 PM

It sounds to me like you need a PSD to HTML guy instead of trying to figure it all out on your own... just my 2cents

xenigo · 01-02-2011, 08:52 PM

Here's another example:

http://refreshboston.org/css/960.css

Sexgenoten · 01-02-2011, 09:05 PM

Honestly, i've never heard about CSS gridpositioning.
I've looked at the link and see a container12 with a width of 960 positioned in the middle of the screen. All other containers are inside this container12 so i suspect its some sort of xhtml predefined stuff.

I think its something you can easily do yourself.
Make a pagecontainer( container12 ) and give it a width and position it in the middle.
All subsequent divs you can make absolute and put them exactly in place where you want.
Just make sure u use the xhtml doctype.

potter · 01-02-2011, 10:46 PM

xenigo -- both examples you provided are the 960 grid. one is even off the link i posted. it's not about "how do i get [[this]] to column [[this]] in row [[this]].

not sure how else to explain it. if you don't get it, then don't try it. there's no magical "css" to use, it's more a theory than it is an execution.

Deej · 01-02-2011, 11:17 PM

Quote:

Originally Posted by potter

There's a bunch of them. 960 grid is the most popular. http://960.gs/

Thats exactly what I was thinking of... 960 grid...

potter · 01-03-2011, 01:14 AM

________
|y|y| | |
-----------
| |y| | |
-----------
| |y| |x|
-----------

If this makes more sense. In the example, with a grid. It's more about making something a certain width or height (proportionately). So if you had a grid that was 4 wide (columns) like in the example. Each column would be a certain pixels wide. Therefore each row would be a certain pixels wide. So you could make rows and columns that were proportionate to each other, making the layout more symmetrical. So instead of having a layout with columns that were say 153 pixels wide, they would be 160 pixels wide. Or three columns that were 124, 375, and 238. You'd have 240, 260, and 500. All divisions of 20. Then you would make your header 180 in height. Instead of something like 132. It also allows you to make you spacing in multiples of 20. So you might have 20 and 20 between your 3 columns. Instead of 13, and 34 or something. Basically you're designing to a specific "snapped ratio".

It's not only how designers should be designing in the first place, but it makes things easier on the developer. So they aren't creating retarded css rules of .column1=187. Instead every thing is a multiple of 20. So everything is not only easier to code, but it flows better and leaves everything open for better future proofing. Two years down the road you want to implement anything, you can do so in a multiple of 20.

Hope that helps.

potter · 01-03-2011, 01:16 AM

Oh, and with that example. It's more about making the "Y" scenario. In other words making a horizontal element a specific width (taking up a certain amount of columns). Or making a vertical element a specific height (taking up a certain amount of rows).

It is not about trying to get an element to a specific row/column area in the grid ("x").

01-02-2011, 02:44 AM	#1
xenigo Confirmed User Industry Role: Join Date: Jan 2001 Location: Oakland, CA Posts: 8,067	A simple question about CSS... So, here goes: The CSS Framework grid by the name of "Blueprint CSS" contains both a CSS grid, and a PSD grid by which to design your site around. How in the FUCK do you tie the sliced PSD to the CSS grid? I'll get even more specific: How do you get (for instance), text to show up on the 10th column, 10th row, on the CSS grid? I've been searching for this all over Google and the FAQ of the grid sites and CSS positioning sites and haven't found anything yet that makes sense to me. Last edited by xenigo; 01-02-2011 at 02:47 AM..

01-02-2011, 02:53 AM	#2
Kiopa_Matt Confirmed User Industry Role: Join Date: Oct 2007 Posts: 1,448	You got it wrong. The PSD grid is for a designer to open up Photoshop, and actually design the page. The PSD grid helps make sure the design is symmetrical, fits into various resolutions nicely, etc. From there, you chop up the PSD design, and stick it into CSS. Not sure what "CSS grid" you're talking about, but I doubt it has anything to do with the PSD one. __________________ xMarkPro -- Ultimate Blog Network Management Streamline your marketing operations. Centralize management of domains, pages, Wordpress blogs, sponsors, link codes, media items, sales and traffic statistics, plus more!

01-02-2011, 03:12 AM	#4
Kiopa_Matt Confirmed User Industry Role: Join Date: Oct 2007 Posts: 1,448	You're either going to have to Google "CSS tutorial" and start learning, or make your website one huge image. There's no simple step-by-step process to turn a PSD into a web site. Either have to teach yourself, or hire a web designer. __________________ xMarkPro -- Ultimate Blog Network Management Streamline your marketing operations. Centralize management of domains, pages, Wordpress blogs, sponsors, link codes, media items, sales and traffic statistics, plus more!

01-02-2011, 03:18 AM	#6
Kiopa_Matt Confirmed User Industry Role: Join Date: Oct 2007 Posts: 1,448	For positioning (overlay), start here: http://www.w3schools.com/css/css_positioning.asp __________________ xMarkPro -- Ultimate Blog Network Management Streamline your marketing operations. Centralize management of domains, pages, Wordpress blogs, sponsors, link codes, media items, sales and traffic statistics, plus more!

01-02-2011, 12:07 PM	#7
Deej I make pixels work Industry Role: Join Date: Jun 2005 Location: I live here... Posts: 24,386	The PSd is sliced up into sections within the psd itself. Photoshop will spit them out in the gridded up chunks. some have programs that automatically put that psd layout into a CSS layout. Some do it by hand. While youre viewing your design online it has absolutely nothing to do with the psd anymore. Text can be overlayed on that specific area with proper positioning. shit another graphic can be put on a that graphic "grid". CSS possibilities are near endless. Its all in the markup... __________________ Deej's Designs n' What Not Hit me up for Design, CSS & Photo Retouching Icq#30096880

01-02-2011, 02:56 AM	#3
xenigo Confirmed User Industry Role: Join Date: Jan 2001 Location: Oakland, CA Posts: 8,067	I understand that you chop up the PSD and put it into the CSS. But what do you do exactly to put the elements of the PSD into the CSS, exactly? I'm not really finding anything that's very clear-cut on how the process works. How do you position relative to the grid? Take a look at http://blueprintcss.org and tell me what you think.

01-02-2011, 03:16 AM	#5
xenigo Confirmed User Industry Role: Join Date: Jan 2001 Location: Oakland, CA Posts: 8,067	I figured there was at least an answer to how to overlay text and form fields over a PSD sliced into HTML. Obviously I'm missing something from the grid / framework concept, I'm just not sure what.

01-02-2011, 12:09 PM	#8
MetaMan I AM WEB 2.0 Industry Role: Join Date: Jan 2003 Posts: 28,682	I slice individual images and build the code by hand. No idea what you are even talking about and i have mastered the code.

01-02-2011, 12:15 PM	#10
potter Confirmed User Industry Role: Join Date: Dec 2004 Location: Denver Posts: 6,559	The grid is for symmetrization. There is no "10th grid, 10th column". The point of the grid is so that every element is a specific size. For example, if each column is set to 20px in the PSD. That means if you make a three column layout. One column could be 160 pixels, and the other two 400 pixels. They are all multiples of the 20 pixel. If there are 20 "columns" in the PSD. You're not actually creating a 20 column layout. Those columns are only there to "snap" your ACTUAL columns and elements to. They're there to make everything proportional. __________________

01-02-2011, 02:23 PM	#12
potter Confirmed User Industry Role: Join Date: Dec 2004 Location: Denver Posts: 6,559	There's a bunch of them. 960 grid is the most popular. http://960.gs/ __________________

01-02-2011, 06:13 PM	#13
rock-reed Confirmed User Join Date: May 2005 Posts: 1,892	Bump for Zenniego __________________ --- Ethnic niche? Black-Asian-Latina ? Contact me and lets talk traffic. rockreed@ that thing they call the google mail When you E-mail Me, PLZZZZ make the Subject Title: >>>>>> GFY! So I do not lose you in Spam.

01-02-2011, 07:49 PM	#15
xenigo Confirmed User Industry Role: Join Date: Jan 2001 Location: Oakland, CA Posts: 8,067	Here's an example of the grid I'm talking about: http://www.spry-soft.com/grids/grid....ter_w idth=20

01-02-2011, 08:37 PM	#16
JD Too lazy to set a custom title Industry Role: Join Date: Sep 2003 Posts: 22,651	It sounds to me like you need a PSD to HTML guy instead of trying to figure it all out on your own... just my 2cents

01-02-2011, 08:52 PM	#17
xenigo Confirmed User Industry Role: Join Date: Jan 2001 Location: Oakland, CA Posts: 8,067	Here's another example: http://refreshboston.org/css/960.css

01-02-2011, 09:05 PM	#18
Sexgenoten Registered User Industry Role: Join Date: Dec 2010 Posts: 85	Honestly, i've never heard about CSS gridpositioning. I've looked at the link and see a container12 with a width of 960 positioned in the middle of the screen. All other containers are inside this container12 so i suspect its some sort of xhtml predefined stuff. I think its something you can easily do yourself. Make a pagecontainer( container12 ) and give it a width and position it in the middle. All subsequent divs you can make absolute and put them exactly in place where you want. Just make sure u use the xhtml doctype.

01-02-2011, 10:46 PM	#19
potter Confirmed User Industry Role: Join Date: Dec 2004 Location: Denver Posts: 6,559	xenigo -- both examples you provided are the 960 grid. one is even off the link i posted. it's not about "how do i get [[this]] to column [[this]] in row [[this]]. not sure how else to explain it. if you don't get it, then don't try it. there's no magical "css" to use, it's more a theory than it is an execution. __________________

01-03-2011, 01:14 AM	#21
potter Confirmed User Industry Role: Join Date: Dec 2004 Location: Denver Posts: 6,559	________ \|y\|y\| \| \| ----------- \| \|y\| \| \| ----------- \| \|y\| \|x\| ----------- If this makes more sense. In the example, with a grid. It's more about making something a certain width or height (proportionately). So if you had a grid that was 4 wide (columns) like in the example. Each column would be a certain pixels wide. Therefore each row would be a certain pixels wide. So you could make rows and columns that were proportionate to each other, making the layout more symmetrical. So instead of having a layout with columns that were say 153 pixels wide, they would be 160 pixels wide. Or three columns that were 124, 375, and 238. You'd have 240, 260, and 500. All divisions of 20. Then you would make your header 180 in height. Instead of something like 132. It also allows you to make you spacing in multiples of 20. So you might have 20 and 20 between your 3 columns. Instead of 13, and 34 or something. Basically you're designing to a specific "snapped ratio". It's not only how designers should be designing in the first place, but it makes things easier on the developer. So they aren't creating retarded css rules of .column1=187. Instead every thing is a multiple of 20. So everything is not only easier to code, but it flows better and leaves everything open for better future proofing. Two years down the road you want to implement anything, you can do so in a multiple of 20. Hope that helps. __________________

01-03-2011, 01:16 AM	#22
potter Confirmed User Industry Role: Join Date: Dec 2004 Location: Denver Posts: 6,559	Oh, and with that example. It's more about making the "Y" scenario. In other words making a horizontal element a specific width (taking up a certain amount of columns). Or making a vertical element a specific height (taking up a certain amount of rows). It is not about trying to get an element to a specific row/column area in the grid ("x"). __________________