I'm new to CSS, so apologies if this is obvious. I'm using the following CSS to create a hanging indent in my pubs container: #pubs { padding-top: 5px; padding-bottom: 5px; padding-right: 5px; padding-left: 30px; border: none; } h4 { font-size: 150%; text-indent: -25px; } Everything works except the size of h4 won't change no matter what I do. I need the heading to be larger. I've tried using h3 or h2 instead, and they won't take the indent for some reason. Here's the HTML I'm using: <div id="pubs"><h4><u>Autumn-Winter 2000/01 Issue Now Available</u></h4> Bunny Lover; Starting a FAR Chapter in Your Community; Companion Animal Rescue Effort Grows; Animal Husbandry: Time for Divorce; A Few Preliminary Thoughts on the Nature of Mother-Love; Bodywork Techniques </div> Thanks!
First of all, I would advise against using negative margins or negative text-indent unless you exhausted all possible solutions. Next, the <u> element has already been deprecated. An alternative way of coding this would be: CSS: #pubs { padding: 5px 30px; border: none;} h1{ font-size: 150%; text-decoration:underline;} #pubs p{ margin: 0 0 0 25px;} Code (markup): XHTML: <div id="pubs"> <h1>Autumn-Winter 2000/01 Issue Now Available</h1> <p>Bunny Lover; Starting a FAR Chapter in Your Community; Companion Animal Rescue Effort Grows; Animal Husbandry: Time for Divorce; A Few Preliminary Thoughts on the Nature of Mother-Love; Bodywork Techniques</p> </div> Code (markup):
Thanks... this is a great suggestion for cleaning up my code. The only thing is, this doesn't give me a hanging indent. Meaning the title should be flush left while the text underneath is all indented. Thoughts?
You can move the h1 outside the pubs div and just apply margin/padding to h1 and tweak the padding/margin of #pubs
I'm actually not sure what you mean by a hanging indent. If you can provide a mock of what you want to happen, I can help you with the code.
Yeah, that seems like it should work. But when I tried it, the heading refused to take any styling once it was outside the div. If there is an embedded stylesheet in this document somewhere, could it be overriding my linked one (it's not my code, I'm altering it)? You can see the hanging indents here - http://farinc.org/pub.html
Duh, I just figured out I don't need to apply any styling to the header once it's outside of the div. It is strange the I can't get the h tags to take styling, but at least for now it doesn't matter. Thanks for your help!
Ok here it is, hope this helps but I would suggest to put the entire css style in one stylesheet: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> body{ background:#FFF; font-size:62.5%; font-family:Arial, Helvetica, sans-serif; color:#000;} *{ /* global reset */ margin:0; padding:0;} #container{ padding: 10px 30px;} h1{ text-decoration:underline; margin: 0 0 30px 0; font-size:2em;} #pub h2{ font-size:1.8em; text-decoration:underline; margin: 20px 0 15px 0;} #pub p{ font-size:1.2em; line-height:150%; margin: 0 0 10px 25px;} </style> </head> <body> <div id="container"> <h1>Backissues</h1> <div id="pub"> <h2>Autumn-Winter 2000/01</h2> <p>Bunny Lover; Starting a FAR Chapter in Your Community; Companion Animal Rescue Effort Grows; Animal Husbandry: Time for Divorce; A Few Preliminary Thoughts on the Nature of Mother-Love; Bodywork Techniques for Animal Companions; Re-Membering the Primates; Film Review: Beyond Violence: The Human Animal Connection; Book Reviews: Animal Grace: Entering a Spiritual Relationship with Our Fellow Creatures,The Emperor's Embrace: Reflections on Animal Families and Fatherhood.</p> <h2>Volume 12 *Nos. 1-2* Spring-Summer 2000</h2> <p>The Power of the People: A Seattle Diary; The WTO and Animals; The Long Goodbye: A Woman and Horses; Legislative Efforts Reveal Sordid Underground Crushing Fetish; Some Preliminary Thoughts on Crush Videos; Annie: The Famous Liberated Macaque Monkey; Film Review: A Cow at My Table; Book Review: Lethal Laws: Animal Testing, Human Health and Environmental Policy.</p> </div> </div> </body> </html> Code (markup):
pay attention the the difference of between the two following #pubs h4{ font-size: 150%; text-indent: -25px; } h4{ font-size: 150%; text-indent: -25px; } also pay attention to your document type. At last , try to clear the cookies. It should works.