6 Replies Latest reply on Apr 26, 2010 6:53 AM by martcol

    So frustrated! Need help positioning image...

    staceyetc

      Hi folks...

      I am learning CSS in fits and starts, and clearly I don't have a good enough grasp on it. I hope someone can help me.

       

      I created this page, and tried to place an image in the large "main content" area to the right of the slideshow. It didn't work, kept getting shifted elsewhere. So I specified it as the background image for that div instead... It looks fine in Firefox and Safari (I'm on a Mac), however, a colleague with Internet Explorer 7 on a PC says that it shows up way down at the bottom of the page after the slideshow

       

      I've looked at all the ways to insert the image but none of them work. I know I must be missing something very simple. Can anyone help?

       

      Here's the URL... http://greatdiamondrentals.com/index.html

       

      and the source code:

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <title>Great Diamond Rentals, Diamond Cove, Great Diamond Island, Maine</title>

       

       

       

      <script src="http://www.google.com/jsapi"></script>
      <script type="text/javascript">
         
            google.load("jquery", "1.3.2");

       

         
          </script>
      <script type="text/javascript" src="js/jquery.cycle.js"></script>

       

      <script type="text/javascript">
      $(document).ready(function(){
         
          $('#slideshow').cycle();
         
           });
      function MM_preloadImages() { //v3.0
        var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
          var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
          if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
      }

       

      function MM_findObj(n, d) { //v4.01
        var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
          d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
        if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
        for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
        if(!x && d.getElementById) x=d.getElementById(n); return x;
      }

       

      function MM_nbGroup(event, grpName) { //v6.0
        var i,img,nbArr,args=MM_nbGroup.arguments;
        if (event == "init" && args.length > 2) {
          if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
            img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
            if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
            nbArr[nbArr.length] = img;
            for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
              if (!img.MM_up) img.MM_up = img.src;
              img.src = img.MM_dn = args[i+1];
              nbArr[nbArr.length] = img;
          } }
        } else if (event == "over") {
          document.MM_nbOver = nbArr = new Array();
          for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
            if (!img.MM_up) img.MM_up = img.src;
            img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
            nbArr[nbArr.length] = img;
          }
        } else if (event == "out" ) {
          for (i=0; i < document.MM_nbOver.length; i++) {
            img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
        } else if (event == "down") {
          nbArr = document[grpName];
          if (nbArr)
            for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
          document[grpName] = nbArr = new Array();
          for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
            if (!img.MM_up) img.MM_up = img.src;
            img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
            nbArr[nbArr.length] = img;
        } }
      }
      </script>
         
         
         
      <style type="text/css">
      <!--
      body  {
          text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
          color: #000000;
          font-family: Verdana, Arial, Helvetica, sans-serif;
          font-size: 100%;
          margin-top: 20;
          margin-right: 0;
          margin-bottom: 0;
          margin-left: 0;
          padding: 0;
          background-image: url(images/gradient900.jpg);
          background-repeat: repeat-x;
      }
      .twoColFixLtHdr #container {
          width: 940px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
          background: #FFFFFF;
          text-align: left; /* this overrides the text-align: center on the body element. */
          margin-top: 0;
          margin-right: auto;
          margin-bottom: 0;
          margin-left: auto;
          height: 660px;
          border-top-width: 1px;
          border-right-width: 1px;
          border-bottom-width: 1px;
          border-left-width: 1px;
          border-top-style: solid;
          border-right-style: solid;
          border-bottom-style: none;
          border-left-style: solid;
          border-top-color: #006;
          border-right-color: #006;
          border-bottom-color: #006;
          border-left-color: #006;
      }
      .twoColFixLtHdr #header {
          padding-top: 0;
          padding-right: 0px;
          padding-bottom: 0;
          padding-left: 0px;
          width: 940px;
          height: 30px;
          background-color: #7092c3;
      }
      .twoColFixLtHdr #header h1 {
          margin: 0;
      }
      .twoColFixLtHdr #sidebar1 {
          float: left; /* since this element is floated, a width must be given */
          width: 380px;
          height: 600px;
          padding-top: 0px;
          padding-right: 0px;
          padding-bottom: 0px;
          padding-left: 0px;
      }
      .twoColFixLtHdr #mainContent {
          height: 579px;
          width: 940px;
          margin-top: 0;
          margin-right: 0;
          margin-bottom: 0;
          padding-top: 0;
          padding-right: 0px;
          padding-bottom: 0;
          padding-left: 0px;
          margin-left: 0px;
          background-image: url(images/GDRmaincontent.jpg);
          background-position: right top;
          background-repeat: no-repeat;
      }
      .twoColFixLtHdr #footer {
          width: 940px;
          top: 630px;
          height: 30px;
          font-family: Arial, Helvetica, sans-serif;
          font-size: 12px;
          font-style: normal;
          font-weight: 600;
          font-variant: normal;
          text-transform: none;
          color: #FFF;
          background-color: #7092c3;
          text-align: center;
          border-top-width: 1px;
          border-right-width: 1px;
          border-bottom-width: 1px;
          border-left-width: 1px;
          border-right-style: solid;
          border-bottom-style: solid;
          border-top-color: #006;
          border-right-color: #006;
          border-bottom-color: #006;
          border-left-color: #006;
          padding-top: 5;
          padding-right: 5;
          padding-bottom: 8;
          padding-left: 5;
      }
      .twoColFixLtHdr #footer p {
          margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
          padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
          font-family: Arial, Helvetica, sans-serif;
          font-size: 12px;
          font-style: normal;
          font-weight: normal;
          color: #FFF;
          vertical-align: middle;
      }
      .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
          float: right;
          margin-left: 8px;
      }
      .fltlft { /* this class can be used to float an element left in your page */
          float: left;
          margin-right: 8px;
      }
      .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
          clear:both;
          height:0;
          font-size: 1px;
          line-height: 0px;
      }
      a:link {
          text-decoration: none;
          color: #FFF;
      }
      a:visited {
          text-decoration: none;
          color: #FFF;
      }
      a:hover {
          text-decoration: underline;
          color: #600;
      }
      a:active {
          text-decoration: none;
          color: #CCC;
      }

       

       

       

       

       

      -->
      </style><!--[if IE 5]>
      <style type="text/css">
      /* place css box model fixes for IE 5* in this conditional comment */
      .twoColFixLtHdr #sidebar1 { width: 230px; }
      </style>
      <![endif]--><!--[if IE]>
      <style type="text/css">
      /* place css fixes for all versions of IE in this conditional comment */
      .twoColFixLtHdr #sidebar1 { padding-top: 30px; }
      .twoColFixLtHdr #mainContent { zoom: 1; }
      /* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
      </style>
      <![endif]-->
      <meta name="Keywords" content="Maine, Vacation, rentals, Great Diamond Island, Diamond Cove, vacation homes, Island, Casco Bay, Portland, Maine Coast, Atlantic Ocean, Oceanside, seaside, Family, New England, lobster, beach, beaches, islands, rental, hotel, inn, bed and breakfast, holiday, ferry, fort, historic" />
      <meta name="Description" content="Vacation on a Maine island! Beautiful historic homes available for rent at Diamond Cove on Great Diamond Island in Casco Bay near Portland, Maine." />
      </head>

       

      <body class="twoColFixLtHdr" onload="MM_preloadImages('images/visited_homes.jpg','images/visited_about.jpg','images/vi sited_amenities.jpg','images/visited_map.jpg','images/visited_faq.jpg','images/visited_con tsact.jpg')">

       

      <div id="container">
        <div id="header">
          <table border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td><a href="http://greatdiamondrentals.com/view_our_homes.htm" target="_top" onclick="MM_nbGroup('down','group1','viewhomes','images/visited_homes.jpg',1)" onmouseover="MM_nbGroup('over','viewhomes','images/visited_homes.jpg','images/visited_hom es.jpg',1)" onmouseout="MM_nbGroup('out')"><img src="images/nav_viewourhomes.jpg" alt="View Our Homes" name="viewhomes" width="186" height="30" border="0" id="viewhomes" onload="" /></a></td>
              <td><a href="about_the_island_2010.html" target="_top" onclick="MM_nbGroup('down','group1','about','images/visited_about.jpg',1)" onmouseover="MM_nbGroup('over','about','images/visited_about.jpg','images/visited_about.j pg',1)" onmouseout="MM_nbGroup('out')"><img src="images/nav_about.jpg" alt="images/visited_about.jpg" name="about" width="192" height="30" border="0" id="about" onload="" /></a></td>
              <td><a href="amenities.htm" target="_top" onClick="MM_nbGroup('down','group1','amenities','images/visited_amenities.jpg',1)" onMouseOver="MM_nbGroup('over','amenities','images/visited_amenities.jpg','images/visited _amenities.jpg',1)" onMouseOut="MM_nbGroup('out')"><img name="amenities" src="images/nav_amenities.jpg" border="0" alt="amenities and activities" onLoad="" /></a></td>
              <td><a href="map_2010.html" target="_top" onClick="MM_nbGroup('down','group1','map','images/visited_map.jpg',1)" onMouseOver="MM_nbGroup('over','map','images/visited_map.jpg','images/visited_map.jpg',1) " onMouseOut="MM_nbGroup('out')"><img name="map" src="images/nav_map.jpg" border="0" alt="island map" onLoad="" /></a></td>
              <td><a href="FAQ_2010.html" target="_top" onClick="MM_nbGroup('down','group1','FAQs','images/visited_faq.jpg',1)" onMouseOver="MM_nbGroup('over','FAQs','images/visited_faq.jpg','images/visited_faq.jpg',1 )" onMouseOut="MM_nbGroup('out')"><img name="FAQs" src="images/nav_faq.jpg" border="0" alt="FAQs" onLoad="" /></a></td>
              <td><a href="contact2009.html" target="_top" onClick="MM_nbGroup('down','group1','contact','images/visited_contsact.jpg',1)" onMouseOver="MM_nbGroup('over','contact','images/visited_contsact.jpg','images/visited_co ntsact.jpg',1)" onMouseOut="MM_nbGroup('out')"><img name="contact" src="images/nav_contact.jpg" border="0" alt="contact us" onLoad="" /></a></td>
            </tr>
          </table>
          <h1> </h1>
        <!-- end #header --></div>
        <div id="sidebar1">
            <div id="slideshow">
      <img src="/images/slide1.jpg" />
      <img src="/images/slide2.jpg" />
      <img src="/images/slide3.jpg" />
      <img src="/images/slide4.jpg" />
      <img src="/images/slide5.jpg" />
      <img src="/images/slide6.jpg" />
      <img src="/images/slide7.jpg" />
      <img src="/images/slide8.jpg" />
      <img src="/images/slide9.jpg" />
      <img src="/images/slide10.jpg" />

       

       

       


      </div>
        <!-- end #sidebar1 --></div>
        <div id="mainContent">
          <h1> </h1>
        <!-- end #mainContent --></div>
          <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->
          <div id="footer">
            <p>Great Diamond Rentals, c/o Phoenix Management, P.O. Box 759, Saco, Maine 04072 - (207) 766-3005 - fax (207) 571-3066 -<a href="mailto: info@greatdiamondrentals.com"> info@greatdiamondrentals.com</a></p>
            <!-- end #footer -->
      </div>
          <br class="clearfloat" />
        <!-- end #container -->
      </div>
      </body>
      </html>

        • 1. Re: So frustrated! Need help positioning image...
          osgood_ Level 8

          staceyetc wrote:

           

          Hi folks...

          I am learning CSS in fits and starts, and clearly I don't have a good enough grasp on it. I hope someone can help me.

           

          I created this page, and tried to place an image in the large "main content" area to the right of the slideshow. It didn't work, kept getting shifted elsewhere. So I specified it as the background image for that div instead... It looks fine in Firefox and Safari (I'm on a Mac), however, a colleague with Internet Explorer 7 on a PC says that it shows up way down at the bottom of the page after the slideshow

           

          I've looked at all the ways to insert the image but none of them work. I know I must be missing something very simple. Can anyone help?

           

          Here's the URL... http://greatdiamondrentals.com/index.html

           


          The width of your #mainConent <div> is too wide hence in IE it is displaced to beneath the side bar.

           

          Change it to 560px wide and also add float: left; as shown below:

           

          .twoColFixLtHdr #mainContent {
              height: 579px;
              width: 560px;
              float: left;
              margin-top: 0;
              margin-right: 0;
              margin-bottom: 0;
              padding-top: 0;
              padding-right: 0px;
              padding-bottom: 0;
              padding-left: 0px;
              margin-left: 0px;
              background-image: url(images/GDRmaincontent.jpg);
              background-position: right top;
              background-repeat: no-repeat;
            background-color:#609;
          }

          1 person found this helpful
          • 2. Re: So frustrated! Need help positioning image...
            staceyetc Level 1

            Thank you!! That is very helpful. However, now for some reason the footer is missing.... do you know why?

            see: http://greatdiamondrentals.com/index2.html

            • 3. Re: So frustrated! Need help positioning image...
              staceyetc Level 1

              I also tried inserting the image in the normal fashion (not as a background image) but I still lose the footer! Any ideas?

              http://greatdiamondrentals.com/index3.html

              • 4. Re: So frustrated! Need help positioning image...
                osgood_ Level 8

                add clear: both; to the #footer <div> as shown:

                 

                 

                .twoColFixLtHdr #footer {
                clear: both;
                    width: 940px;
                    top: 630px;
                    height: 30px;
                    font-family: Arial, Helvetica, sans-serif;
                    font-size: 12px;
                    font-style: normal;
                    font-weight: 600;
                    font-variant: normal;
                    text-transform: none;
                    color: #FFF;
                    background-color: #7092c3;
                    text-align: center;
                    border-top-width: 1px;
                    border-right-width: 1px;
                    border-bottom-width: 1px;
                    border-left-width: 1px;
                    border-right-style: solid;
                    border-bottom-style: solid;
                    border-top-color: #006;
                    border-right-color: #006;
                    border-bottom-color: #006;
                    border-left-color: #006;
                    padding-top: 5;
                    padding-right: 5;
                    padding-bottom: 8;
                    padding-left: 5;
                }

                 

                 

                Also you can get rid of background-color: #609; right at the botttom of the #mainContent <div> css (I just included that whilst testing)

                 

                .twoColFixLtHdr #mainContent {
                    height: 579px;
                    width: 560px;
                    float: left;
                    margin-top: 0;
                    margin-right: 0;
                    margin-bottom: 0;
                    padding-top: 0;
                    padding-right: 0px;
                    padding-bottom: 0;
                    padding-left: 0px;
                    margin-left: 0px;
                    background-image: url(images/GDRmaincontent.jpg);
                    background-position: right top;
                    background-repeat: no-repeat;
                  background-color:#609;
                }
                • 5. Re: So frustrated! Need help positioning image...
                  staceyetc Level 1

                  osgood, you are my hero!!!!

                   

                  Thanks soooo much.

                   

                  I did notice that background color earlier.... I was thinking, "where did THAT come from???".

                   

                  I think this may all work properly now. I'll have to ask my friend with the PC to check it for me:

                   

                  http://greatdiamondrentals.com/index.html

                   

                  Thanks again

                  • 6. Re: So frustrated! Need help positioning image...
                    martcol Level 4

                    staceyetc wrote:

                     

                    ...for some reason the footer is missing....

                     

                     

                    Could it be because the <br class="clearfloat"> is in the wrong place?  it might be that it ought to go after the #maincontent div.

                     

                    Martin