Two CSS questions

About <SPAN> and white space

[trillianjedi]

OK, I'm nearly there on my PostNuke goes full CSS layout project.

I have a couple of elements which look to me to be too inefficient for me to have coded them properly!

1. Can I use a SPAN here instead?

<div class="boxed-block">
<span class="block-title">Reviews</span>
<a class="review-item" href="http://www.yadayada">Some Widget</a>By Bill Blogs

<a class="review-item" href="http://www.yadyada">Another Widget</a>By WidgetLover4u
</div>

In this one (which I've shortened to two for thsi example, but have loads of them), it seems I have to put in the class="review-item" in each A tag. I thought with CSS that I could use <SPAN> to set a class around these elements just once?

2. Creating an area of space in nested DIV's

The boxed-block class above uses both the padding and margin properties to create space both inside the DIV and between DIV elements.

They are used nested inside an existing DIV, who's ID is "left" (think basic left-hand navigation style website).

So, using the "margin" property set to 5px, I thought I could just call my boxed-block class like so:-

<div ID="left">
<div class="boxed-block">
Insert content here
</div>

<div class="boxed-block">
Insert more content here
</div>
</div>

and there would be a 5px space between the two elements. But it doesn't work - they just jam up tight next to each other.

Any thoughts on what I may have done wrong?

Thanks,

TJ

[MatthewHSE]

If I'm understanding your first question, you can use the following CSS to target the links inside elements assigned the block-title class:

.block-title a { /* Rules here */ }

Your second example should work just like you thought it should. Don't take this wrong, but when I run into a problem like that it normally turns out to be a typo... ;)

<edit> I just went over your first question again and found that I definitely missed something with my answer above. You could use the code I mentioned, IF the links were nested inside the .block-title span, which they aren't. You could change that code a bit to target links inside the .boxed-block <div> element if that would accomplish what you want. Or maybe I'm just misunderstanding what you're asking. </edit>

[trillianjedi]

Hi Mathew,

No - you understand it correctly, thanks.

So I can style a tags inside the boxed-block class itself, then all a tags in that block will take that styling. Perfect!

As to the other, could be a typo - I'll check...

Thanks,

Dean

[encyclo]

In the first example, are the items vertical or horizontal? In both cases you can use the same markup, but the CSS is different. I know that this is not directly related to your question, but using a

div

and

span

combination isn't ideal in terms of accessibility or functionality when CSS is disabled.

As Matthew says, you need to take advantage of the cascade to target the links within the enclosing block. But looking at the markup, it would surely make a lot more sense if it looked something like this:

<div class="boxed-block">
<h4>Reviews</h4>
<ul>
<li><a class="review-item" href="http://www.yadayada">Some Widget</a> By Bill Blogs</li>
<li><a class="review-item" href="http://www.yadyada">Another Widget</a> By WidgetLover4u</li>
</ul>
</div>

Then you can target each item via the cascade (you haven't posted your CSS so I'm just inventing the rules here):

.boxed-block {
margin: 5px 0 0;
}

.boxed-block h4 {
margin:0;
font-weight:bold;
}

.boxed-block ul, .boxed-block li {
list-style:none;
margin:0;
}

.boxed-block li a {
text-decoration:none;
}

.boxed-block li a:hover {
text-decoration:underline;
}

If the links are supposed to be horizontal, you can float the list items.

[trillianjedi]

Thanks encyclo.

The links are listed vertically - in a box on the right hand side of page. Kind of like a "latest reviews" thing.

Thanks for your input, I'll definitely follow this. Looking around at other sites that I think have been done really well, I note they also use the li or ul tags for menu/list type items.

I'm not sure what you mean by "...the cascade"? I'm new to CSS - I've always outsourced this in the past, but thought it was time I learned a bit.

I think what you mean is I can ditch the class="" inside the <a> tags, by styling them in the list item class?

I'll be trying some of this stuff out tonight and I'll let you know if I get stuck again!

I didn't post the CSS as I thought it might be a fairly generic problem, but you totally got it anyway. I'll post it up next time though, if I'm still stuck.

Thanks guys,

TJ

[encyclo]

I'm not sure what you mean by "...the cascade"?

The cascade is the key to Cascading Style Sheets, and is often where beginners fall down, making their markup over-heavy in the process. The cascade is simply that styles can filter (cascade) down to child elements. So in my above example, we have only one class (which can be reused) for the containing block:

.boxed-block

. Using the cascade you can target the markup within this block. I used a

h4

for the title, and to style it I iddn't need to specify a class. I just styled every

h4

within

.boxed-block

:

.boxed-block h4 {
[i]rules here[/i]
}

You can get as specific as you want with rules. The following extreme example is from a project I am working on:

ul#menu li.dropdown#active ul li a:hover {
background-image:none;
color:rgb(97,144,128);
}