Basic css problem.

Discussion in 'CSS' started by Anthony Wild, May 27, 2010.

  1. #1
    But I´m too dumb to solve it:) I´ll translate from Swedish.

    I am trying to format Times New Roman in a Div section (not sure it is a Div) but don´t know the right css code. This is part of the css code:

    #middle{
    padding:10px;
    font-size:1.2em;
    margin-bottom:10px;
    border:2px dashed #999999;
    }

    In there there is a div section that in this case is a <p> in the HTML, in that <p> section by using css I want to change the font to Times New Roman.

    I´ve tried this but it doesn´t work except for the margin part, that works:

    div#middle p{
    margin-bottom: 20px;
    font-family:"Times New Roman";
    }

    Hope you understand what I mean.

    Thanx!
     
    Anthony Wild, May 27, 2010 IP
  2. ampg-it

    ampg-it Peon

    Messages:
    75
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Hi Anthony

    Could you also post the html.

    Thanks
     
    ampg-it, May 28, 2010 IP
  3. Anthony Wild

    Anthony Wild Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <link rel="stylesheet" href="examination2.css" type="text/css" />
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Examination del 3 - boxmodellen</title>
    </head>
    <body>
    <div id="container">
    <div id="header">
    <h1>Boxmodellens examination</h1>
    <p>Detta är ett stycke text som befinner sig i div-elementet "header". Ovanför denna text finns en rubrik av typen h1. Boxmodellen går att läsa om på <a href="http://www.w3.org">World Wide Web Consortium</a>.</p>
    </div>
    <div id="middle">
    <h2>Rubrik 1 för div-elementet "middle"</h2>
    <p>Detta är det första stycke text som befinner sig i div-elementet "middle". Under denna text följer en rubrik av typen h2 som skall se likadan ut som den rubrik som befinner sig ovanför denna text.</p>
    <h2>Rubrik 2 för div-elementet "middle"</h2>
    <p>Detta är det andra stycke text som befinner sig i div-elementet "middle". I denna text finns även en <a href="http://www.informatik.umu.se/">länk till institutionen för informatik.</a> Nedanför detta stycke följer en numrerad lista.</p>
    <ol>
    <li>Detta är det första listelementet i denna numrerade lista.</li>
    <li>Observera att numreringen ligger innanför ramen!</li>
    </ol>
    <p>Detta är det avslutande stycket med text i div-elementet "middle". Nedanför detta div-element följer ett annat div-element som kallas "footer". </p>
    </div>
    <div id="footer">
    <p>Avslutande text som befinner sig i div-elementet "footer". <a href="mailto:cbwd@informatik.umu.se">Detta är en länk.</a></p>
    </div>
    </div>
    </body>
    </html>
     
    Anthony Wild, May 28, 2010 IP
  4. ampg-it

    ampg-it Peon

    Messages:
    75
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    looks fine at my end.

    have you got a link to the site?

    Thanks
     
    ampg-it, May 28, 2010 IP
  5. Anthony Wild

    Anthony Wild Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I am trying to format to Times New Roman by using a css code the <p> which I have put in a bold text down below, without effecting the rest of the body:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <link rel="stylesheet" href="examination2.css" type="text/css" />
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Examination del 3 - boxmodellen</title>
    </head>
    <body>
    <div id="container">
    <div id="header">
    <h1>Boxmodellens examination</h1>
    <p>Detta är ett stycke text som befinner sig i div-elementet "header". Ovanför denna text finns en rubrik av typen h1. Boxmodellen går att läsa om på <a href="http://www.w3.org">World Wide Web Consortium</a>.</p>
    </div>
    <div id="middle">
    <h2>Rubrik 1 för div-elementet "middle"</h2>
    <p>Detta är det första stycke text som befinner sig i div-elementet "middle". Under denna text följer en rubrik av typen h2 som skall se likadan ut som den rubrik som befinner sig ovanför denna text.</p>
    <h2>Rubrik 2 för div-elementet "middle"</h2>
    <p>Detta är det andra stycke text som befinner sig i div-elementet "middle". I denna text finns även en <a href="http://www.informatik.umu.se/">länk till institutionen för informatik.</a> Nedanför detta stycke följer en numrerad lista.</p>
    <ol>
    <li>Detta är det första listelementet i denna numrerade lista.</li>
    <li>Observera att numreringen ligger innanför ramen!</li>
    </ol>
    <p>Detta är det avslutande stycket med text i div-elementet "middle". Nedanför detta div-element följer ett annat div-element som kallas "footer". </p>
    </div>
    <div id="footer">
    <p>Avslutande text som befinner sig i div-elementet "footer". <a href="mailto:cbwd@informatik.umu.se">Detta är en länk.</a></p>
    </div>
    </div>
    </body>
    </html>
     
    Anthony Wild, May 28, 2010 IP
  6. ampg-it

    ampg-it Peon

    Messages:
    75
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    you could just replace you <p> with <p style="font-family:'Times New Roman';">
     
    ampg-it, May 28, 2010 IP
  7. JustinBroshears

    JustinBroshears Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    try it without the div infront of #middle
    Instead of this:
    
    div#middle p{
    margin-bottom: 20px;
    font-family:"Times New Roman";
    }
    
    Code (markup):
    it would be:
    
    #middle p{
    margin-bottom: 20px;
    font-family:"Times New Roman";
    }
    
    Code (markup):
    **edit, just read your post again you wanted only the first paragraph styled then my above comment wont work.. Themeries should i hope xD.
     
    Last edited: May 28, 2010
    JustinBroshears, May 28, 2010 IP
  8. themerie

    themerie Peon

    Messages:
    30
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Justin, the div bit prefacing it doesn't matter.

    You could do #middle p { margin-bottom: 20px; font-family: Times New Roman, serif; } #middle p + p { font-family: "WhateverSans"; }
     
    themerie, May 28, 2010 IP
  9. Anthony Wild

    Anthony Wild Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Thanx guys but I have fixed the problem, but I am new at this so I´ll be back! :)
     
    Anthony Wild, May 29, 2010 IP