6 Replies Latest reply on Feb 14, 2010 9:13 AM by Zabeth69

    Trouble with header size....

    thesham01

      Hey,

       

      I am having trouble getting rid of a gap at the top of my header/banner

       

      The attached picture shows what i am talking about: if you look above the photo on the left, you will see a black gap that i cannot get rid of.   I want the picture to go all the way to the top of the page

       

      How do i do this?

       

      sorry for the simple question, but i just can't work it out

        • 1. Re: Trouble with header size....
          thesham01 Level 1

          p.s

           

          it has nothing to do with the image i have inserted, i have tried any number of variations, but that gap is always there.

          • 2. Re: Trouble with header size....
            Zabeth69 Level 5

            If you have uploaded this page to a server, please give us the URL so we can check out your code.

             

            Although the jpeg is reasonably informative, the answer will lie in the code.

             

            Beth

            • 3. Re: Trouble with header size....
              thesham01 Level 1

              hey,

               

              ok i have uploaded the unfinished site (www.ken-buchanan.com), and will keep it up until someone has a look at the code.

               

              Thing is I know it has to be something simple and obvious, but i have no knowledge of html code, or making websites.

               

              thanks a million

              • 4. Re: Trouble with header size....
                Zabeth69 Level 5

                You have h2 tags (head text size 2) around the image at the top of the page.

                   <h2><img src="logo%20black.jpg" alt="ken logo" width="1000" height="200">
                      <!-- end #header -->
                </h2>

                They are adding an extra 18px drop above the image. Header tags are block tags, which means (partly) that they come with extra space (margin) above and below). Taking the h2 tags off moves the image back up. Then you can go to the css and make the header div 200px tall (the height of the photo) instead of 218px, and the whole thing will tighten up.

                .twoColLiqLtHdr #header {
                    font-family: "MS Serif", "New York", serif;
                    background-color: #000;
                    background-position: 0px;
                    height: 200px;
                    position: relative;
                    padding-top: 0px;
                    padding-right: 0px;
                    padding-bottom: 0px;
                    padding-left: 0px;
                    margin-top: 0px;
                    margin-right: 0px;
                    margin-bottom: 0px;
                    margin-left: 0px;
                    border: medium double #300;
                }

                Beth

                • 5. Re: Trouble with header size....
                  thesham01 Level 1

                  woman, your a genius

                   

                  thank you very, very much

                   

                  I knew it had to be something simple, and i was missing it

                  • 6. Re: Trouble with header size....
                    Zabeth69 Level 5

                    Here's a phrase I use: "I've been lost there before..."

                     

                    Glad to help out!

                     

                    Beth

                    1 person found this helpful