locked
DWT Template and CSS definitions RRS feed

  • Question

  • Hello everyone.

    I was wondering if anyone can offer some insight - here is my problem: I downloaded a template that has a main page and 2 css files: one for color and one for different layout options and links, etc. My goals is to use the same css files to further develop the site but I also wanted to make a change so that the paragraph p is smaller in some other pages. So what I did I added the following to the css file:

    #smallprint p ul li/* use this paragrpah id for TOU and 
    			other small printing dividers */
    {
    margin: 0px;
    padding: 0px 0px 16px 0px;
    line-height: 1em;
    font-size: 0.90em;
    }
    

    The goal was that every time I needed a smaller font somewhere in a page just ad ID="smallprint" to that tag and it worked. Now the problem: I created a dwt template and every time I make changes to the template all my tags within other pages gets replaces with ID="smallprint0" 1, 2and so forth.

    It seems that the dwt is causing this but I cannot figure out why. I do not have any ID="smallprint" tags in the template and the editable region is set so that i should be able to edit the content.

    I am new to css so any help with be appreciated - if necessary I can link tehpages.

    Thank you

    Thursday, July 8, 2010 3:21 PM

Answers

All replies

  • Because an ID can only be used in one location on a page.

    To apply the same CSS to several locations in a page, use the class .smallprint instead of an ID #smallprint


    Expression Web MVP
    Thursday, July 8, 2010 3:25 PM
  • Do I need to define that before in the css file?
    Thursday, July 8, 2010 3:28 PM
  • Yes, in the CSS .smallprint{

    stuff here

    }

    And then in the page class="smallprint"  instead of ID="smallprint"

    The class will be available in the apply styles pane just like an ID is.


    Expression Web MVP
    Thursday, July 8, 2010 3:30 PM
  • that did the trick. can I ask then what is the purpose of the ID tag?
    Thursday, July 8, 2010 3:35 PM
  • Read up on the Selectutorial:

    http://css.maxdesign.com.au/selectutorial/


    --
    Chris Hanscom - Microsoft MVP
    On Facebook | On Twitter | Resource Center | Veign's Blog | Web Development Help

    Get a Complete Website Analysis by Veign
    • Marked as answer by Avasile Thursday, July 8, 2010 4:03 PM
    Thursday, July 8, 2010 3:40 PM
  • Sounds good.

    Thank you for your help

    Thursday, July 8, 2010 4:03 PM
  • Sigh...
    Expression Web MVP
    Thursday, July 8, 2010 4:11 PM
  • Er, Avasile, I believe Steve's sigh is for not getting his answer also marked as an answer.  Credit to all who help is best, especially since he solved your problem.
    Thursday, July 8, 2010 4:31 PM
  • Er, Avasile, I believe Steve's sigh is for not getting his answer also marked as an answer.  Credit to all who help is best, especially since he solved your problem.
    I took care of it.  :)
    Paul Bartholomew, Microsoft Expression Web
    Thursday, July 8, 2010 8:13 PM
    Moderator