css layouts with background colour

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • quartzy
    New Member
    • Dec 2007
    • 18
    #1

    css layouts with background colour

    I am trying to set up an elastic layout with a background colour, then the body centred. But it is not working in the browsers. Here is the HTML and CSS, it looks OK to me but I must be doing something wrong.

    CSS[code=css]
    #container {
    position: relative;
    width: 40em;
    background-color: #E60073;
    margin-left: auto;
    margin-right: auto;

    }
    #header {
    height: 8em;
    padding: 1em;
    background: #FFFFFF
    }

    #main {
    margin-left: 12em;
    background: #FFFFFF;
    }

    body {
    font-family: Verdana, sans-serif;
    margin: 0;
    padding: 0;
    }
    #nav { font-size: 1em;
    text-decoration: none;
    color: #6600CC;
    font-weight: strong; }

    h1 { color: #E60073;
    font-size: 2em;
    }
    h2 { color: #000000;
    font-size: 1.5em;
    }
    h3 { color: #6600CC;
    font-style: italic;
    font-size: 1em;
    }
    #footer {
    float: center;
    border-top: thin;
    border-color: #E60073;
    font-size: .5em;
    }
    [/code][html]
    </head>

    <body>

    </body>

    </html>
    and the HTML
    <html>

    <head>
    <meta http-equiv="Content-Language" content="en-gb">
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>New Page 1</title>
    <link rel="stylesheet " type="text/css" href="new_page_ 1.css">


    </head>
    <div.id="contai ner"><class="id container">
    <body>
    <div.id="header ">
    <img border="0" src="images/networkartslogo .gif" width="750" height="110">
    </body>
    </html>[/html]

    can anyone tell me why this does not work?
    Last edited by drhowarddrfine; Dec 21 '07, 10:25 PM. Reason: Please use code tags
    Tags: None
    • Death Slaught
      Top Contributor
      • Aug 2007
      • 1137
      #2
      You have a div outside of your body element, that's not valid, and can't be used that way. You have your class attribute in its own tag....class is an attribute not an element. Also you have a period inbetween your 'div', and your 'id', that is also not valid. Furthermore you have a head, body, and html tags after your CSS. In external stylesheets you do not include tags.

      Try changing your code to this and see if it's what you want.

      HTML

      [HTML] <html>

      <head>
      <meta http-equiv="Content-Language" content="en-gb">
      <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
      <title>New Page 1</title>
      <link rel="stylesheet " type="text/css" href="new_page_ 1.css">
      </head>

      <body>
      <div id="container" >

      <div id="header">
      <img src="images/networkartslogo .gif" alt="Logo" />
      </div>

      </div>
      </body>

      </html>
      [/HTML]


      CSS (remember no tags just pure CSS)

      Code:
       
body {
  font-family: Verdana, sans-serif;
  margin: 0;
  padding: 0;
}
 
#container {
  position: relative;
  width: 40em;
  background-color: #E60073;
  margin-left: auto;
  margin-right: auto;
}
 
#header {
  height: 8em;
  padding: 1em;
  background: #FFFFFF
}
 
img {
  border:0;
  width:750px;
  height:110px;
}
      I only included the CSS for the HTML you provided for us. If you have any questions feal free to ask.

      Hope it helps, Thanks, Death

        Comment

        • quartzy
          New Member
          • Dec 2007
          • 18
          #3
          Hi
          thanks for letting me know where I was going wrong, it works fine now.

            Comment

            • quartzy
              New Member
              • Dec 2007
              • 18
              #4
              Hi
              Back again, everything works OK except that the header image is not centred when the full width browser is used, so that is not want I want.

              CSS shows this: [code=css]
              body {
              font-family: Verdana, sans-serif;
              margin: 0;
              padding: 0;
              }
              #container {
              position: relative;
              width: 100em;
              background-color: #E60073;
              margin-left: auto;
              margin-right: auto;
              }
              #header {
              height: 8em;
              padding: 1em;
              }
              img {
              border:0;
              width:750px;
              height:110px;
              margin-left: auto;
              margin-right: auto;

              }

              #main {
              margin-left: 12em;
              }
              [/code][html]
              html
              <html>
              <head>
              <meta http-equiv="Content-Language" content="en-gb">
              <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
              <title>New Page 1</title>
              <link rel="stylesheet " type="text/css" href="new_page_ 1.css">
              </head>
              <body>
              <div id="container" >
              <div id="header">
              <img src="images/networkartslogo .gif" alt="Logo" /></div>
              </body>
              </html>[/html]
              Last edited by drhowarddrfine; Dec 21 '07, 10:26 PM. Reason: Please use code tags

                Comment

                • quartzy
                  New Member
                  • Dec 2007
                  • 18
                  #5
                  amended HTML
                  [html]
                  <html>
                  <head>
                  <meta http-equiv="Content-Language" content="en-gb">
                  <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
                  <title>New Page 1</title>
                  <link rel="stylesheet " type="text/css" href="new_page_ 1.css">
                  </head><div id="container" >
                  <div id="header">

                  <body>
                  <img src="images/networkartslogo .gif" alt="Logo" /></div>
                  </body>
                  </html>[/html]
                  Last edited by drhowarddrfine; Dec 21 '07, 10:27 PM. Reason: Please use code tags

                    Comment

                    • Death Slaught
                      Top Contributor
                      • Aug 2007
                      • 1137
                      #6
                      As I said before the div element/tag cannot be placed outside of the body tags.

                      Try adding this line of code to your CSS.

                      Code:
                       text-align:center;
                      Hope it helps, Thanks, Death

                        Comment

                        • quartzy
                          New Member
                          • Dec 2007
                          • 18
                          #7
                          yes, I tried that but it does not work. People seem to get layouts that are centred across the browser but I cannot figure out how it is done. I have followed a book and still it is wrong.

                            Comment

                            • Death Slaught
                              Top Contributor
                              • Aug 2007
                              • 1137
                              #8
                              Where all have your tried adding that line of code?

                              - Death

                                Comment

                                • quartzy
                                  New Member
                                  • Dec 2007
                                  • 18
                                  #9
                                  Originally posted by Death Slaught
                                  Where all have your tried adding that line of code?

                                  - Death
                                  I added the code to the image tag in the CSS

                                    Comment

                                    • Death Slaught
                                      Top Contributor
                                      • Aug 2007
                                      • 1137
                                      #10
                                      Originally posted by quartzy
                                      I added the code to the image tag in the CSS
                                      Try adding it your #header instead.

                                      Thanks, Death

                                        Comment

                                        • quartzy
                                          New Member
                                          • Dec 2007
                                          • 18
                                          #11
                                          hi
                                          yes it all works good now, thanks very much for your help death

                                            Comment

                                            • Death Slaught
                                              Top Contributor
                                              • Aug 2007
                                              • 1137
                                              #12
                                              No problem it's what i'm here for.


                                              - Death

                                                Comment

                                                Previous template Next
                                                Working...