Audano, Chris wrote:
I’m new to CSS and I’m having difficulties trying to make two paragraphs look as one (without extra line spacing). I have a graphic to the left with a title “Contacts” to the right of the graphic. I would like the “Contact Name” to go directly under the title “Contacts” without extra spacing. Using the “.p contacts” doesn’t seem to do anything no matter how I modify it.
Can anyone assist?
<div id="contacts">
<p class="contacts_img"><img src="/Assets/Graphics/SiteWide/QuestionMark_Icon.gif" alt="Question Mark Graphic" width="45" height="45"></p>
<span class="contact_Name">Contacts</span>
<p class="p">Contact Name</p>
</div>
#contacts{
font-size:80%;
text-align:left;
}
.contacts_img{
float:left;
width: 4em;
padding: 0 0 0 3px;
}
.contact_Name {
font-size: 125%;
font-weight: bold;
color: #006699;
}
Try:
<div id="contacts">
<img src="/Assets/Graphics/SiteWide/QuestionMark_Icon.gif" alt="Question Mark Graphic" width="45" height="45">
<h3 class="contact_Name">Contacts</h3>
Contact Name
</div>
#contacts{
font-size:80%;
text-align:left;
}#contacts img{
float:left;
width: 4em;
padding: 0 0 0 3px;
}#contact h3{
font-size: 125%;
font-weight: bold;
color: #006699;
margin-bottom : 0;
}I choose h3 because it seemed like a heading and I guessed that 3 was the right level.
I dropped <p class="contacts_img"> since is wasn't a paragraph and it wasn't doing anything. When an inline element is floated an anonymous box is created for it.
<p class="p">, besides be confusingly named, didn't appear to be a paragraph either.
*****************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
*****************************************************
