3 Replies Latest reply on Nov 2, 2008 3:24 AM by Newsgroup_User

    Help with a simple but crazymaking question!

    patrickpmm
      hi there, would anyone here mind looking at my test site and telling me what I am doing wrong?
      http://presentations.patrickmeyers.com/

      I am VERY new at anything web related, and trying to learn some Dreamweaver, html, and css. Basically I want ALL my content (which for now is just images) to stay flush left with each other no matter what the user does with their web browser window. But when I expand my web broswer window, two of my images (one of which is a rollover image that I need to add a hyperlink to) bump over to the right and up. I don't want them to do that! I want them to stay flush left at all times.

      I also want to center everything so that no matter what a person does with their browser, the page stays in the center of the window (i.e. the Yahoo homepage) but all the content remains left aligned relative to the top.

      I've tried every concievable setting in Dreamweaver I can think of and nothing works. The button and bottom banner still move over to the right and up.

      Any tips? Thank you in advance!!!!!
      p
        • 1. Re: Help with a simple but crazymaking question!
          Level 7
          <p><img src="banner.jpg" width="792" height="336" align="left" /><a href="#"
          onmouseout="MM_swapImgRestore()"
          onmouseover="MM_swapImage('Image3','','click-button-yellow.jpg',1)"><img
          src="click-button-purple.jpg" name="Image3" width="180" height="46"
          hspace="16" vspace="15" border="0" align="left" id="Image3" /></a></p>

          <p><img src="lowerbanner.jpg" width="792" height="41" vspace="30"
          align="left" /></p>
          </body>

          You have two elements horizontally adjacent (the banner image at 792px
          width, and the anchor tag at 180px width). Their combined width is
          792+180+32px = 1004px (the 32px comes from the hspace="16" attribute). When
          the browser viewport is less than 972px wide, the anchor tag and its
          associated image will just drop below the banner image (since they are
          contained in a <p> that has no explicit width).

          Change this -

          <p><img src="banner.jpg" width="792" height="336" align="left" /><a href="#"
          onmouseout="MM_swapImgRestore()"
          onmouseover="MM_swapImage('Image3','','click-button-yellow.jpg',1)"><img
          src="click-button-purple.jpg" name="Image3" width="180" height="46"
          hspace="16" vspace="15" border="0" align="left" id="Image3" /></a></p>

          to this -

          <p style="width:1004px;"><img src="banner.jpg" width="792" height="336"
          align="left" /><a href="#" onmouseout="MM_swapImgRestore()"
          onmouseover="MM_swapImage('Image3','','click-button-yellow.jpg',1)"><img
          src="click-button-purple.jpg" name="Image3" width="180" height="46"
          hspace="16" vspace="15" border="0" align="left" id="Image3" /></a></p>

          and see what happens.

          > I also want to center everything so that no matter what a person does with
          > their browser, the page stays in the center of the window (i.e. the Yahoo
          > homepage) but all the content remains left aligned relative to the top.

          It depends on whether you are using absolute positioning on the page, as to
          which method might be best, but in either event, this will work -

          Change this -

          </head>

          to this -

          <style type="text/css">
          #wrapper { width:1004px; margin:0 auto;position:relative; }
          /* 760px will display on an 800px screen maximized browser window without */
          /* horizontal scrollbars. 1004px is pretty wide, and will display horizontal
          scrollbars on 1024 screens.*/
          </style>
          </head>

          change this -

          <body onload="MM_preloadImages('click-button-yellow.jpg')">
          (the ellipsis represents any other attributes that might be mentioned in the
          body tag, and SHOULD NOT BE INCLUDED EXPLICITLY!)

          to this -

          <body onload="MM_preloadImages('click-button-yellow.jpg')">
          <div id="wrapper">

          and this -

          </body>

          to this -

          <!-- /wrapper -->
          </div>
          </body>

          and see if that helps.

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


          "patrickpmm" <webforumsuser@macromedia.com> wrote in message
          news:geidg5$4ct$1@forums.macromedia.com...
          > hi there, would anyone here mind looking at my test site and telling me
          > what I
          > am doing wrong?
          > http://presentations.patrickmeyers.com/
          >
          > I am VERY new at anything web related, and trying to learn some
          > Dreamweaver,
          > html, and css. Basically I want ALL my content (which for now is just
          > images)
          > to stay flush left with each other no matter what the user does with their
          > web
          > browser window. But when I expand my web broswer window, two of my images
          > (one
          > of which is a rollover image that I need to add a hyperlink to) bump over
          > to
          > the right and up. I don't want them to do that! I want them to stay flush
          > left
          > at all times.
          >
          > I also want to center everything so that no matter what a person does with
          > their browser, the page stays in the center of the window (i.e. the Yahoo
          > homepage) but all the content remains left aligned relative to the top.
          >
          > I've tried every concievable setting in Dreamweaver I can think of and
          > nothing
          > works. The button and bottom banner still move over to the right and up.
          >
          > Any tips? Thank you in advance!!!!!
          > p
          >

          • 2. Re: Help with a simple but crazymaking question!
            patrickpmm Level 1
            Hi Murray, thanks for your help!!!! I did (I think) what you said, and check out what happened. Looks like the centering worked, but now the purple button rollover is fixed to the right of top banner placeholder (the goal is to have it fixed to the left alignment, underneath the top banner, along with the other images), and on top of that the top banner image isn't visible.

            Help?

            please and thank you kindly!

            http://presentations.patrickmeyers.com/

            p
            • 3. Re: Help with a simple but crazymaking question!
              Level 7
              Just checking to make sure you know what a bad idea it is to have your
              readable text in graphics - you do, right?

              <body>
              <center> <---- REMOVE THIS
              <div> <---- REMOVE THIS
              <div style="width: 750px; margin: 0 auto;">
              <img src="banner.jpg" alt="image1" />
              <br> <---- REMOVE THIS
              <img src="click-button-purple.jpg" alt="image2" />
              <br> <---- REMOVE THIS
              <img src="lowerbanner.jpg" alt="image3" />

              <br> <---- REMOVE THIS
              </div>
              </center> <---- REMOVE THIS
              </body>

              Change this -

              </head>

              to this -

              <style type="text/css">
              img { display:block; }
              </style>
              </head>

              Now you will see the three images, in a vertical array from the top of the
              page to the bottom.
              --
              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
              ==================


              "patrickpmm" <webforumsuser@macromedia.com> wrote in message
              news:geika9$ckr$1@forums.macromedia.com...
              > Hi Murray, thanks for your help!!!! I did (I think) what you said, and
              > check
              > out what happened. Looks like the centering worked, but now the purple
              > button
              > rollover is fixed to the right of top banner placeholder (the goal is to
              > have
              > it fixed to the left alignment, underneath the top banner, along with the
              > other
              > images), and on top of that the top banner image isn't visible.
              >
              > Help?
              >
              > please and thank you kindly!
              >
              > http://presentations.patrickmeyers.com/
              >
              > p
              >