SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    634
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    why does my css not work in wp?

    Hi, happy easter or easter bunny day to all.
    I am working on learning how to create wp pages.& even bought the sitepoint create your own wicked theme book.
    but this is where I am at.
    my initial php/html/css layout (number 2 in the image) is working out ok. but wp (number 1, on top in the image) is not.

    I was able to add a second side bar & second menu to the wp theme.
    but wp doesn't recongize the size settings making the second menu on the left hand side about 5px wide rather than 20% and the css ribbon style on the right hand side also doesn't display.

    was wondering how this was & how I can go about fixing it?
    and below is the rather simple css...And actually as I look at it am thinking i need a second nav css rule for the left hand side bar...betcha that is it...

    Code:
    #clear{
    clear:both;
    margin:0;
    padding:0;
    }
    
    #wrap{
    width:100%;
    height:100%;
    //border: 3px solid #000;
    margin:0px auto;
    
    }
    #core{
    float:left;
    width:65%;
    min-height:780px;
    padding:0px;
    margin:0px;
    border-right: 1px solid #000;
    }
    #header{
    width:100%;
    height:200px;
    float:left;
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
    background-color:#000;
    text-transform:uppercase;
    }
    #header h1{
    display:block;
    margin:0px 0px 0px 700px;
    padding:0px 0px 0px 10px;
    color:#fff;
    border-left: 1px solid #fff;
    width:300px;
    line-height:200px;
    }
    
    #container{
    float:right;
    width:75%;
    //border: 5px solid #000;
    //background-color: #4C1F00;
    }
    
    #mainBody{
    float:left;
    width:90%;
    height:auto;
    margin:0px 0px 10px 10px;
    padding:0px 0px 10px 0px;
    text-align:justify;
    border-bottom: 1px solid #000;
    //background-color: #4C1F00;
    }
    #secondaryText{
    float:left;
    width:90%;
    height:auto;
    margin:0px 0px 10px 10px;
    padding:0px 0px 10px 0px;
    text-align:justify;
    border-bottom: 1px solid #000;
    //background-color: #4C1F00;
    }
    
    #sideBar01{
    float:right;
    width:25%;
    min-height:780px;
    margin:0px 10px 0px 0px;
    padding:0px 10px;
    border-left: 3px solid #000;
    
    }
    
    #sideBar02{
    float:left;
    width:20%;
    min-height:600px;
    //margin:0px 10px 0px 0px;
    //padding:0px 10px;
    border-left: 3px solid #000;
    }
    .widget{
    margin: 10px 0px 5px 10px;
    border: 2px solid #000;
    font-size:14px;
     }
     
    .widget h4, h5{
    margin:0;
    padding:0;
    }
    
    #footer{
    width:100%;
    height:30px;
    color:#fff;
    background-color: #4c4c33;
    border-top: 2px solid #000;
    
    }
    /*  ************* navigation **************** */
    nav {
    margin:0 0 0 -50px;
    text-transform:uppercase;
    }
    nav ul {list-style: none;}
    
    nav ul li a{
    display: block;
    padding: 10px 10px 10px 20px;
    color: #fff;
    font-size:16px;
    text-decoration:none;
    background-color:#ccc;
    margin: 0 0 5px 0 ;
    line-height:25px;
    position:relative;
    border-top: 2px solid #666600;
    border-bottom: 2px solid #666600;
    }
    
    nav ul li a span{
    position: absolute;
    right: 100%;
    top: 10px;
    width:50px;
    height: 100%;
    background-color:#ddd;
    border-top: 2px solid #666600;
    border-bottom: 2px solid #666600;
    border-left:2px solid #666600;
    background-image:url(./images/shadowPng.png);
    background-position:top right;
    background-repeat: repeat-y;
    }
    
    nav ul li a span::before{
    position: absolute;
    right: 100%;
    top: 10px;
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #fff;
    }
    nav ul li:nth-child(2) a, nav ul li:nth-child(2) a span {background-color:#520000;}
    nav ul li:nth-child(3) a, nav ul li:nth-child(3) a span {background-color:#661400;}
    nav ul li:nth-child(4) a, nav ul li:nth-child(4) a span {background-color:#000;}
    nav ul li:nth-child(5) a, nav ul li:nth-child(5) a span {background-color:#333;}
    /*  ************* text **************** */
    h3{
    display:inline-block;
    width:175px;
    margin:0 20px 0px 0px;
    border-right: solid 2px #000;
    color:#fff;
    }
    wpDiff01.jpg

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Can you link us to the page with the problem? Otherwise, the issue is hard to understand. We need to look at the HTML along with the CSS.

  3. #3
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    634
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    ha nope. sorry. it is on sandbox and localized on my laptop now.

  4. #4
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    634
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    so i have managed to solve some of the probs. but was wondering if wp only recognizes one nav tag
    I tried
    #sidebar02. nav ul
    &
    #nav02
    to change the style on the second menu, but it keeps only applying the style in the main nav tag.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by pdxSherpa View Post
    #sidebar02. nav ul
    There's a . in there that kills that rule. All normall CSS works in WP.

  6. #6
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    634
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    thank you! also...(massive face palm) i had id it as #sideBar02...note to self. all else fails double check the spelling. D'ho!
    There is still some stuff that is throwing me off. I colored my header text white. but it is coming lavander/purple...did an inspect element and got this:
    a:-webkit-any-link {
    color: -webkit-link;
    text-decoration: underline;
    cursor: auto;
    }
    but where do I find this it is not part of my code?! it is not it the style.css how do I take it out?

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by pdxSherpa View Post
    I colored my header text white. but it is coming lavander/purple...
    Those styles are the browser default styles, meaning you haven't styled that element. We need to see your HTML to know what's happening, but presumably you have something like a heading element colored white but a link inside that, so you have to style the link itself.

  8. #8
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    634
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    oh no...i did style it. the webkit has over ridden it.

    I have for it
    Code:
    #header{
    width:100%;
    height:200px;
    float:left;
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
    background-color:#000;
    text-transform:uppercase;
    }
    
    #header h1{
    display:block;
    margin:0px 0px 0px 650px;
    padding:0px 0px 0px 10px;
    color:#fff;
    border-left: 3px solid #731700;
    width:300px;
    line-height:200px;
    }
    it works fine in my workup php/html/css page but wp has something over writing it.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by pdxSherpa View Post
    it works fine in my workup php/html/css page but wp has something over writing it.
    Well, only you can answer that, as we can't see it. But Firebug of other browser dev tools will tell you what is applying. You didn't answer my question about the HTML, so there's nothing more we can do to help. It looks like there's a link in there that needs to be styled too. Either way, if there is a more specific style being applied by WP, you just have to override it with something more specific.

  10. #10
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    634
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I appreciate that and thank you for taking the time to offer some advice.
    I am sure i'll put it live soon enough so I can see how it works.
    But very good point about the link. I didn't create the header as a link element in my original work up. so need to find where wp is applying those settings.
    thx
    d

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by pdxSherpa View Post
    I didn't create the header as a link element in my original work up. so need to find where wp is applying those settings.
    It may not be. I'm just guessing. View the page's source code in the browser and paste the header code here so we can at least see what you are working with.

  12. #12
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    634
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    All right! good point...had not tought that would be enough but here we go.wpDiff02.jpg

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    OK, so you need to style the link explicitly:

    Code:
    h1 a {
      color: #fff; text-decoration: none;
    }

  14. #14
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    634
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    thank you! You were right!
    that did it.
    one more question, why am i seeing duplicates?
    at the very top of the inspect element text in the image you can see two <head> tags but my code doesn't have two.

  15. #15
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by pdxSherpa View Post
    at the very top of the inspect element text in the image you can see two <head> tags but my code doesn't have two.
    I suspect if you look at the generated code (view > source) you'll find that you do have two heads, so one of them needs to be cut off.

    A WP page is made up of various parts (header.php etc.) so the <head> element has been duplicated in there somewhere.


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
  •