3 Replies Latest reply on May 11, 2010 2:35 AM by michhanlon

    Why does the nav bar move in a browser??

    michhanlon

      Please help!  In dreamweaver the nav bar looks perfect and is over the top of the blue line under the picture header but when I put it in a browser, it moves as you can see from my link!!

      test site

       

      Please can anyone tell me why??  I have a feeling it will be a CSS positioning thing but I am very very new to this so do not know how to rectify!

       

      Thanks if you can help!

        • 1. Re: Why does the nav bar move in a browser??
          John Waller Adobe Community Professional & MVP

          Since you're using <p> tags to create whitespace in the header (better to use CSS with an absolutely positioned div inside a relatively positioned div), remove the height attribute from this rule

           

          .twoColElsLtHdr #header {
          background-color: #FFF;
          background-image: url(images/header2.jpg);
          background-repeat: no-repeat;
          background-position: center;
          font-size: 12px;
          padding-top: 5;
          padding-right: 5;
          padding-bottom: 5;
          padding-left: 5;
          height: 205px;
          }

          1 person found this helpful
          • 2. Re: Why does the nav bar move in a browser??
            osgood_ Level 8

            Look this is not a good solution, it just hacks around the issue.

             

            Add this to the css style:
            #header p {
            padding: 60px 0 0 0;
            margin: 0;
            }

             

             

            Then you need to go into code view and change these code lines:

             

             

            <div id="container">
              <div id="header"><br >
                <p align="right"><br >Complete Energy Certificates Ltd </p>
                <p align="right">&nbsp;<br><br >
                </p>
                <div align="center">

            To this:

             

            <div id="container">
              <div id="header">
            <p align="right">Complete Energy Certificates Ltd </p>
                <div align="center" style="margin-top: 71px;">

             

             

            Now let me explain. You're trying to position elements using <br> tags which will not work. The solution I provided is a sticking plaster one and may fail in some browsers because it still relies on guess work.

             

            A far better option would be to rebuild that top section of your page into a solid structure.

             

            A <div> which contains the grass bank and sky image but NOT the blue line that your navigation sits on. You can set this <divs> height to the height of the image and then include your text 'Complete Energy Certificates Ltd' within it.

             

            Like:

             

            <div id="header">

            <p>Complete Energy Certificates Ltd</p>

            </div><!-- we close the header -->

             

            Now set some css:

             

            .twoColElsLtHdr #header {
            background-color: #FFF;
            background-image: url(images/header2.jpg);
            background-repeat: no-repeat;
            background-position: center;
            font-size: 12px;
            height: 205px; /* make the height the same as that of the background image */
            }

            Move your 'Complete Energy Certificates Ltd' text into position by setting some top
            and right padding on the paragraph tag:

            .twoColElsLtHdr #header p {
            margin: 0;
            padding: 60px 10px 0 0;/*top,right,bottom,left*/
            text-align: right;
            }


             

            Next introduce a navigation <div> right after the 'header' <div> and put all the table code relating to yuor menu in it:

             

            <div id="header">

            <p>Complete Energy Certificates Ltd</p>

            </div><!-- we close the header -->

             

            <div id="navigation">

             

            <!-- all table code for navigation goes here -->

             

            </div><!-- we close the navigation -->

             

            Style your naviagtion <div> to have a blue background that matches the menu images:

             

            #navigation {

            background-color: #XXX;

            }

             

            Think of contruction as simple building blocks.

            1 person found this helpful
            • 3. Re: Why does the nav bar move in a browser??
              michhanlon Level 1

              thank you both for your help.

              I think i have sort of done it now.  i will have to go and finish learning about css me thinks, before I take on another job!!

               

              thanks again