Replacing Font and bold tags with CSS

@Scuba_SteveOct 11.2004

Hi everyone,

I am trying to make this this code

~~[QUOTE]~~

Job Title:  Idaho Jobs (F/T & P/T Opportunities)

[/QUOTE]

look the same with CSS. My problem is that using DIVS or P or H1… tags make new lines. I need it to all be on the same line. I am sure this is simple but I am lost with it right now. Any ideas?

Scuba

to post a comment

CSS

@soccer362001Oct 11.2004 — #Try Text here

I don't know if that will work or not.

@Scuba_SteveauthorOct 11.2004 — #I guess I was unclear. I am using an external style sheet and trying to replicate the former in-line css using an external style sheet. Thank you for the suggestion though.

Scuba

@DarkScytheOct 11.2004 — #have you tried adding "display: inline;" ?

they might be being treated as block elements..

@Paul_JrOct 11.2004 — #[b]CSS[/b]

<i>
 </i>.someclass {
 margin-top: 0;
 }
 .someclass span {
 color: #f00;
 }

[b]HTML[/b]

<i>
 </i>&lt;p class="someclass"&gt;&lt;span&gt;Job Title:  &lt;/span&gt;&lt;strong&gt;Idaho Jobs&lt;/strong&gt;(F/T &amp; P/T Opportunities)&lt;/p&gt;

@toicontienOct 11.2004 — #EDIT: GAH! Paul beat me to it ? But here's another way to skin this cat.

You don't necessarily need to create boldface text with CSS only. If you want text to be boldface, and surrounded by normal-weighted text, use the tag instead of the tag. Making text boldface really means you want to give [b]strong[/b] emphasis to those words, hence using the tag makes sense.

In your case:

<i>
 </i>/* Place this CSS in your external style sheet */
 p.special {
 color: #f00;
 margin-top: 0;
 }
 
 p.special strong { color: #000; }

Then use the following HTML:

<i>
 </i>&lt;p class="special"&gt;Job Title: &lt;strong&gt;Idaho Jobs (F/T &amp;amp;amp; P/T Opportunities)&lt;/strong&gt;&lt;/p&gt;

@Scuba_SteveauthorOct 11.2004 — #Thank you,

That works great. Have a great day.

Scuba Steve

Replacing Font and bold tags with CSS

6 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Replacing Font and bold tags with CSS

6 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #CSS _↴