Cleaning up the <br> tags and replacing with CSS

I have a page with about 20 or so <br> tags scattered throughout. I'd like to take all these out and make the same formatting happen without cluttering up my code. How can I do this with CSS?

 

Why are the <br>s there? Are they simulating paragraphs, in lieu of proper markup? Are they acting as padding or margins? How about giving us something to work with? A link would be nice.

cheers,

gary

 

What a question? Use div's.

 

What an answer. The div element is for grouping other elements; it has no semantic value and is not a substitute for proper semantic markup or for padding or margins.

gary

 

Ok, you have right. It depends of the context.

 

There is nothing wrong with the div tag. YOu can use it or you can use css case depending.

 

There is nothing wrong with the <br /> tag either. Or is it?
Would love to hear that.

 

No, the br element is perfectly valid with a specific purpose:
The br element forcibly breaks (ends) the current line of text.

An example of proper usage:

<p>Please respond by mail to:</p>
<p>XYZ Co.<br>
1000 Main St.<br>
Sometown, Anystate </p>

Code (markup):

Using the br to simulate a paragraph, or to create spacing is a misuse, structurally and semantically wrong. eg.

<br><br>Please respond by mail to:<br><br>
XYZ Co.<br>
1000 Main St.<br>
Sometown, Anystate <br><br>

Code (markup):

cheers,

gary

 

I was going to ask...why would you want to get rid of it?

 

div tags are pretty much useless without CSS, so they go hand in hand, not separately

 

So, tell me if this sounds right. Instead of using brs, I can assign a div element for all my blocks of text and put something like this inside of each selector that needs line breaks below it:

padding-bottom:15px;

Is that correct?
Is this good form?
What are the other common ways to do this sort of thing?

 

No. The div element is an aggregating element. It's job is to group other elements to form a new styling context. Text is marked up with the p or blockquote or another block level container that describes what the content is.

Post your content with the markup you're using. We'll show you just how it should be marked up.

cheers,

gary

 

I have this in my .css file:

.thumbtable {
margin-left:9px;
}
.photodesc {
padding-bottom:15px;
}
.job {
padding-bottom:15px;
}

And, now I have this in my HTML page:
<p class="job">yada yada</p>
<p class="photodesc">yada yada</p>
<p class="thumbtable">yada yada</p>

 

That's better.

Why duplicate the padding rule? Give both a single class or combine the rules.

.caption {
  padding-bottom: 15px;
  }
=======
<p class="caption">yada yada</p>
<p class="caption">yada yada</p>
<p class="thumbtable">yada yada</p>

Code (markup):

Just the snippet alone does not convey the actual semantics or structure, so there may be better ways to do this.

Until you have advanced enough to combine operations, it is a good idea to start with bare nekkid html (no tables, no fonts, no nuthin' but descriptions of what the content is) markup with no regard to presentation. Just get the structure and semantics right before trying to dress it up. If your content and its markup don't make sense, or if it's hard to use, you haven't yet got it right.

cheers,

gary