Jump to content


Photo

Blueprint Css Framework Doesn't Errata


  • Please log in to reply
7 replies to this topic

#1 DarelJ

DarelJ

    New Member

  • Members
  • Pip
  • 5 posts
  • 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?

#2 jsiarto

jsiarto

    Active Member

  • O'Reilly Author
  • PipPipPip
  • 61 posts
  • 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

#3 DarelJ

DarelJ

    New Member

  • Members
  • Pip
  • 5 posts
  • 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.com/products/slammer/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

#4 Abhishek Mishra

Abhishek Mishra

    New Member

  • Members
  • Pip
  • 1 posts

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


#5 morgan martel

morgan martel

    New Member

  • Members
  • Pip
  • 2 posts

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.

#6 Jessica Robort

Jessica Robort

    Active Member

  • Members
  • PipPip
  • 19 posts

Posted 19 September 2013 - 03:27 AM

nice solution

#7 Jessica Robort

Jessica Robort

    Active Member

  • Members
  • PipPip
  • 19 posts

Posted 23 September 2013 - 11:50 PM

very helpful post

#8 tongclub18

tongclub18

    Active Member

  • Members
  • PipPip
  • 23 posts

Posted 23 October 2014 - 10:41 PM

order to get things looking right.

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




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users