Formatting Part of a line

[audiopro]

I have a list of names and dates, this is just a small selection for demo purposes.

<li>John Smith: Died 23rd. August 1906</li>
<li>Jack Jones: Died 13th. July 1914</li>
<li>Bill Wade: Died 12th. January 1918</li>

I want to make the whole line bold and make the name a different colour to the rest of the line. I have quite a number of these to do and we are not sure what colour we will use at the moment.
This is just an example of what we need to do.

[b][red]John Smith:[/red] Died 23rd. August 1906[/b]
[b][red]Jack Jones:[/red] Died 13th. July 1914[/b]
[b][red]Bill Wade:[/red] Died 12th. January 1918[/b]

Is there a way of doing this using an element for each name, rather than putting an inline style on each line?


Keith

http://www.studiosoft.co.uk

 

[dwarfthrower]

Sure, you could use an <em> or <strong> tag to go around the name and set the style through css:

li strong {
 color: red;
 font-weight: bold;
}

_{Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.}
Enable Apps

 

[ChrisHunt]

... or you could use a <span>. You could use any inline element that seems appropriate, really. Once you've wrapped the names in your element of choice you can use CSS to style it. Like this:

<ul class="names">
<li><span>John Smith:</span> Died 23rd. August 1906</li>
<li><span>Jack Jones:</span> Died 13th. July 1914</li>
<li><span>Bill Wade:</span> Died 12th. January 1918</li>
</ul>

With this CSS

.names li {
   font-weight: bold;
}

.names span {
   color: #F00;
}

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[Foamcow]

Just adding my 2p

In this instance I would use a span.

Chris nailed it when he said you should use a tag that's appropriate.

In your example the reason you are highlighting the name is purely stylistic rather than for importance. Using a <strong> or <em> tag implies that the information is more important.
Imagine reading the line, would you say the name louder than the rest of the line?

<honk>*:O)</honk>

Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

 

[audiopro]

Thanks for the responses guys.
The page is on a genealogy web site and contains numerous names with their birth, marriage and death details.
I simply wanted the names to stand out from the rest of the text. Other sites I have seen use bright text backgrounds to highlight the names but I think it makes the page look disjointed and not too pretty.
I have been styling with CSS for a while now but this is my first full web site without tables and after climbing a steep learning curve I am beginning to realise just how powerful CSS is. I just hope I don't fall foul of the browser problems I have read so much about.

Keith

http://www.studiosoft.co.uk

 

[Foamcow]

You might also consider using a definition list.

<dl>
 <dt>Name here</dt>
  <dd>Other info</dd>
  <dd>More info</dd>

 <dt>Another name</dt>
  <dd>Some info</dd>

 <dt>Yet another name</dt>
  <dd>Guess what!</dd>
</dl>

Since each birth/death snippet belongs to a name.

You could then style the <dt> elements in the way you choose.

<honk>*:O)</honk>

Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

 

[audiopro]

I would like to make a well defined layout with this but unfortunately, some of the people were inconsiderate enough to be born after photography was invented so some of them have photos attached to their files.
I am sticking to the <span> element which works a treat.
I need to spend some time reading about how to avoid multiple nested <div> elements, so I am of into a darkened roon now.

Thanks for your help.

Keith

http://www.studiosoft.co.uk