1 {{ upvoteCount | shortNum }}
1 {{ upvoteCount | shortNum }}

need help with css classes

by kah22
1 replies
  • WEB DESIGN
    • |
Hi guys I'd appreciate a little help - but first an apology for the length of the post, didn't know how to make it shorter

I've a pre-made template and style sheet to go with it. Here's the original style sheet that covers content display

Code:
/* Content */
#content {float:left; text-align:left; width:700px; margin:10px 0 0 0;;}
#content H1 {font-size: 5.4em; color: #555555}
#content h2 {font-size:10px; letter-spacing:-1px; clear:left; border-bottom:2px solid #ccc;}
#content h3 {font-size:1.4em; letter-spacing:-1px;}
#content h2 a, #content h3 a {font-weight:700;}
#content p {margin:0 0 15px;}
#content a {border-bottom:1px dotted #888;}
#content a:hover {color: #222; border-bottom:1px dotted #000;}
#content ul, #content ol {margin:0 0 15px 10px; padding:0 0 0 10px;}
#content ul li, #content ol li {margin:0 0 10px 10px;}
#content ul ul, #content ol ol {margin:5px 0 5px 10px;}
I'm trying to fix up a h1 class so that it will appear the same size and weight as my ordinary text, I'm doing this so that I can display keywords in <h1> tags for the bots while readers will see it as ordinary text.

I've tried adding the following class
Code:
#content H1.second {display:inline; font:12px Verdana,Arial,Tahoma,"Trebuchet MS",sans-serif; line-height:1.4em; color:#555555;}
in the belief that display:inline' would keep the text before and after the selected words together but this doesn't appear to be the case. It does keep the text after the closing </h1> tag on the one line but the opening <h1> tag forces a break.

Here is an example of my html code.
Code:
<p class="MsoNormal">After reading a number of online <h1 class="second">reviews </h1>I mentioned it to a number of my own friends and, I suppose, for a bit of fun we decided to buy and try. Was it worth it - read on.</p>
It appears in my browser like this:-
After reading a number of online

reviews I mentioned it to a number of my own friends and, I suppose, for a bit of fun we decided to buy and try. Was it worth it - read on
Note the break between online and review with a double line spacing. Any idea as to how I can tidy this code up so it all looks like one paragraph.

Thanks for any suggestions
Kevin
#classes #css
  • Profile picture of the author Aaron H
    Hi Kevin, a bit rough n ready but here goes:


    CSS:

    h1.second{
    display:inline;
    color:red;
    }

    .MsoNormal{
    color:green;
    }

    p{
    display:inline;
    }


    HTML:

    <p><span class="MsoNormal">After reading a number of online <h1 class="second">reviews </h1>I mentioned it to a number of my own friends and, I suppose, for a bit of fun we decided to buy and try. Was it worth it - read on.</span></p>

    Problem you have is that <h1> tags weren't designed to be nested inside a <p> tag, then you had the another issue where the <h1> was breaking your <p> MsoNormal class so I bunged it in a <span>
    {{ DiscussionBoard.errors[205992].message }}

Trending Topics