9 Replies Latest reply on May 12, 2010 3:18 PM by Nancy OShea

    having problems with image resizing

    TrishC3

      I can't seem to get my main header logo to resize with rest of my page; I'm sure it's something simple,but I think I've been looking at it to long to be able to see where the error is now.... any ideas? It think I posted the relelvent code here....:

       

      Page:

      <body>
      <img src="images/STILogoext.gif" width="950" height="131" hspace="350" align="absmiddle"/>
      <div id="menu-bg">
         
      </div>
      <div id="menu" class="container">
             
      </div>
      </div>

       

      CSS:

      html, body {
          height: 100%;
      }

       

      body {
          margin: 0px;
          padding: 0px;
          background: #01456C url(html/images/bg01.jpg) repeat-x left top;
          font-family: Arial, Helvetica, sans-serif;
          font-size: 11px;
          color: #5C6F73;
      }

       

       

      temporary site:

      http://www.tcmaxmarketing.com/web_site/Web_Site/index.html

       

       

      Thanks for any help!

      Trish

        • 1. Re: having problems with image resizing
          John Waller Adobe Community Professional & MVP

          What do you mean by re-size?

           

          Are you trying to re-size the image in the code? or on text zoom? or something else?

          • 2. Re: having problems with image resizing
            TrishC3 Level 1

            Sorry; I just need it to resize with the rest of my page rather than staying stationary. If you try to resize the browser window, the rest of the page resizes with the window, but the logo doesn't

            • 3. Re: having problems with image resizing
              Nancy OShea Adobe Community Professional & MVP

              To begin with you have a </div> right after <body> which doesn't belong.

              Plus a few other code errors shown below which might be throwing things off.

               

              http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.tcmaxmarketing.com%2Fweb_site %2FWeb_Site%2Findex.html

               

               

              Nancy O.
              Alt-Web Design & Publishing
              Web | Graphics | Print | Media  Specialists
              http://alt-web.com/
              http://twitter.com/altweb
              http://alt-web.blogspot.com

              1 person found this helpful
              • 4. Re: having problems with image resizing
                John Waller Adobe Community Professional & MVP

                OK, so you're talking about re-positioning, not re-sizing.

                 

                When the browser window changes dimensions, you want the header to move in relation to the rest of the page content.

                 

                I suggest you first fix the errors on the page

                http://validator.w3.org/check?uri=http%3A%2F%2Fwww.tcmaxmarketing.com%2Fweb_site%2FWeb_Sit e%2Findex.html&charset=%28detect+automatically%29&doctype=Inline&group=0

                 

                A couple of mis-placed div tags to sort out.

                 

                Then you place the page content inside a wrapper div. so it's all in the same page container.

                1 person found this helpful
                • 5. Re: having problems with image resizing
                  TrishC3 Level 1

                  So, I corrected those errors, but the logo is still not repositioning...,.

                  • 6. Re: having problems with image resizing
                    Nancy OShea Adobe Community Professional & MVP

                    CSS:

                     

                    #wrapper {width: 950px; margin:0 auto}

                     

                     

                    HTML:

                     

                    <body>

                    <div id="wrapper">

                     

                    All the rest of your page content goes here

                     

                    </div> <!--end wrapper-->

                    </body> <!--end body-->

                     

                    Nancy O.
                    Alt-Web Design & Publishing
                    Web | Graphics | Print | Media  Specialists
                    http://alt-web.com/
                    http://twitter.com/altweb
                    http://alt-web.blogspot.com

                    • 7. Re: having problems with image resizing
                      TrishC3 Level 1

                      I'm still having the same problem.... I'm sorry I'm not getting it....

                       

                       

                      <head>
                      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                      <title>Geographic RF Signal Coverage Analysis - Survey Technologies</title>
                      <meta name="keywords" content="survey technologies, survey tech, rf signal strength, signal coverage testing, rf signal analysis, rf site survey
                      " />
                      <meta name="description" content="Survey Technologies improves and automates the acquisition, analysis and display of RF signal strength across a given terrain." />
                      <link href="default.css" rel="stylesheet" type="text/css" media="all" />
                      <style type="text/css">
                      <!--
                      #footer tr td table tr td {
                          color: #FFF;
                      }
                      -->
                      </style>
                      </head>
                      <body>

                       

                      <div id="wrapper">

                       

                      <img src="images/STILogoext.gif" alt="STI Logo" width="950" height="131"/>
                      <div id="menu-bg">
                         
                      </div>
                      <div id="menu" class="container">
                             
                      </div>

                       

                      <div id="page-bg">
                          <div id="page-bgtop">
                              <table width="100%" border="0" cellpadding="0" cellspacing="0" class="container" id="page">
                                  <tr>
                                      <td><div id="sidebar">
                                              <table width="100%" border="0" cellpadding="0" cellspacing="0" class="box-style3">
                                                  <tr>
                                                      <td><h2><span><a href="index.html">Home</a></span></h2></td>
                                                  </tr>
                                                  <tr>
                                                      <td><ul>
                                                              <li class="first"><a href="products.html">Products</a></li>
                                                              <li><a href="audioquality.html">Audio Quality Test</a></li>
                                                              <li><a href="project25.html">Project 25 Solutions</a></li>
                                                              <li><a href="receivers.html">Receivers</a></li>
                                                              <li><a href="compliance.html">Compliance Testing</a></li>
                                                              <li><a href="services.html">Services</a></li>
                                                              <li><a href="sales.html">Sales</a></li>
                                                              <li><a href="about.html">About Us</a></li>
                                                      <li><a href="contact.html">Contact Us</a></li>
                                                          </ul></td>
                                                  </tr>
                                              </table>
                                              <table width="100%" border="0" cellpadding="0" cellspacing="0" class="box-style3">
                                                  <tr>
                                                      <td><h2><span><a href="http://www.surveytech.com/downloads.shtml" title="Client Login" target="_blank">Customer</a></span><a href="http://www.surveytech.com/downloads.shtml" title="Client Login" target="_blank"> Login</a></h2></td>
                                                  </tr>
                                                  <tr>
                                                      <td><ul>
                                                              <li class="first"><a href="http://www.surveytech.com/downloads.shtml">Public Download</a></li>
                                                              <li><a href="#"></a></li>
                                                              <li><a href="#"></a></li>
                                                              <li><a href="#"></a></li>
                                                              <li><a href="#"></a></li>
                                                          </ul></td>
                                                  </tr>
                                              </table>
                                          </div>
                                          <div id="content">
                                              <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                  <tr>
                                                      <td id="box1"><img src="images/banner.gif" alt="STI Driver" width="700" height="412" class="border" /></td>
                                                  </tr>
                                              </table>
                                              <table width="100%" border="0" cellpadding="0" cellspacing="0" class="box-style1">
                                                <tr>
                                                      <td id="box2"><h1 class="h1-style1"><span>Survey Technologies,</span> Incorporated</h1>
                                                        <h2 class="h2-style1">  Geographic Signal Coverage at Your Fingertips</h2>
                                                          <a href="images/Signal Strength.pdf" target="_blank"><img src="images/Signal-StrengthS.gif" alt="Signal Strength map" width="145" height="210" class="border alignleft" /></a>
                                                    <p><strong>Survey Technologies, Incorporated </strong>was founded in 1991 to improve and automate the acquisition, analysis and display of signal strength across a given terrain. STI provided signal survey services to several major companies in 1992 and 1993, utilizing early models of the STI-9000. These activities provided an ideal test bench, pointing the way to further product improvements which were incorporated into the STI-9100 and 9150.  Further improvements lead to Field Test 4 and <a href="stifieldtest6.html" target="_parent">STI Field Test 6 </a>Software and the STI-9400 and STI-9450 mobile signal measurement and coverage analysis systems.text and other info. </p></td>
                                                  </tr>
                                              </table>
                                              <table width="100%" border="0" cellpadding="0" cellspacing="0" class="box-style2">
                                                  <tr>
                      <td><h2> <img src="images/Technical-Drawing.gif" alt="" width="170" height="154" border="1" class="alignright" /></h2>
                                                          <h2><span>Recent</span> News </h2>
                                                      <p>Read a recent article by Carl Peek, STI President, <a href="downloads/STI_Mission_Critical_Article.pdf" title="A Roadmap for Signal Coverage" target="_blank">"A Roadmap for Signal Testing"</a> in the February 2010 issue of Radio Resource Magazine, p.28</p>
                      <ul class="ul-style1">
                                                          <li></li>
                                                    </ul></td>
                                                  </tr>
                                              </table>
                                          </div></td>
                                  </tr>
                              </table>
                          </div>
                      </div>
                      <table width="100%" border="0" cellpadding="0" cellspacing="0" class="container" id="footer">
                          <tr>
                              <td valign="top">
                                <table width="964" border="0">
                                  <tr>
                                    <td><p>Copyright 2010 (c) Survey Technologies,Inc. All rights reserved.</p></td>
                                    <td><p>Site Map</p></td>
                                  </tr>
                              </table></td>
                          </tr>
                      </table><script type="text/javascript">
                      var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
                      document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
                      </script>
                      <script type="text/javascript">
                      try {
                      var pageTracker = _gat._getTracker("UA-12842407-1");
                      pageTracker._trackPageview();
                      } catch(err) {}</script>
                      </div> <!--end wrapper-->

                       

                      </body> <!--end body-->
                      </html>

                       

                      html, body {
                          height: 100%;
                      }

                       

                      body {
                          margin: 0px;
                          padding: 0px;
                          background: #01456C url(html/images/bg01.jpg) repeat-x left top;
                          font-family: Arial, Helvetica, sans-serif;
                          font-size: 11px;
                          color: #5C6F73;
                      }

                       

                      #wrapper {width: 950px; margin:0 auto}

                       

                      h1, h2, h3 {
                          margin: 0px 0px 20px 0px;
                          font-weight: normal;
                          color: #8FB38A;
                      }

                       

                      h1 span, h2 span, h3 span {
                          color: #009ADE;
                      }

                       

                      h1 {
                          letter-spacing: -2px;
                          font-size: 34px;
                      }

                       

                      h1.h1-style1 {
                          margin: 0px;
                          color: #006;
                      }

                       

                      h2 {
                          letter-spacing: -1px;
                          font-size: 21px;
                      }

                       

                      h2.h2-style1 {
                          font-size: 16px;
                          color: #00009D;
                          text-align: left;
                      }

                       

                      h3 {
                          letter-spacing: -1px;
                          font-size: 14px;
                      }

                       

                      p, ol, ul {
                          margin-top: 0px;
                          margin-bottom: 20px;
                          line-height: 26px;
                          text-align: justify;
                          font-size: 12px;
                      }
                      products {
                      }

                       


                      ul.ul-style1 {
                          margin-left: 0px;
                          padding-left: 0px;
                          list-style: none;
                      }

                       

                      a {
                          color: #528B4B;
                      }

                       

                      a:hover {
                          text-decoration: none;
                          color: #006;
                      }

                       

                      a img {
                          border: none;
                      }

                       

                      img.border {
                          padding: 4px;
                          background: #FFFFFF;
                          border: 1px solid #C5D7DC;
                      }

                       

                      img.alignleft {
                          float: left;
                          margin: 0px 25px 0px 0px;
                      }

                       

                      img.alignright {
                          float: right;
                          margin: 0px 0px 0px 25px;
                      }

                       

                      img.aligncenter {
                          margin: 0px auto;
                      }

                       

                      hr {
                          display: none;
                      }

                       

                      /** WRAPPER */

                       

                      #wrapper {
                      }

                       

                      .container {
                          width: 950px;
                          margin: 0px auto;
                      }

                       

                      .clearfix {
                          clear: both;
                      }

                       

                      /** HEADER */

                       

                      #header-bg {
                          background: url(html/images/bg02.jpg) no-repeat center top;
                      }

                       

                      #header {
                          height: 139px;
                      }

                       

                      /** LOGO */

                       

                      #logo {
                          float: left;
                          width: 500px;
                          height: 139px;
                      }

                       

                      /** SEARCH */

                       

                      #search {
                          float: right;
                          width: 243px;
                          height: 139px;
                          background: url(html/images/homepage02.gif) no-repeat 0px 82px;
                      }

                       

                      #search form {
                          margin: 0px;
                          padding: 88px 0px 0px 10px;
                      }

                       

                      #search fieldset {
                          margin: 0px;
                          padding: 0px;
                          border: none;
                      }

                       

                      #search input {
                          float: left;
                      }

                       

                      #search-query {
                          width: 170px;
                          background: none;
                          border: none;
                          font: inherit;
                          color: #FFFFFF;
                      }

                       

                      #search-submit {
                          display: none;
                      }

                       

                      /** MENU */

                       

                      #menu-bg {
                          background: url(html/images/bg03.jpg) no-repeat center top;
                      }

                       

                      #menu {
                          height: 25px;
                      }

                       

                      #menu ul {
                          margin: 0px;
                          padding: 7px 0px 0px 200px;
                          line-height: normal;
                          list-style: none;
                      }

                       

                      #menu li {
                          float: left;
                          height: 27px;
                          margin: 0px 14px 0px 0px;
                          padding: 11px 18px 0px 18px;
                      }

                       

                      #menu a {
                          text-decoration: none;
                          font-size: 13px;
                          color: #FFFFFF;
                      }

                       

                      #menu a:hover {
                          text-decoration: underline;
                          font-size: 15px;
                      }

                       

                      #menu li.active {
                          background: #FFFFFF url(html/images/homepage03.gif) repeat-x left top;
                      }

                       

                      #menu li.active a {
                          color: #466F77;
                      }

                       

                      /** PAGE */

                       

                      #page-bg {
                          background: url(html/images/bg04.jpg) repeat-y center top;
                      }

                       

                      #page-bgtop {
                          background: url(html/images/bg05.jpg) no-repeat center top;
                      }

                       

                      #page {
                      }

                       

                      /** CONTENT */

                       

                      #content {
                          float: right;
                          width: 775px;
                      }

                       

                      /** 2-COLUMN LAYOUT */

                       

                      .two-columns {
                      }

                       

                      .two-columns .column1 {
                          float: left;
                          width: 460px;
                          padding: 40px 0px 40px 40px;
                      }

                       

                      .two-columns .column2 {
                          float: right;
                          width: 195px;
                          padding: 40px 40px 40px 0px;
                      }

                       

                      /** SIDEBAR */

                       

                      #sidebar {
                          float: left;
                          width: 175px;
                      }

                       

                      /** FOOTER */

                       

                      #footer {
                          height: 123px;
                          background: url(html/images/bg07.jpg) no-repeat center top;
                      }

                       

                      #footer p {
                          margin: 0px;
                          padding: 70px 0px 0px 0px;
                          text-align: center;
                          color: #427997;
                      }

                       

                      #footer .legal {
                      }

                       

                      #footer .links {
                      }

                       

                      /** BOX STYLE 1 */

                       

                      .box-style1 {
                          padding: 35px 40px;
                      }

                       

                      /** BOX STYLE 2 */

                       

                      .box-style2 {
                          padding: 35px 40px;
                          background: #01273E url(html/images/bg06.jpg) no-repeat left top;
                          color: #577F96;
                      }

                       

                      .box-style2 h2 {
                          color: #009AE4;
                      }

                       

                      .box-style2 h2 span {
                          color: #009ADE;
                      }

                       

                      .box-style2 a {
                          color: #009ADE;
                      }

                       

                      /** BOX STYLE 3 */

                       

                      .box-style3 {
                          margin-bottom: 20px;
                      }

                       

                      .box-style3 h2 {
                          height: 31px;
                          margin: 0px 0px 0px 0px;
                          padding: 20px 23px 0px 0px;
                          background: url(html/images/homepage07.jpg) no-repeat left top;
                          text-align: right;
                          letter-spacing: -1px;
                          font-size: 14px;
                          color: #009ADE;
                      }

                       

                      .box-style3 h2 span {
                          color: #E0FAFF;
                      }

                       

                      .box-style3 ul {
                          margin: 0px;
                          padding: 10px 0px;
                          text-align: right;
                          line-height: normal;
                          list-style: none;
                      }

                       

                      .box-style3 li {
                          padding: 10px 23px 10px 0px;
                          border-top: 1px solid #016A81;
                      }

                       

                      .box-style3 li.first {
                          border: none;
                      }

                       

                      .box-style3 a {
                          color: #96C5CF;
                          font-size: 14px;
                      }

                       

                      /** BOX1 */

                       

                      #box1 {
                          padding: 30px 25px 0px 25px;
                      }

                       

                      /** BOX2 */

                       

                      #box2 {
                          text-align: left;
                      }

                       

                      /** BOX3 */

                       

                      #box3 {
                      }

                       

                      /** BOX4 */

                       

                      #box4 {
                      }

                       

                      /** BOX5 */

                       

                      #box5 {
                      }
                      hover

                      • 8. Re: having problems with image resizing
                        Nancy OShea Adobe Community Professional & MVP

                        You have a major layout problem.  And I'm sorry but I don't have time to go through your source code to fix it. 

                        View Page Source in browser to see how the pieces of this 2-column layout fit together.

                        http://alt-web.com/TEMPLATES/2-col-fixed-layout.shtml


                        You have my permission to copy the CSS and HTML code into a new page to play with it.

                         

                         

                        Nancy O.
                        Alt-Web Design & Publishing
                        Web | Graphics | Print | Media  Specialists
                        http://alt-web.com/
                        http://twitter.com/altweb
                        http://alt-web.blogspot.com

                        • 9. Re: having problems with image resizing
                          TrishC3 Level 1

                          OK, I'll look through it and hopefully I'll figure out where it went wrong

                           

                          thanks