#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Location
    Las Vegas
    Posts
    4
    Rep Power
    0

    CSS in general hates me


    I'm so very new at all this stuff. What the h--- is with CSS?
    I want to format a page where the first paragraph starts with a big red letter, but no indentation. The subsequent paragraphs will start with regular letters, which should be indented. Here's my code.

    body
    {
    font-family: Book Antiqua, Times New Roman, Times;
    background-color: rgb(255,255,255);
    color: rgb(102,102,153);
    }

    h2
    {
    position: absolute;
    left:29px;
    }

    p
    {
    text-indent: 2em;
    width: 30em;
    line-height: 1.3em;
    text-align: justify;
    }

    div:first-letter
    {
    width: 30em;
    color: #ff0000;
    font-size:300%;
    line-height: .8em;
    text-align: justify;

    }


    With this code, and <div></div> around my first paragraph, I get my letter all big and no indent, but the paragraph goes on past 30ems and it's not justified.

    When I change <div:firstletter> to <p.f:firstletter> and use <p class="f"></p> around my first paragraph, I get big letter, correct paragraph width and justification, but a huge indent almost half the width of the paragraph.

    Exactly how does the hierarchy of Selector.class.function work, and how would I format this CSS?

    And while I'm at it, is there a way to relatively position my header <h3> based on centering it to the width of my paragraph?

    Thanks for any or all parts solved.
  2. #2
  3. Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Apr 2003
    Location
    Italy, EU
    Posts
    517
    Rep Power
    12
    The first paragraph letter as a big red one and the setting of the indentation of the other paragraphs can be done defining the common values of the paragraph and then two classes (one for the first paragraph and another one for the others):
    Code:
    p
    {
    width: 50%; 
    text-align: justify; 
    } 
    .first:first-letter 
    { 
    color: #ff0000; 
    font-size:300%; 
    }
    .others 
    { 
    text-indent: 50px; 
    }
    The problem of the great indentation is due to the use of 'em' dimensions instead of 'px'... In fact, in the first case the indentation is calculated referring to the font size, in the second one you can decide the indentation's effective pixel dimension.
    About the centering of a third level header, the problem is still the definition of the width using the 'em'...
    Hope it helps!
    Cheers, Dave
  4. #3
  5. Monkey Magic
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2002
    Location
    UK
    Posts
    103
    Rep Power
    12
    ok I had a quick play with your css and have change it a bit:

    Code:
    .p
    {
    	width: 30em;
    	
    	text-align: justify;
    	position: absolute;
    } 
    
    .firstletter 
    { 
    width: 1em; 
    color: #ff0000; 
    font-size:300%; 
    line-height: .8em; 
    position :static;
    }
    and with this test html

    Code:
    <Div>
    <A class=firstletter>H</A><a class=p> ello and welcome to this test...
    test test test testing test test test test test test test test test
    test test test test test
    </a>
    
    </div>
    is that any better?

    Kong.

IMN logo majestic logo threadwatch logo seochat tools logo