SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Wizard boxhead's Avatar
    Join Date
    Feb 2004
    Location
    UK
    Posts
    1,040
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    set font in different body styles

    I have three body styles:

    body.main{
    background-image:url(../assets/back.gif);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    background-color: #CCCCCC;
    margins: 3,3,3,3
    }
    body.pages{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    background-color: #FFFFFF
    }
    body.cms{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    background-color: #CCCCCC;
    margins: 0px
    }

    the margin, background-color and background-image work fine but any font styles I use dont work.

    Where am I going wrong?

    monkey
    monkey - the rest is history

  2. #2
    SitePoint Addict jodmcc's Avatar
    Join Date
    Dec 2003
    Location
    Houston, Texas
    Posts
    227
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Couldn't you just make a body with the font and take it out of the 3 class tags since they are all the same size and font?

    Example:

    body{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    }


    John

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I'd be surprised if the margins work at all as there is no property called margins
    Code:
    margins: 3,3,3,3
    besides that you haven't specified a unit on the 3 either. Mozilla will treat that as zero and ie will treat it as 3.

    The correct way is:
    Code:
    margin:3px;
    I'm not sure what you are trying to do with the above code (assuming you fix the errors mentioned) anyway.

    Those three styles can only work if they are on 3 separate pages as they must go in the body tag.
    Code:
    <body class="pages">
    you could add multiple classes to the body tag.
    Code:
    <body class="pages main cms">
    But as they have the same style definitions the last one would overwrite any previous styles of the same sort so that would be no use either.

    You'd need to show us the html as well to see how you are trying to apply the above. If you are using it on seperate pages with each page have a different class then it should work ok.

    Paul

  4. #4
    SitePoint Wizard boxhead's Avatar
    Join Date
    Feb 2004
    Location
    UK
    Posts
    1,040
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul

    Spot on with the margins - works great now!

    The reason I have three different body tags is that there are three types of pages which need different backgrounds. The trouble is that I also want to set the font attributes for all the pages (although in this example, all the attributes are the same, I have needed different font styles etc for different pages before) but this doesnt work - I can change the font-size to 50px with no change!

    How can I achive different backgrounds and different font attributes on different pages? say I want-

    One page to be blue, use arial font, 14px
    One page to be black, use times new roman, 10px
    One page to be red, use courier, 20px

    Cheers for your help

    monkey
    monkey - the rest is history

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Well what you have above should work.

    Copy this page 3 times and change the id in the body tag to page1, page2, page3 etc on the relevant page and try it out.

    Each page will change as expected.
    Code:
    <!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>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    body {
     background:white;
     color:black;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: medium;
    }
    #page1 {
     background:blue;
     color:white;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 14px;
     
    }
    #page2 {
     background:black;
     color:yellow;
     font-family: "Times New Roman", Times, serif;
     font-size: 10px;
    }
    #page3 {
     background:red url(../../../images/pobsky.jpg) no-repeat fixed center center;
     color:#ffffcc;
     font-family: "Courier New", Courier, mono;
     font-size: 20px;
    }
    a {color:yellow}
    
    </style>
    </head>
    <body id="page3">
    <p><a href="page.htm">Page0</a></p>
    <p><a href="page1.htm">Page1</a></p>
    <p><a href="page2.htm">Page2</a></p>
    <p><a href="page3.htm">page3</a></p>
    <p>&nbsp;</p>
    <p>Some text : Some text</p>
    <p>Some text : Some text</p>
    <p>Some text : Some text</p>
    <p>Some text : Some text</p>
    <p>Some text : Some text</p>
    <p>Some text : Some text</p>
    <p>Some text : Some text</p>
    <p>Some text : Some text</p>
    <p>Some text : Some text</p>
    <p>Some text : Some text</p>
    <p>Some text : Some text</p>
    <p>Some text : Some text</p>
    <p>Some text : Some text</p>
    <p>Some text : Some text</p>
    <p>Some text : Some text</p>
    <p>Some text : Some text</p>
    <p>Some text : Some text</p>
    <p>Some text : Some text</p>
    <p>Some text : Some text</p>
    <p>Some text : Some text</p>
    <p>Some text : Some text</p>
    <p>Some text : Some text</p>
    <p>Some text : Some text</p>
    <p>Some text : Some text</p>
    <p>Some text : Some text</p>
    <p>Some text : Some text</p>
    <p>Some text : Some text</p>
    <p>Some text : Some text</p>
    <p>Some text : Some text</p>
    <p>Some text : Some text</p>
    <p>Some text : Some text</p>
    <p>Some text : Some text</p>
    <p>Some text : Some text</p>
    <p>Some text : Some text</p>
    <p>Some text : Some text</p>
    <p>Some text : Some text</p>
    <p>Some text : Some text</p>
    </body>
    </html>
    Paul

  6. #6
    SitePoint Wizard boxhead's Avatar
    Join Date
    Feb 2004
    Location
    UK
    Posts
    1,040
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My text is in a table! Just spent ages trying to work out what was going on, only to realise i needed a td style!

    cheers
    monkey - the rest is history

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Some browsers don't inherit the font-size into tables so you have to set them explicitly as well.

    I hope the table is for tabular data

  8. #8
    SitePoint Wizard boxhead's Avatar
    Join Date
    Feb 2004
    Location
    UK
    Posts
    1,040
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Some browsers don't inherit the font-size into tables so you have to set them explicitly as well.

    I hope the table is for tabular data
    Nope its a layout table - I havent got as far as using css for layouts
    monkey - the rest is history


Bookmarks

Posting Permissions

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