SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Noobie questions sorry.... overriding a <p> tag and # on only one page

    Sorry im ne to this, in my last post i was taught to overide

    .full-article .module-inner {
    padding:0 15px;}

    with
    .imagearticle .full-article .module-inner
    {
    padding:0 15px;}

    How do i override this CSS just for this page using my class suffix id image_article for these two pieces of CSS???? I'm really struggling with what takes president

    #mainmodules2 {
    padding-top:15px;}

    and

    p {
    margin-bottom:15px;
    margin-top:10px;
    }

    The P seems to overide
    .imagearticle .full-article .module-inner p{
    margin-top: 0px;
    margin-bottom: 2px;}

    Thanks in advance for your time!!!! heres the code


    &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&



    <div class="bodycontent">
    <div id="maincontent-block">

    <div class=" imagearticle">
    <div id="page" class="full-article">

    <div class="module-tm"><div class="module-tl"></div><div class="module-tr"></div></div>
    <div class="module-inner">

    <div class="article-rel-wrapper">
    <h2 class="contentheading">
    Articles &amp; Publishing </h2>
    </div>





    <p>Read Articles on horse nutrition and horse care published by These are incomplete sample articles <span class=" ">If you would like to read or publish the full article in your club magazine or newsletter please contact us on the contact page!!</span><span class=" "><br /></span></p>

    <div class="article-ratings">
    </div>
    </div>
    <div class="module-bm"><div class="module-bl"></div><div class="module-br"></div></div>
    </div>
    </div>
    </div>
    </div>
    <div class="clr"></div>

    <div id="mainmodules2" class="spacer w99">
    <div class="block full">
    <div class=" bran4">
    <div class="moduletable">
    <div class="module-tm"><div class="module-tl"></div><div class="module-tr"></div></div>
    <div class="module-m"><div class="module-l"><div class="module-r">
    <div class="module-inner">

  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Well, no wonder you're struggling... you have waaaay too many containers, too many names, too many classes.... I'm having trouble seeing how to override for the p myself.

    In fact, I can't tell what's specific to this page, in order to tell you how to make that p different "for this page".

    Ideally, you'd have as few containers as necessary and style the most basic stuff first (with as few selectors as possible). and then try to make a specific thing here and there different.

    The P seems to overide
    .imagearticle .full-article .module-inner p{
    margin-top: 0px;
    margin-bottom: 2px;}
    It may not be. it might be that nasty nasty <br> sitting inside the empty span sitting inside the p that's making the space.

    This looks like a template. Is it? If so, do you have any way to simplify the HTML in it?

    If you can, it will SO save you hair!

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,721
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Hi, I'm not quite sure on your question.
    How do i override this CSS just for this page using my class suffix id image_article for these two pieces of CSS????
    If you meant the class imagearticle (not ID image_article as you say) then .. yeah.

    But I still don't understand waht you want. I gather from Stommy you want the <p> to have overridden margins?

    I just tried reading your post over several times and I just saw too many interpretations of what you wanted and it would take ages for me to go over all the permutations of my interpretations
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  4. #4
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for trying to help. Sorry about the confused post, it was late and i had been stuck for hours and even i can barely make sense of this post myself now.

    I eventually worked it out and it seems i wasn't understanding the basic principle of refrenceing the class of objects by starting at the Div that my template placed the page class suffix on.
    For example i want to change the CSS for this <h2 class="contentheading">

    This is what worked for me
    .imagearticle .full-article .module-inner .article-rel-wrapper h2 {
    font-size:180&#37;;
    line-height:110%;
    margin:0 -15px 0px;
    padding:0 95px 12px 15px;

    The template restricts me to have to go through many containers is there a simpler way to write this in CSS . (I have place the code at the bottom of the post)

    for example


    <div class="main-tm"><div class="main-tl"></div><div class="main-tr"></div></div>
    <div class="main-m"><div class="main-l"><div class="main-r">
    <div id="main-body">
    <div id="main-content" class="s-c-x">
    <div class="colmask leftmenu "><div class="wrapper"> <div class="colmid">
    <div class="colright">

    <!--Begin Main Column (col1wrap)-->
    <div class="col1wrap">
    <div class="col1pad">
    <div class="col1">
    <div id="maincol">
    <div class="bodycontent">
    <div id="maincontent-block">

    <div class=" imagearticle">
    <div id="page" class="full-article">

    <div class="module-tm"><div class="module-tl"></div><div class="module-tr"></div></div>
    <div class="module-inner">

    <div class="article-rel-wrapper">
    <h2 class="contentheading">
    Articles &amp; Publishing </h2>
    </div>

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,721
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    So do you have any more questions? You indicated you got it to work
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •