Page 1 of 2 12 Last
  • Jump to page:
    #1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Posts
    5
    Rep Power
    0

    Beginner Question


    I am a true newbie to CSS, and having difficulty getting a simple header to work. Can someone please tell me why I'm not seeing my header "Test Header for New Site" come out with the following? I'm just getting a thin line. I want H1 letters to be white on a dark background - (header class). I need to use a title div - I'm adding other items conditionally, but have removed them for simplicity)

    Code:
    <!DOCTYPE html>
    <html> 
    <head> 
    <style type="text/css"> 
    .page { width: 100%; 
               margin-left: auto; 
               margin-right:auto; 
               background-color: #FFFFFF; } 
    header, #header { 
               border-width:thin; 
               border-style: solid; 
               position:relative; 
               margin-bottom: 0px; 
               color: #000; 
               padding: 0; 
               background-color: #333333; } 
    header h1, #header h1 { 
              font-weight: bold; 
              margin: 0; 
              color: #FFFFFF; 
              border: none; 
              line-height: 1.6em; 
              font-size: 24px !important; 
              font-family: sans-serif; 
              padding-left: 10px; }
    
    div#title { 
              display: block; 
              float: left; 
              text-align: left; } 
    </style> 
    </head> 
    <body> 
    <div class="page"> 
    <div id="header"> 
    <div id="title"> 
    <h1>Test Header for New Site</h1> 
    </div> 
    </div> 
    </div> 
    </body> 
    </html>
    Last edited by tweaver60; September 4th, 2012 at 01:06 PM. Reason: typo
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    119
    Rep Power
    32
    I have re-done your css for you which I hope will help (the css for the title div are what was causing the problems but hopefully you can add them back in a bit at a time to see if they are needed and when they break the layout):
    Code:
    <style type="text/css"> 
    .page { width: 100%; 
               margin-left: auto; 
               margin-right:auto; 
               background-color: #FFFFFF; } 
    #header { 
               border: thin solid #333;
               margin-bottom: 0px; 
               color: #000; 
               background-color: #333333; } 
    #header h1 { 
              font: bold 24px/1.6em sans-serif;
              color: #FFFFFF; 
              line-height: 1.6em; 
              padding-left: 10px; }
    
    </style>
    Can I also recommend having all your styles in an external stylesheet rather than in your actual files / pages.
  4. #3
  5. JavaScript is not spelt java
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2011
    Location
    Landan, England
    Posts
    743
    Rep Power
    165
    Firstly you heed to remove the <html> tag underneath your <!DOCTYPE html> as it is not required.
    strange statement, as it is required, as is a title.
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Posts
    5
    Rep Power
    0
    Thanks for the reply - I'll check it out!
  8. #5
  9. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    119
    Rep Power
    32
    Originally Posted by AndrewSW
    strange statement, as it is required, as is a title.
    No it is not a strange statement if you look at the code in the post - <!doctype html> is required with (obviously) a closing </html> tag but
    Code:
    <!doctype html>
    <html>
    Is certainly not required
  10. #6
  11. JavaScript is not spelt java
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2011
    Location
    Landan, England
    Posts
    743
    Rep Power
    165
    Code:
    <!DOCTYPE html>
    is the doctype declaration for an HTML5 document. The document itself still requires opening and closing html tags.
  12. #7
  13. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    119
    Rep Power
    32
    Originally Posted by AndrewSW
    Code:
    <!DOCTYPE html>
    is the doctype declaration for an HTML5 document. The document itself still requires opening and closing html tags.
    I know what it is and
    Code:
    <!doctype html>
    is the opening HTML tag so it doesn't need another one.
  14. #8
  15. JavaScript is not spelt java
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2011
    Location
    Landan, England
    Posts
    743
    Rep Power
    165
    w3
  16. #9
  17. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4304
    Originally Posted by simplypixie
    I know what it is and
    Code:
    <!doctype html>
    is the opening HTML tag so it doesn't need another one.
    No, it is not. A doctype is not an element start tag for any element. It's a declaration whose sole purpose (these days) is to trigger the most standards compliant rendering mode in web browsers.

    I should add though that the start and end tags of the <html> element are, under certain conditions, optional. However, it's very unusual to omit them.
    Last edited by Kravvitz; September 4th, 2012 at 06:27 PM.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  18. #10
  19. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    119
    Rep Power
    32
    Sorry AndrewSW I don't know where my head was at yesterday and I take it all back, I think it was because it was just <html> whereas for all my years developing I have used in with the lang element and for some reason just saw it as wrong.
  20. #11
  21. JavaScript is not spelt java
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2011
    Location
    Landan, England
    Posts
    743
    Rep Power
    165
    Originally Posted by simplypixie
    Sorry AndrewSW I don't know where my head was at yesterday and I take it all back, I think it was because it was just <html> whereas for all my years developing I have used in with the lang element and for some reason just saw it as wrong.
    That's okay.
    Out of curiosity I ran it through the validator and it was accepted without the opening tag - which made me think I was losing my mind
  22. #12
  23. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    119
    Rep Power
    32
    Yes it will - and I looked at some of my sites and one of them is missing the <html> opening tag but works fine
  24. #13
  25. JavaScript is not spelt java
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2011
    Location
    Landan, England
    Posts
    743
    Rep Power
    165
    Originally Posted by simplypixie
    Yes it will - and I looked at some of my sites and one of them is missing the <html> opening tag but works fine
    The link provided by Kravvitz confirms that, under certain circumstances, the begin or end html-end tag can be optional, which is why the validator approved it. It should, at least, have created a warning IMO.
  26. #14
  27. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    119
    Rep Power
    32
    I agree!
  28. #15
  29. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Posts
    5
    Rep Power
    0
    Originally Posted by simplypixie
    I have re-done your css for you which I hope will help (the css for the title div are what was causing the problems
    The title is the part I really need to work - I know when I remove the <div id="title">, the <h1> shows fine - but I need a title <div> area - I add other things in conditionally in the title area. When I add them in, it works fine, but when only the <h1> is present, the <h1> tag does not show.
Page 1 of 2 12 Last
  • Jump to page:

IMN logo majestic logo threadwatch logo seochat tools logo