3 Replies Latest reply on Jul 10, 2008 8:35 AM by Newsgroup_User

    How to get header to stay centered on different browser window sizes

    zinnia3
      Hi,

      Is there a way to change the header design so it stays centered and moves to accommodate different browser window sizes? Right now, it stays where it is, and everything else moves and stays centered as window size changes. I'm a new Dreamweaver user. the url is http://ellifolks.com/

      I tried changing the template I made for the site, and was able to delete some things, but it won't let me add things now. I can't undo to where it started, either. I tried doing a second template. Now I can't save anything -- I get a message saying "sharing issues".

      Thank you.
        • 1. Re: How to get header to stay centered on different browser window sizes
          Level 7
          Combining absolutely positioned elements with centering tables (as you have)
          accounts for about 20% of the posts on this forum. It's commonly done
          because it seems so easy. This is one of the penalties you pay for taking
          that easy road.

          The answer to your question is yes, you can do this.

          1. Make this image the page background -
          http://ellifolks.com/images/ellifolks_web_header_repeat.gif - and use CSS to
          give it a style of background-repeat:repeat-x.
          2. Place your assembled header within a STATIC div (i.e., NOT a layer) at
          the top of the page by changing this -

          <div id="apDiv1"><img src="images/dots_header_left.gif" width="175"
          height="192" alt="dots left" /></div>
          <div id="apDiv2">
          <div align="center"><img src="images/header_animals_logo.gif" width="759"
          height="195" alt="ellifolks logo" /></div>

          </div>
          <div id="apDiv3"><img src="images/dots_header_right.gif" alt="dots right"
          width="175" height="192" /></div>

          to this -

          <div id="header"><img src="images/dots_header_left.gif" width="175"
          height="192" alt="dots left" /><img src="images/header_animals_logo.gif"
          width="759" height="195" alt="ellifolks logo" /><img
          src="images/dots_header_right.gif" alt="dots right" width="175" height="192"
          /></div>

          3. Add this to your CSS -

          #header { width:1109px; margin:0 auto; }

          That should do the trick.

          --
          Murray --- ICQ 71997575
          Adobe Community Expert
          (If you *MUST* email me, don't LAUGH when you do so!)
          ==================
          http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
          http://www.dwfaq.com - DW FAQs, Tutorials & Resources
          ==================


          "zinnia3" <webforumsuser@macromedia.com> wrote in message
          news:g54ovf$nb4$1@forums.macromedia.com...
          > Hi,
          >
          > Is there a way to change the header design so it stays centered and moves
          > to
          > accommodate different browser window sizes? Right now, it stays where it
          > is,
          > and everything else moves and stays centered as window size changes. I'm
          > a
          > new Dreamweaver user. the url is http://ellifolks.com/
          >
          > I tried changing the template I made for the site, and was able to delete
          > some
          > things, but it won't let me add things now. I can't undo to where it
          > started,
          > either. I tried doing a second template. Now I can't save anything -- I
          > get a
          > message saying "sharing issues".
          >
          > Thank you.
          >
          >

          • 3. Re: How to get header to stay centered on different browser window sizes
            Level 7
            You're welcome.

            --
            Murray --- ICQ 71997575
            Adobe Community Expert
            (If you *MUST* email me, don't LAUGH when you do so!)
            ==================
            http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
            http://www.dwfaq.com - DW FAQs, Tutorials & Resources
            ==================


            "zinnia3" <webforumsuser@macromedia.com> wrote in message
            news:g558u2$adi$1@forums.macromedia.com...
            > Thank you, Murray. :)