Hi all,
i a newbie to blueprint css and have a simple layout ,i have been
trying to make my page header start from the very top, can anyone help
please
<html>
<head>
<pre>
<link rel="stylesheet" href="css/blueprint/screen.css" type="text/
css" media="screen, projection">
<link rel="stylesheet" href="css/blueprint/print.css" type="text/
css" media="print">
<![if lt IE 8]>
<link rel="stylesheet" href="css/blueprint/ie.css" type="text/css"
media="screen, projection">
<![endif]>
</pre>
</head>
<body >
<div class="container">
<div id="header" class="span-24 last">
<h1 id="book_haven"><img src="images/header1.png" alt="Book
header image" id="header-image" /></h1>
</div>
<div class="span-2"style="background-color:blue;>
<div class="prepend-top" id="recent-reviews">
<h3 class="caps">Main Menu</h3>
<ul>
<li> Home</li>
<li> Artist Bio </li>
<li> Design Log </li>
<li> FairTrade</li>
</ul>
</div>
</div>
<div class="span-16" style="background-color:grey; background-
image: url(images/flyer.jpg); background-repeat: no-repeat; ">
There is lots of important stuff in this code snippet! Let’s
start at the top with <div class=”span-17 colborder”>. This tag
declares the largest outlined div on that page, the one that contains
the Featured Book section as well as the two smaller sections below.
The class ’span-17' relates to the Blueprint grid layout. It declares
that the width of this div should span 17 of the 24 columns on the
page. The other class being used, ‘colborder’, is short for column
border and tells Blueprint to put a border to the right of this div
between it and the sidebar.
Important: using the ‘colborder’ class actually takes up an entire
column. Since our main div is using 17 columns (span-17), you would
expect that the sidebar could occupy 7 columns (since 17 + 7 = 24, the
number of columns on our page), but since the ‘colborder’ property
takes up a column to itself, this leaves only 6 columns left for the
sidebar div to occupy (17 + 1 + 6 = 24).
Before we get to the sidebar we need to look at those two smaller
div’s, the ones titled ‘Upload a Book’ and ‘Write a Review’. This is
actually one Blueprint grid nested another Blueprint grid. Since the
inner grid is nested inside a div spanning 17 columns, the max width
for this grid, instead of 24, is 17.
<hr />
<div class="span-7 colborder">
<h4 class="prepend-5">Upload a Book</h4>
<p>
Nam vitae tortor id ante sodales facilisis.
</p>
</div>
<div class="span-7 last">
<h4 class="prepend-5">Write a Review</h4>
<p>
Nam vitae tortor id ante sodales facilisis. Mauris ipsum.
</p>
</div>
</div>
</div>
<div class="span-2 last">
Right sidebar
</div>
<hr />
<div style="background-color:green">Footer</div>
</div>
</body>
</html>
--
You received this message because you are subscribed to the Google Groups
"Blueprint CSS" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/blueprintcss?hl=en.
