Greetings..
I am new to CSS and to Blueprint in particular, so I apologize if this
is a dumb newb question. Here's what I am trying to figure out....
I am building my own photography website using blueprint and I wanted
a grid that is 18 columns wide (total 960 px wide) by 12 rows long (to
use the 24 column default grid would make the boxes formed by the grid
too small for my use). I generated grid.css code and a grid.png file
with one of the handy online generators . I want particular boxes
formed by the grid to contain different thumbnails of my photos that,
when clicked, would enlarge the photo. Sounds easy, right?
my issue is that I am having a problem understanding why, when I
layout the rows of 18 divs with a span of 1 each, they don't fill the
entire row? When I created my grid, it stated that the column width
was 52px. So I created div of a span on one with a height of
52px...which should create a box of 52px high and 52 px wide. Creating
18 of these in a container should span the entire grid. But it doesn't
and for the life of me I can't figure out why. I believe it is either
basing the span on the 24 column still, OR it has some kind of padding
issue that I don't understand. (when I show grid, I can see the 18
columns, but the divs don't line up with the grid at all...except for
the first).
What am I doing wrong here?
here is my code for one row of the 18 column container:
<div class="span-1" id="19"><img src="/images/graypixel.gif"
height="52px" alt="" border="0px" /></div>
<div class="span-1" id="23"><img src="/images/graypixel.gif"
height="52px" alt="" border="0px" /></div>
<div class="span-1" id="24"><img src="/images/graypixel.gif"
height="52px" alt="" border="0px" /></div>
<div class="span-1" id="25"><img src="/images/graypixel.gif"
height="52px" alt="" border="0px" /></div>
<div class="span-1" id="26"><img src="/images/graypixel.gif"
height="52px" alt="" border="0px" /></div>
<div class="span-1" id="27"><img src="/images/graypixel.gif"
height="52px" alt="" border="0px" /></div>
<div class="span-1" id="28"><img src="/images/graypixel.gif"
height="52px" alt="" border="0px" /></div>
<div class="span-1" id="29"><img src="/images/graypixel.gif"
height="52px" alt="" border="0px" /></div>
<div class="span-1" id="30"><img src="/images/graypixel.gif"
height="52px" alt="" border="0px" /></div>
<div class="span-1" id="31"><img src="/images/graypixel.gif"
height="52px" alt="" border="0px" /></div>
<div class="span-1" id="32"><img src="/images/graypixel.gif"
height="52px" alt="" border="0px" /></div>
<div class="span-1" id="33"><img src="/images/graypixel.gif"
height="52px" alt="" border="0px" /></div>
<div class="span-1" id="34"><img src="/images/graypixel.gif"
height="52px" alt="" border="0px" /></div>
<div class="span-1" id="35"><img src="/images/graypixel.gif"
height="52px" alt="" border="0px" /></div>
<div class="span-1" id="35"><img src="/images/graypixel.gif"
height="52px" alt="" border="0px" /></div>
<div class="span-1" id="35"><img src="/images/graypixel.gif"
height="52px" alt="" border="0px" /></div>
<div class="span-1" id="35"><img src="/images/graypixel.gif"
height="52px" alt="" border="0px" /></div>
<div class="span-1 Last" id="36"><img src="/images/graypixelif"
height="52px" alt="" border="0px" /></div>
Also, how do I add a box around each div so I can separate them from
each other?
I appreciate any help or direction.
cheers,
Jonathan
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
