SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    64
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Basic check of a html file and css style sheet from a book ...please

    Hi
    I'm just following book and finding a few basic mistake so far.

    The author has just explained the differences between a Class Selector and an ID Selector. However, I'm not convinced that the <div id="footer">This is the footer area</div should really say <div class="footer">This is the footer area</div>

    So far, I can actually see that there is not class "current" set within the .css file so thats good as far as I can see.

    However, its mainly the div called "footer" that I would like someone to check over please.

    Can someone check this for me before I get too involved to find that I get problems please.

    This is the html file:-
    <!DOCTYPE html>

    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title></title>
    <link href="/StyleSheet.css" rel="Stylesheet" type="text/css" />
    </head>
    <body>
    <div id="header">This is the head content</div>
    <div id="maincontent">
    <div id="nav">
    <a href="home.cshtml" class="current">Home</a> |
    <a href="about.cshtml">About</a> |
    <a href="contact.cshtml">Contact</a>
    </div>
    <div id="content">This is where the rest of the page content goes</div>
    </div>
    <div id="footer">This is the footer area</div>
    </body>
    </html>

    And this is the .css file :-

    body {
    margin: 0;
    padding:0;
    font-family: Arial;
    font-size: 80%;
    }
    #maincontent, #header, .footer {
    width: 60%;
    }
    #header {
    height: 80px;
    border-bottom: 2px solid blue;
    font-size: 200%;
    font-weight: bold;
    }
    #nav a {
    color: red;
    text-decoration: none;
    }

    #nav a.current {
    color: blue;
    }
    #content {
    background-color: #c0c0c0;
    }
    .footer {
    font-size: 90%;
    font-style: italic;
    color: #555555;
    }

    I'm not even sure why the footer div element needed to be a . class element if anyone can give some basic pointer please.

    Kind Regards
    Matt

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    461 Post(s)
    Tagged
    8 Thread(s)
    Not exacty sure what the questions is here, but indeed, if you have id="footer" in the HTML, then you need footer { } in the CSS.

    The other complaint I'd have about that code is that for the menu, it would be better to have this:

    Code:
    <ul id="nav">
      <li><a href="home.cshtml" class="current">Home</a></li>
      <li><a href="about.cshtml">About</a></li> 
      <li><a href="contact.cshtml">Contact</a></li>
    </ul>
    and in the CSS

    Code:
    #nav {
      list-style: none;
      overflow: hidden;
    }
    
    #nav li {
      float: left;
    }
    There's more to the nav styling than that, but that's the basic idea.

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    64
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ralph. I agree that the navigation section would be better showing as a unordered list.

    I'll have to take another look at this though as I'm not sure what this does:-
    list-style: none;
    overflow: hidden;

    Regarding the footer, can you say why it starts with a . full stop in the style sheet. All the styles start with a hash sign.

    I'm still learning and the book is just showing the basics at the moment.

    Much appreciated if you can mentor me through this section of the book.

    Kind Regards
    Matt

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    461 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by jmatty2000 View Post
    I'll have to take another look at this though as I'm not sure what this does:-
    list-style: none;
    overflow: hidden;
    List-style: none removes the default bullet points from the UL
    overflow: hidden is not essential, but it's there to make the UL wrap around the floated LIs. It's needed if you have a background color on the UL, for example.

    Regarding the footer, can you say why it starts with a . full stop in the style sheet.
    It's a mistake, pure and simple.

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    64
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Oh, I love it!!
    So if I replace .footer with #footer
    then this would be ok.

    Also in the .html file, could alternative fix be to declare the div like this:-
    <div class="footer">

    Cheers
    Matt

  6. #6
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,888
    Mentioned
    74 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by jmatty2000 View Post
    Oh, I love it!!
    So if I replace .footer with #footer
    then this would be ok.

    Also in the .html file, could alternative fix be to declare the div like this:-
    <div class="footer">

    Cheers
    Matt
    The difference to note is that class can be used more than once whereas the id can only be used once.

    When developing maybe try these two validation links and use them frequently.

    http://validator.w3.org/

    http://jigsaw.w3.org/css-validator/
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Wolfshade on earning Member of the Month for August 2014

  7. #7
    SitePoint Member
    Join Date
    Jan 2013
    Location
    NewYork
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jmatty2000 View Post
    Oh, I love it!!
    So if I replace .footer with #footer
    then this would be ok.

    Also in the .html file, could alternative fix be to declare the div like this:-
    <div class="footer">


    Cheers
    Matt
    Yes you can have any of the alternative. For classes styling you use dot(.) and forl Ids you use hash (#). If you have still confusion then here are some references for making the concept even clearer:
    http://www.w3schools.com/css/css_id_class.asp
    http://css-tricks.com/the-difference...-id-and-class/

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    461 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by jmatty2000 View Post
    So if I replace .footer with #footer
    then this would be ok.
    Yep.

    Also in the .html file, could alternative fix be to declare the div like this:-
    <div class="footer">
    Yes, definitely. Indeed, that's the way I do it. Since you only need the footer once on the page, and John noted, it's fine to use an ID, but these days I prefer classes, reserving IDs as hooks for JavaScript. Classes are a little easier to work with, I find, as they are a bit easier to override, if necessary.

  9. #9
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    64
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    wow!!!! so much resources to look at!!! Thanks guys - I going to go away and cry now!!! I'm very grateful - thanks - I will use css classes a lot more now to get going with css more also

  10. #10
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    64
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks to Arthur also who provided :-
    http://css-tricks.com/the-difference...-id-and-class/
    ----
    Does anyone know of any basic html/css validators which can check the code without it being online?

    Cheers
    Matt

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    461 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by jmatty2000 View Post
    Does anyone know of any basic html/css validators which can check the code without it being online?
    You can paste your HTML and CSS into the w3c validators.

  12. #12
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,888
    Mentioned
    74 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by jmatty2000 View Post
    Thanks to Arthur also who provided :-
    http://css-tricks.com/the-difference...-id-and-class/
    ----
    Does anyone know of any basic html/css validators which can check the code without it being online?

    Cheers
    Matt
    Try the FireFox Addon: "Html Validator 0.9.5.1"
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Wolfshade on earning Member of the Month for August 2014

  13. #13
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    64
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks John - now I'm starting to see the advantages that some browsers have over other ones. I'm learning at such a rapid rapid rate now - I'll keep referring back to these threads forever I think.

    Now back to this html code for a moment if thats ok.... so ignoring the css style sheet for 1 second, within the html code would it be better to mostly replace all the div id= with div class=

    Surely using class selectors is better... I can also add more classes to div at a later date if I need to. e.g.
    <div class="fontstyle headerfontstyle fontsize headerfontsize">

    Can I also do this?>>
    <div id="header" class="fontstyle headerfontstyle fontsize headerfontsize">

    Oh I'm getting in a bit of jam now!!! which div statement is better practice to use, that is in bold above?

    This is the original code from the book I am using:-

    <!DOCTYPE html>

    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title></title>
    <link href="/StyleSheet.css" rel="Stylesheet" type="text/css" />
    </head>
    <body>
    <div id="header">This is the head content</div>
    <div id="maincontent">
    <div id="nav">
    <a href="home.cshtml" class="current">Home</a> |
    <a href="about.cshtml">About</a> |
    <a href="contact.cshtml">Contact</a>
    </div>
    <div id="content">This is where the rest of the page content goes</div>
    </div>
    <div id="footer">This is the footer area</div>
    </body>
    </html>

  14. #14
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,868
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    You can download the HTML Validator program (from which the addon is based) from http://www.htmlvalidator.com/

    It not only can validate all your HTML and CSS but it is also a quite reasonable editor as well.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  15. #15
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    461 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by jmatty2000 View Post
    Can I also do this?
    <div id="header" class="fontstyle headerfontstyle fontsize headerfontsize">
    Yes, though you will rarely—if ever—need so many classes on an element.

  16. #16
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    64
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi Ralph

    Apparently it may be more efficient and more organised to state lots of classes in an element, as well a reducing the size of .css files.

    Check this out :-
    http://www.sitepoint.com/forums/showthread.php?1015787-Organising-css-so-its-easily-readable-and-using-the-import-comman-to-help&p=5375151&viewfull=1#post5375151

    I'm easily confused!!! lol

  17. #17
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    461 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by jmatty2000 View Post
    Apparently it may be more efficient and more organised to state lots of classes in an element
    Not without reason, though. It's rare that I need more than one, so don't assume you'll need lots. It's only in rare cases where you have, say, a series of boxes that are mostly the same but there are slight differences to each. The diferences can be handled by a separate class.

  18. #18
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    64
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Cheers Ralph. I see where your coming from now.
    Just out of curiosity, which html editor do you use?
    Cheers
    Matt

  19. #19
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    461 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by jmatty2000 View Post
    which html editor do you use?
    Currently, I use Coda, which is Mac-only. I used to use Dreamweaver, but got sick of it and switched to Coda and Sublime Text 2, but kind of prefer Coda, although Sublime is better in a lot of ways.

  20. #20
    SitePoint Member
    Join Date
    Jan 2013
    Location
    NewYork
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jmatty2000 View Post
    Thanks to Arthur also who provided :-
    http://css-tricks.com/the-difference...-id-and-class/
    ----
    Does anyone know of any basic html/css validators which can check the code without it being online?

    Cheers
    Matt
    Glad to help


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
  •