11 Replies Latest reply on Jul 28, 2008 9:18 AM by Newsgroup_User

    importing graphic into hybrid page

    rpapalia
      I've never used Blank Pages before, but I opened Dreamweaver's "2 column hybrid, left sidebar, header and footer" blank page. How do I correctly import a header graphic into the header area so that it adjusts to different display settings?
        • 1. Re: importing graphic into hybrid page
          Level 7
          > adjusts to different display
          > settings?

          What do you mean by this?


          --
          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
          ==================


          "rpapalia" <webforumsuser@macromedia.com> wrote in message
          news:g6cs5c$hjl$1@forums.macromedia.com...
          > I've never used Blank Pages before, but I opened Dreamweaver's "2 column
          > hybrid, left sidebar, header and footer" blank page. How do I correctly
          > import
          > a header graphic into the header area so that it adjusts to different
          > display
          > settings?
          >

          • 2. Re: importing graphic into hybrid page
            Level 7
            On Fri, 25 Jul 2008 15:40:28 +0000 (UTC), "rpapalia"
            <webforumsuser@macromedia.com> wrote:

            >I've never used Blank Pages before, but I opened Dreamweaver's "2 column
            >hybrid, left sidebar, header and footer" blank page. How do I correctly import
            >a header graphic into the header area so that it adjusts to different display
            >settings?


            you just place the curser in the header - and Insert | Image.

            depends on the graphic -but you can use background-repeat: for a css
            background image
            --

            ~Malcolm~*...
            ~*
            • 3. Re: importing graphic into hybrid page
              rpapalia Level 1
              The graphic I'm trying to insert is a banner across the top, but I don't know how to make it fit correctly. Of course it looks really bad if I change the monitor to 800x600. This is how it looks now:
              http://www.eriercd.org/catholicfoundation.html
              • 4. Re: importing graphic into hybrid page
                JoeDaSilva Level 4
                Choose fixed instead of hybrid.
                • 5. Re: importing graphic into hybrid page
                  Level 7
                  This is not a resolution issue. It's a browser width issue. Your only way
                  out is to prevent the container from flexing as the browser width decreases.
                  In other words you should have chosen a fixed width page rather than a fluid
                  one.

                  You can probably just change this -

                  .twoColHybLtHdr #container {
                  width: 80%; /* this will create a container 80% of the browser width */
                  background: #FFFFFF;
                  margin: 0 auto; /* the auto margins (in conjunction with a width) center
                  the page */
                  border: 1px solid #000000;
                  text-align: left; /* this overrides the text-align: center on the body
                  element. */
                  }

                  to this -

                  .twoColHybLtHdr #container {
                  width: 830px; /* this will create a container 830px wide */
                  background: #FFFFFF;
                  margin: 0 auto; /* the auto margins (in conjunction with a width) center
                  the page */
                  border: 1px solid #000000;
                  text-align: left; /* this overrides the text-align: center on the body
                  element. */
                  }

                  And get something acceptable.

                  --
                  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
                  ==================


                  "rpapalia" <webforumsuser@macromedia.com> wrote in message
                  news:g6d4nb$qqm$1@forums.macromedia.com...
                  > The graphic I'm trying to insert is a banner across the top, but I don't
                  > know
                  > how to make it fit correctly. Of course it looks really bad if I change
                  > the
                  > monitor to 800x600. This is how it looks now:
                  > http://www.eriercd.org/catholicfoundation.html
                  >
                  >

                  • 6. Re: importing graphic into hybrid page
                    rpapalia Level 1
                    Thanks, Murray, that worked great! It still left some space above and below the graphic but I changed the "padding" from 10 to 0 and it removed that space. Baby steps!
                    Thanks again, everyone who responded!
                    • 7. Re: importing graphic into hybrid page
                      Level 7
                      Good luck!

                      --
                      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
                      ==================


                      "rpapalia" <webforumsuser@macromedia.com> wrote in message
                      news:g6khvv$qv7$1@forums.macromedia.com...
                      > Thanks, Murray, that worked great! It still left some space above and
                      > below the
                      > graphic but I changed the "padding" from 10 to 0 and it removed that
                      > space.
                      > Baby steps!
                      > Thanks again, everyone who responded!
                      >

                      • 8. Re: importing graphic into hybrid page
                        rpapalia Level 1
                        Rats! Sorry, one last thing - Regarding the banner across the top, when I added a Hotspot over the graphic for the first link "Contact Us", it created a gray space below the banner when viewed in I.E. 7
                        http://www.eriercd.org/catholicfoundation.html
                        It doesn't show up in Firefox. Any ideas how I can get rid of this gray area below the banner graphic?
                        • 9. Re: importing graphic into hybrid page
                          Level 7
                          <div id="header">
                          <h1><img src="images/tcf_header.jpg" width="800" height="140" border="0"
                          usemap="#Map" />
                          <map name="Map" id="Map"><area shape="rect" coords="277,3,362,24"
                          href="mailto:catholicfoundation@ErieRCD.org" />
                          </map></h1>
                          <!-- end #header --></div>

                          Why do you have your image within an <h1> tag? That's why you have a gap
                          below - it's the bottom margin on the <h1> tag. But putting an image within
                          an <h1> tag makes no semantic sense. Nevertheless, you'd have the same
                          problem if it were a <p> tag. The bottom line? Why have it in any
                          container other than div#header?

                          --
                          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
                          ==================


                          "rpapalia" <webforumsuser@macromedia.com> wrote in message
                          news:g6kmu0$2vp$1@forums.macromedia.com...
                          > Rats! Sorry, one last thing - Regarding the banner across the top, when I
                          > added
                          > a Hotspot over the graphic for the first link "Contact Us", it created a
                          > gray
                          > space below the banner when viewed in I.E. 7
                          > http://www.eriercd.org/catholicfoundation.html
                          > It doesn't show up in Firefox. Any ideas how I can get rid of this gray
                          > area
                          > below the banner graphic?
                          >
                          >

                          • 10. Re: importing graphic into hybrid page
                            rpapalia Level 1
                            I started with one of Dreamweaver's Blank Pages thinking the header was a place to insert a graphic. I'm very new to html. Can I salvage what I've done or start over?
                            • 11. Re: importing graphic into hybrid page
                              Level 7
                              The problem you have now is just a tiny prelude to the problems you will
                              have longer term without a basic undertanding of HTML and CSS.

                              > Can I salvage what I've done or start over?

                              Certainly. Remove the <h1> opening and closing tags that surround that
                              image and see what happens.

                              --
                              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
                              ==================


                              "rpapalia" <webforumsuser@macromedia.com> wrote in message
                              news:g6kqe2$6q6$1@forums.macromedia.com...
                              >I started with one of Dreamweaver's Blank Pages thinking the header was a
                              >place to insert a graphic. I'm very new to html. Can I salvage what I've
                              >done or start over?