O'Reilly Forums: Blueprint Css Framework Doesn't Errata - O'Reilly Forums

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Blueprint Css Framework Doesn't Errata

#1 User is offline   DarelJ 

  • New Member
  • Pip
  • Group: Members
  • Posts: 5
  • Joined: 20-August 07
  • Location:Atlanta, GA

Posted 26 March 2009 - 07:04 PM

I want to show the Blueprint grid over index.html, but the code on page 142 doesn't work. How can I do it?
0

#2 User is offline   jsiarto 

  • Active Member
  • PipPipPip
  • Group: O'Reilly Author
  • Posts: 61
  • Joined: 05-January 09
  • Gender:Male
  • Location:Chicago

Posted 16 April 2009 - 06:57 AM

@rassclatt

You have to do a few things for this to work (and you may still get mixed results given the layering of the CSS).

1. In the index.html file of the RPM site you need to add the class "showgrid" to the container <div>. It should look like this:
CODE
<div id="wrap" class="container showgrid">

2. You're now going to get a page error because the browser is looking for grid.png.
3. This file is located in the blueprint/src directory. You can either move this to stylesheets/src or modify the screen.css file to point to the original location.

This should get the grid displaying, but you may need to mess with the CSS file in order to get things looking right.

If you're on a Mac, I'd suggest you take a look at Slammer (http://site.ringce.c...er/slammer.html). It's a standalone app that puts a flexible grid on your screen and can be used with any application, including the browser.

Hope this helps!

-Jeff
0

#3 User is offline   DarelJ 

  • New Member
  • Pip
  • Group: Members
  • Posts: 5
  • Joined: 20-August 07
  • Location:Atlanta, GA

Posted 22 April 2009 - 07:38 AM



QUOTE (jsiarto @ Apr 16 2009, 09:57 AM) <{POST_SNAPBACK}>
@rassclatt

You have to do a few things for this to work (and you may still get mixed results given the layering of the CSS).

1. In the index.html file of the RPM site you need to add the class "showgrid" to the container <div>. It should look like this:
CODE
<div id="wrap" class="container showgrid">

2. You're now going to get a page error because the browser is looking for grid.png.
3. This file is located in the blueprint/src directory. You can either move this to stylesheets/src or modify the screen.css file to point to the original location.

This should get the grid displaying, but you may need to mess with the CSS file in order to get things looking right.

If you're on a Mac, I'd suggest you take a look at Slammer (http://site.ringce.c...er/slammer.html). It's a standalone app that puts a flexible grid on your screen and can be used with any application, including the browser.

Hope this helps!

-Jeff



Thanks. wink.gif
0

#4 User is offline   Abhishek Mishra 

  • New Member
  • Pip
  • Group: Members
  • Posts: 1
  • Joined: 12-November 09

Posted 12 November 2009 - 06:25 PM

First of all, U have to generate the Blue Print CSS file (Grid.css) code from www.blueprintcss.org website. Then reference this file in your html page.

<html>
<head>
<body>
<div id="container" class="span-29 customCssClass">
Your content goes here........
</div>

</body></head>
</html>

Here above (span-29 customCssClass), Span-29 is the css class which determines the container width and by using ur customCssClass you may override this width to achieve extra margin, if at all required for ur page.
As far as possible we need to maintain the container's width using span's, so that ur design will be similar in all the browsers.

Happy coding,
Abhishek.Mishra

0

#5 User is offline   morgan martel 

  • New Member
  • Pip
  • Group: Members
  • Posts: 2
  • Joined: 25-March 13

Posted 25 March 2013 - 06:56 AM

You might had added incorrect CSS codes, removing or changing those value may fix the problem. That was also I encountered when I first work design Superbuzz.ca, a cheap web design in vancouver, canada. It is very much simple.
0

#6 User is offline   Jessica Robort 

  • Active Member
  • PipPip
  • Group: Members
  • Posts: 19
  • Joined: 16-September 13

Posted 19 September 2013 - 03:27 AM

nice solution
0

#7 User is offline   Jessica Robort 

  • Active Member
  • PipPip
  • Group: Members
  • Posts: 19
  • Joined: 16-September 13

Posted 23 September 2013 - 11:50 PM

very helpful post
0

#8 User is offline   tongclub18 

  • New Member
  • Pip
  • Group: Members
  • Posts: 3
  • Joined: 16-September 14

Posted Yesterday, 10:41 PM

order to get things looking right.

สล็อตออนไลน์
คาสิโนออนไลน์
gclub ดาวน์โหลด
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users