SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    ids and classes not working!

    I have set some ids and classes to various stuff. I just started on the footer and nothing i try works, same w/ the logo. When i apply stuff in my style sheet noting happens. I have looked over my CSS and HTMl files for any mistakes and have none. Any idea why it isn't working?

    HTML

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "html://www.w3.org/TR/xhtm1/DTD/xhtml-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <title>plumbing - GreenPlumbing</title>
        <meta http-equiv="Content-Type"
             content="text/html; charset=utf-8"/>
        <link href="gpstyle.css" rel="stylesheet" type="text/css"/>
      </head>
      <body>
    <div id="wrapper">
       <div id="header">
    <img src="images/gplogo.png" class="logo"
      width="540" height="80"
         alt="BeGreenPlumbing logo"/>         
         <div id="tagline">
      Maximum Quality<br/>Minimum Waste<br/>Reasonable Price
         </div> <!-- end of tagline div -->
      </div> <!-- end of header div -->
    <div id="navmenu">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About Us</a></li>
        <li><a href="contact.html">Contact Us</a></li>
        <li><a href="testimonies.html">Testimonies</a></li>
        <li><a href="helpfulinfo.html">Helpful Info</a></li>
    </div> <!-- end of navmenu div --> 
    <div id="bodycontent">
        <h2>Home</h2>
    <div id="main">
       <p><h4>Plumbing Services You Can Count On Every Time!</h4></p>
    
    
        <p>We are a small business that strives to give superb service. We have flat rates on many of our services. We have plumbers with many years in the business. Our rates are very competitive with our competition.</p>
        <p>Whether you have a clogged drain, need a hot water heater or a complete remodeling project, Green Plumbing has got it covered.</p>
        <p>Fair Pricing-Quality Work-Beautiful Results</p>
        <p> We hope that with that first call you will never call another plumber again.</p>
    </div> <!-- end of main div -->
    <div id="widget">
       <p><h3>What You Can Expect From Green Plumbing</h3></p>
    <p><h4>100% SATISFACTION GUARANTEE</h4></p>
    <p>You'll never be disappointed with our Service.</p>
    <p>We guarantee you'll be pleased, no matter what it takes.</p>
     <p><h4>Prices Quoted In Advance</h4></p>
    <p>We'll give you the price, guarantee the price, and guarantee the work.</p>
    <p>That way there are no surprises. Thatís the way we do business.</p>
     <p><h4>PROFESSIONAL SERVICE</h4></p>
    You deserve the comfort and peace of mind that comes with having a professionally maintained system. We use only the finest quality products and the most skilled technicians. When you call Green Plumbing, you can be confident that you will have the most professional people in the plumbing service industry today.</p>
    </div> <!-- end of widget div -->
        </div> <!-- end of bodycontent div -->
    <div id="footer">
    <p>A good name is rather to be<br/>chosen than great riches. - Proverbs 22:1</p>
    <!-- end of footer div --> 
    </div> <!-- end of wrapper div -->
      </body>
    </html>

    CSS
    Code CSS:
    /*
    CSS
    */
     
    body {
      background: url(images/linebg.png);
    }
     
    #bodycontent {
      margin: auto;
      width: 949px;
      position: relative;
      top: 50px;
      background: #fff;
      border-radius: 7px;
      box-shadow: 0px 3px 5px #999;
    }
     
    #wrapper {
      margin: 0 auto;
      width: 949px;
    }
     
    p {
      color: #000;
      font-family: Big Caslon, Times, Georgia;
    }
     
    h2 {
      font-family: Big Caslon, Times, Georgia;
      padding: 20px 20px 0px 20px;
    }
     
    h3 {
      color: #245b7d;
    }
     
    h4 {
      color: #154D43;
    }
     
    /////////////////* MENU */
     
    #navmenu {
        margin: auto;
    }
     
    #navmenu ul {
        background: url(images/nav1.png) no-repeat;
        overflow: hidden;
        float: left;
        width: 949px;
        position: relative;
        top: px;
    }
     
    #navmenu li {
        float: left;
        list-style-type: none;
        padding: 0px px 0px px;
    }
     
    #navmenu li a {
        color: #fff;
        text-shadow: #000 -1px 0px;
        display: block;
        padding: 10px 11px 10px 11px;
        position: relative;
        text-decoration: none;
        font-size: 18px;
        position: relative;
        right: 40px;
        border-right: 1px solid #245b7d;
        height: 20px;
    }
     
    #navmenu li a:hover {
    	background: url(images/nav2.png) no-repeat;
    	text-decoration: none;
    }
     
    #navmenu li,#navmenu li a {
    border-radius: 7px 0 0 7px;
    }
     
    #navmenu li + li, #navmenu li +li a {
      border-radius: 0; 
    }
     
    #navmenu li a:active {
      background: url(images/nav3.png) no-repeat;
    }
     
    ////////////////* ADJUSTMENTS - TAGLINE - WIDGET - MAIN */
     
    .logo {
      position: absolute;
      right: 300px;
      top: 300px;
      border: 2px solid #fff;
    }
     
    #tagline {
      position: absolute;
      right: 210px;
      top: 23px;
      font-family: Optima;
      font-size: 19px;
    }
     
    #widget {
      position: absolute:
      right: 700px;
      width: 200px;
      padding: 0px 10px 0px 10px;
      border: 2px solid #C4C4C4;
      border-radius: 4px;
      margin: -339px 707px 200px;
      background: #F7F7F7 url(images/wh.png);
    }
     
    #main {
      padding: 2px 0px 0px 20px;
      width: 650px;
      order: 1px solid red;
    }
     
    ////////////////* FOOTER */
     
    #footer {
      background: #C9C9C9;
      border-radius: 7px;
      box-shadow: 0px 3px 5px #999;
      padding: 50px;
      border: 1px solid red;
    }
    Last edited by TechnoBear; Apr 16, 2012 at 13:10. Reason: Code tags added

  2. #2
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,163
    Mentioned
    264 Post(s)
    Tagged
    5 Thread(s)
    I can't see anything immediately wrong to cause that problem, but I do know I've suffered from the same problem myself, more than once, and every time it's been because I've made a daft typo with the stylesheet name or file path. Are you quite sure your stylesheet is called gpstyle.css and that it's in the same directory as your HTML file?

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes i'm positive. Its only those two things, the footer and logo. Everything else is operating properly.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,585
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    From what you say, it sounds like it could be a HTML or CSS validation problem.

    However, I copy your code into my editor and don't really notice anything out of the ordinary. Can you give a specific example of styles not being applied? I'd run your code through the validators. It's likely you just have some small mistake in there tripping you up.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,585
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    For example, I just went over these selectors
    Code:
    #widget {
    position: absolute:
    right: 700px;
    width: 200px;
    padding: 0px 10px 0px 10px;
    border: 2px solid #C4C4C4;
    border-radius: 4px;
    margin: -339px 707px 200px;
    background: #F7F7F7 url(images/wh.png);
    }
    
    #main {
    padding: 2px 0px 0px 20px;
    width: 650px;
    order: 1px solid red;
    }
    
    
    
    
    
    
    ////////////////* FOOTER */
    For one thing, the fotoer comment is invalid. You can't have it like that. Must start as /* and end as */
    2) order:? You're missing the b in border.
    3) Position:absolute:. You're ending that statement with a colon instead of a semi colon.

    That's just one segment of code. You have more throughout, without a doubt.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No matter what style (of any kind really) will work if applied to .logo or #footer

  7. #7
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm only concerned w/ the footer and logo. I left the b out so i could put it back in real easy if i needed for now. Same w/ absolute.

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,585
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Have you tried my validation comment?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by nlsilverberg View Post
    No matter what style (of any kind really) will work if applied to .logo or #footer
    Ryan already gave you the answer

    You don't have html elements called

    ////////////////#footer {}

    or

    //////////////// .logo {}


    because that's effectively what you have done here:

    Code:
     ////////////////* ADJUSTMENTS - TAGLINE - WIDGET - MAIN */
     .logo {
     position: absolute;
     right: 300px;
     top: 300px;
     border: 2px solid #fff;
    }
    Remove the slashes and the rules will apply.

    e.g.
    Code:
    /* ADJUSTMENTS - TAGLINE - WIDGET - MAIN */
     .logo {
     position: absolute;
     right: 300px;
     top: 300px;
     border: 2px solid #fff;
    }

    Also you haven't closed the ul and you are missing the closing div from the wrapper.

  10. #10
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, just did and its working now :/ thanks

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,585
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by nlsilverberg View Post
    Oh, just did and its working now :/ thanks
    Validation should be the very first step in debugging. Know that for future cases . It will avoid situations like these ;-).
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  12. #12
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alright will do, thanks again


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
  •