You shouldn't need to use spanning classes at all if they are going to
be inheriting the width of div.container. I can't really think of a
very good reason to ever use .span-24... you can accomplish the same
thing 100% semantically without using any presentational classes.
Divs are block elements that inherit their parent elements width (in
this case, the width is set by div.container to 950px).
Try this method instead, get rid of the image elements and use CSS
image replacement instead. This immediately cleans up the markup and
makes things readable and awesome. =)
<style style="text/css">
#header h1 {
width: 100%;
height: 193px;
text-indent: -9999px;
background: url(images/header4.jpg) 0 0 no-repeat;
}
#header ul {
width: 100%;
height: 38px;
overflow: hidden;
background: url(images/nav-test.jpg) 0 0 no-repeat;
}
#header li {
float: left;
width: 100px;
}
</style>
<div class="container">
<div id="header">
<h1>This is the header</h1>
<ul id="nav">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
</div>
On Oct 2, 2009, at 3:48 PM, ~ wrote:
> I don't know what you are trying to say.
>
> Here what it looks like.
>
> <div class="span-24 last">
>
> <img src="images/header4.jpg"
>
> alt="" height="193" width="950" border="0"/>
>
>
> <div class="span-24 last">
>
> <img src="images/nav-test.jpg"
>
> alt="" height="38" width="950"
>
> border="0" />
>
> </div>
> </div>
>
>
> Steven
>
>
> On Fri, Oct 2, 2009 at 5:27 PM, Lorin Tackett
> <[email protected]> wrote:
>
> At first glance, the classes in the first span div are superfluous,
> the parent div will inherit the dimensions of the child div's content.
>
> Are you using CSS image replacement on the div itself, or are you
> simplifying the markup for the sake of argument?
>
> -Lorin
>
> On Oct 2, 2009, at 3:19 PM, ~ wrote:
>
> > Hi everyone,
> >
> > I made some pretty good process creating a website with BP. Now
> > comes a new, small problem.
> >
> > I added an image for a header and then an image for a navigator.
> > However, I notice there is a white space between these. The height
> > between these is about 5 px. How can I remove the white space?
> >
> > Below is the original.
> >
> > <div class="container showgrid">
> > <div class="span-24 last"> </div>
> > <div class="clear span-24 last"> </div>
> > </div>
> >
> > But I changed it by putting the last div inside the div and still it
> > won't remove the white space.
> >
> > <div class="container showgrid">
> > <div class="span-24 last">
> > <div class="span-24 last"></div>
> > </div>
> > </div>
> >
> > What should I do?
> >
> > Have a great weekend! Steven
> >
> > >
>
>
>
>
>
> >
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
