Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13

Thread: CSS trouble

  1. #1
    New Coder
    Join Date
    Jan 2004
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post CSS trouble

    My website uses CSS (kind of) that someone else wrote for me.

    <STYLE TYPE="text/css">
    <!--
    p
    {
    text-indent:27px; font:9pt verdana
    }
    //-->
    </STYLE>

    and then my website's body has something like:

    <FONT blah blah blah>

    <B>THE INCIDENT INCIDENT</B> - 24 January 2004
    <P>I ran into an old friend at the store yesterday, but he didn't appreciate my clumsiness very much.</P><BR>

    <B>THE DAYDREAMING INCIDENT</B> - 23 January 2004
    <P>I daydream a lot. Because of this I sometimes have trouble focusing on ...</P><BR>

    </FONT>


    But the problem is I use CSS for the paragraphs, but I want to boldify and make the titles the font I want, and I guess it is bad html to a <P> tag inside my <FONT> tags (which are for the titles). So in order to have the titles in a font and size that I want, I would have to use a font tag on every single one which would be a big waste. Can someone tell me how I could just have like 2 styles (I guess it'd be called) one for the paragraphs and one for the titles. My website is at http://www.geocities.com/chamith7 if that will help you see what I am talking about. Thanks a lot in advance.

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,743
    Thanks
    0
    Thanked 244 Times in 239 Posts
    Hi there chamith7,

    Try it like this, css...
    Code:
    <style type="text/css">
    <!--
    p
       {
        text-indent:27px; 
        font:9pt verdana
       }
    h1,h2, h3
       {
        font-family:arial;
        color:#000080;
       }
    span
       {
        font-family:couier;
        font-size:12px;
        color:#000000;
       }
    //-->
    </style>
    and the body...
    Code:
    <h1>THE INCIDENT INCIDENT<span>-24 January 2004</span></h1> 
    <p>I ran into an old friend at the store yesterday, but he didn't appreciate my clumsiness very much.</p>
    <h2>THE DAYDREAMING INCIDENT<span>-23 January 2004</span></h2> 
    <p>I daydream a lot. Because of this I sometimes have trouble focusing on ...</p>
    <h3>AND THIS IS H3<span>-22 January 2004</span></h3>
    cthead

  • #3
    Regular Coder
    Join Date
    Aug 2003
    Location
    Loughborough University
    Posts
    427
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sure thing, for the titles you should use header tags; h1, h2, h3, h4, h5, h6.

    In this case I'll use h2 tags since you should have a page title in an h1 tag, even if it's just something like <h1>Welcome</h1>. Anyway, here's some code:

    Code:
    <style type="text/css"><!--
    
    h2{font:10pt "verdana", sans-serif;}
    
    p{text-indent:27px;font:9pt "verdana", sans-serif;}
    
    --></style>
    
    </head>
    
    </body>
    
    <h2><b>THE INCIDENT INCIDENT</b> - 24 January 2004</h2>
    <p>I ran into an old friend at the store yesterday, but he didn't appreciate my clumsiness very much.</p><br>
    
    <h2><b>THE DAYDREAMING INCIDENT</b> - 23 January 2004</h2>
    <P>I daydream a lot. Because of this I sometimes have trouble focusing on ...</p><br>
    Just so you know, your entire page could be converted, quite easily, to a CSS and <div> based layout. Since it would be so easy it would be a good place for you to start learning CSS and XHTML if you have a little time. CSS is really easy to get the hang of and XHTML isn't that different to normal HTML.
    AMD Athlon "Barton" XP 3200+ (11*200.5MHz = 2.2GHz)
    BFG GeForce 6800 Ultra OC 256Mb
    3 * Kingston 256Mb PC3200 DDR400
    Seagate Barracuda 120Gb Ultra ATA-100 and Seagate Barracuda 160Gb, SATA-150

  • #4
    Regular Coder
    Join Date
    Aug 2003
    Location
    Loughborough University
    Posts
    427
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi coothead, if he were to use a new header element for each of his topics, he would quickly run out of them, have you seen his page?

    Headers are for conveying page structure to non-visual browsers, the code you have posted rates the first topic more important than the second, and the second more important than the third etc. But they are all equally important and therefore should all use the same header tag. Some W3C guidence - http://www.w3.org/TR/WAI-WEBCONTENT-...gical-headings.
    AMD Athlon "Barton" XP 3200+ (11*200.5MHz = 2.2GHz)
    BFG GeForce 6800 Ultra OC 256Mb
    3 * Kingston 256Mb PC3200 DDR400
    Seagate Barracuda 120Gb Ultra ATA-100 and Seagate Barracuda 160Gb, SATA-150

  • #5
    New Coder
    Join Date
    Jan 2004
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thanks a lot

    Wow, thank you both very much. I'll get on learning that stuff soon.

  • #6
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,743
    Thanks
    0
    Thanked 244 Times in 239 Posts
    Hi there lavalamp,
    Hi coothead, if he were to use a new header element for each of his topics,
    he would quickly run out of them, have you seen his page?
    You are jesting of course
    I did not suggest that chamith7 should use multiple headers for his layout but....
    just displayed examples of a tag; of which I presumed, he was unaware

    cthead

  • #7
    Regular Coder
    Join Date
    Aug 2003
    Location
    Loughborough University
    Posts
    427
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That bit was a joke yes, but your code did imply that a new header tag should be used for each new topic.
    AMD Athlon "Barton" XP 3200+ (11*200.5MHz = 2.2GHz)
    BFG GeForce 6800 Ultra OC 256Mb
    3 * Kingston 256Mb PC3200 DDR400
    Seagate Barracuda 120Gb Ultra ATA-100 and Seagate Barracuda 160Gb, SATA-150

  • #8
    New Coder
    Join Date
    Jan 2004
    Location
    Malaysia
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I am reading this thread too. I think lavalamp's code is more efficient.

  • #9
    New Coder
    Join Date
    Jan 2004
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts

    What is "CSS and <div> based layout?"

    I read the CSS and XHTML tutorials at w3schools.com and never saw anything about <div>. Where can I learn how to use it on my site?

  • #10
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by lavalamp
    That bit was a joke yes, but your code did imply that a new header tag should be used for each new topic.
    I'm sure what he meant was more like this:
    Code:
    <h1>Chaddy's Journal</h1>
    <h2>Fresh from the Cortex</h2>
    
    <h3><span>The Collision Incident</span> - 25 January 2004</h3>
    <p>I ran into an old friend at the store yesterday, but he didn't appreciate my clumsiness very much.</p>
    
    <h3><span>The Daydreaming Incident</span> - 24 January 2004</h3>
    <p>I daydream a lot. Because of this I sometimes have trouble focusing on ...</p>
    
    ...
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #11
    New Coder dragon's Avatar
    Join Date
    May 2003
    Location
    Florida
    Posts
    99
    Thanks
    0
    Thanked 0 Times in 0 Posts
    http://www.designplace.org/tutorials.php?page=1&c_id=24 and many other sites available through Google search.

  • #12
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Hi chamith7,

    "boldify"????

    Think of a <div> as just that, a division of the page, and it starts to make more sense. For example...
    Code:
    <div id="intro">
    <p>A well-written introduction, blah blah blah, yakety schmackety...</p>
    </div>
    <div id="maincontent">
    <p>The main content, blah blah blah...</p>
    </div>
    ... you get the point. Then in your CSS you can specify layout for each of those divisions and style your page. Hope this helps,

    Rich

  • #13
    Regular Coder
    Join Date
    Aug 2003
    Location
    Loughborough University
    Posts
    427
    Thanks
    0
    Thanked 0 Times in 0 Posts
    me' I think you're right there, that would make a lot more sense, and conform to the WCAG which is always good .

    chamith7, div and span tags do absolutely NOTHING to what is inside them which is why they're so useful. The difference between them is that span is inline (will stay on a line with other in-line content) and div is a block level element (will always push itself onto a new line and expand to as wide as it can).

    The real use of div and span tags is when you apply CSS to them, since they have no rules of they're own except for display:block; or display:inline; you can code away without worrying about other predefined rules getting in the way.
    AMD Athlon "Barton" XP 3200+ (11*200.5MHz = 2.2GHz)
    BFG GeForce 6800 Ultra OC 256Mb
    3 * Kingston 256Mb PC3200 DDR400
    Seagate Barracuda 120Gb Ultra ATA-100 and Seagate Barracuda 160Gb, SATA-150


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •