CSS For Multiple

Sitepoint Members,

I am having a tough time figuring out how to style the links via a parent tag for the code below so that I only have to use class=“side” once instead of for each time I have a link. I’m trying to use a parent tag to turn off the underlining of all the links (which I have 60 of, not just two).
The <ul class=“side”> didn’t work.
<html>
<head>
<style type=“text/css”>
.side{text-decoration:none;}
</style>
</head>

<body>
<ul class=“side”>
<li><a href=“/abc/”>abc</a></li>
<li><a href=“/jkl/”>jkl</a></li>
</ul>
</body>
</html>

Thanks,

Chris

You need this:

.side [COLOR="Red"]a[/COLOR] {text-decoration:none;}

That is, you have to tell the browser that this underline rule applies to the <a> element. At the moment, your rule says—“remove the underline from the element with a class of .side”—which refers to the UL, and is meaningless, because text-decoration doesn’t apply to a UL. :slight_smile:

Ralph,
Thanks for the help. I didn’t know you could do that.

Thanks a bunch,

Chris

Ralph,
I have a lot of <br />s on my site. A few people told me to get rid of them. What css programming do use to avoid <br />s?

Chris

Instead of using <br />, you are better off using top or bottom margin/padding.

For example, if you want more spacing between paragraphs, use

p {margin: 30px 0;}

If you want a bigger gap above a particular element, give it a special class:

p.special {margin-top: 30px;}

Do you have a specific example?

Ralph,
Yeah, thanks for asking.
<div id=“col2”>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<ul><li class=…</ul>

CSS:
#col2{right:10px;color:#bfbfff;float:right;width:140px;text-align:center;position:relative}

I have all those BRs above both columns in my 3 column site for 60+ pages.

Thanks Ralph,

Chris

OK, so what you need in your stylesheet is something like

#col2 ul {margin-top: 60px;}

I have all those BRs above both columns in my 3 column site for 60+ pages.

All those <br />s over 60 pages is a problem, though. Ideally, go through and delete them all, but if you can’t be bothered, you could try adding to your stylesheet something like

#col2 br {display: none;}

Ralph,
Let me work on that a bit.

Thanks,

Chris

I’m not sure I understand the example, but I’m sure it’s easy. It sounds like you just need top padding on the lower div, as background color / image shows in the the padding area of an element. But I’d prefer to see and example (image or preferably live link to an example) to know what the situation is. Words alone don’t seem to cut it these days.

Ralph,
That’s a weekend job after all. Would you give me a little help on this one?

If I have on div block with a header image and a div below it with a block of solid color with text on top of the solid color and the main background is a small image tiled, how can I put a space between the two div blocks so that the tiled images can be seen between the div blocks?

What I have many don’t like

<div class=“header”> </div>
<div> </div>
<div>block of solid color with text on top of the solid color…other code…</div>

Can it really be done without that middle div block? I can’t see how adding margin-bottom to the top div block in some way would help? I used <br /> at one time but someone said don’t use a <br /> there. I just can’t think of another way.

Thanks,

Chris