4 Replies Latest reply on Jan 7, 2009 5:07 AM by Newsgroup_User

    Moving Objects

    Karl Warnke
      I would like a form to be in the center of an image that I created as a menu header. Is it possible to nudge a form in the following site up so that it is in the center of the bar? Or must it remain on a line and I have to adjust the images around it?

      This shows with the form incorrectly placed:
      splashpage A

      This shows the page with the form moved so that the menu bar and the content section butting up exactly to the bar as desired:
      splashpage B
        • 1. Re: Moving Objects
          Level 7
          It is possible to place things exactly as you want them on your page. To do
          so, you will have to understand HTML and CSS at some non-basic level. Can
          you show us the code for this page as it stands?

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


          "Karl Warnke" <webforumsuser@macromedia.com> wrote in message
          news:gjucj5$ag7$1@forums.macromedia.com...
          >I would like a form to be in the center of an image that I created as a
          >menu
          > header. Is it possible to nudge a form in the following site up so that
          > it is
          > in the center of the bar? Or must it remain on a line and I have to
          > adjust the
          > images around it?
          >
          > This shows with the form incorrectly placed:
          > http://www.shinythunderproductions.com/splashpageA.html
          >
          > This shows the page with the form moved so that the menu bar and the
          > content
          > section butting up exactly to the bar as desired:
          > http://www.shinythunderproductions.com/splashpageB.html
          >
          >

          • 2. Re: Moving Objects
            Karl Warnke Level 1
            Here is the code:
            • 3. Re: Moving Objects
              Level 7
              Do you have this page live on a server? Can you post a link if so, please?

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


              "Karl Warnke" <webforumsuser@macromedia.com> wrote in message
              news:gjvt6o$dvs$1@forums.macromedia.com...
              > Here is the code:
              >
              > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
              > " http://www.w3.org/TR/html4/loose.dtd">
              > <html>
              > <head>
              > <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
              > <title>Shiny Thunder Productions</title>
              >
              >
              > <style type="text/css">
              >
              > * {margin:0; padding:0}
              >
              > body {
              > font-family:Verdana, Arial, Helvetica, sans-serif;
              > background: silver;
              > width:100%;
              > text-align:center;
              > background-color: #000000;
              > }
              >
              > #headerWrapper {
              > width:100%;
              > background: url(headerimages/header-bg.jpg) repeat-x
              > }
              >
              > .header {
              > text-align:center;
              > }
              >
              > .menu {
              > width:873px;
              > text-align: left;
              > margin: 0 auto;
              > }
              >
              > #contentWrapper {
              > width:800px;
              > background-color: #333333;
              > margin:0 auto; /**centers container screen**/
              > }
              >
              > .content {
              > padding: 10px;
              > text-align: center;
              > vertical-align: text-bottom;
              > letter-spacing: normal;
              > word-spacing: normal;
              > white-space: normal;
              > }
              >
              > h1,h2,h3 {font-size:1.1em;}
              >
              > .code {font-family:"Courier New", Courier, monospace; line-height: 1.2;
              > margin-left: 10px; margin-right:10px; }
              >
              >
              > #footerWrapper {
              > width:100%;
              > background: #000000;
              > }
              >
              > .footer {
              > color:#000000;
              > width: 770px;
              > margin:0 auto;
              > text-align: center;}
              >
              > #myfooter {
              > text-align:left;
              > padding:0 \\;
              > margin:0;
              > color:#333333;
              > background: #000000;
              > }
              >
              > .myfootertext {
              > background: #000000;
              > text-indent: 75px;
              > color:#333333;
              > font-size:0.65em;
              > line-height:1.5;
              > }
              > a:link {
              > color: #C9B472;
              > }
              > a:visited {
              > color: #C9B472;
              > }
              > a:hover {
              > color: #996633;
              > }
              > a:active {
              > color: #663300;
              > }
              > .style3 {font-family: "Courier New", Courier, monospace; line-height: 1.2;
              > margin-left: 10px; margin-right: 10px; color: #333333; }
              > </style>
              > <script type="text/javascript">
              > <!--
              > function MM_swapImgRestore() { //v3.0
              > var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a )&&x.oSrc;i++)
              > x.src=x.oSrc;
              > }
              > 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
              .indexOf("#")!=0){ d.MM_p[j]=new Image;
              > d.MM_p[j++].src=a ;}}
              > }
              >
              > 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
              [n];
              > for(i=0;!x&&d.layers&&i<d.layers.length;i++)
              > x=MM_findObj(n,d.layers .document);
              > if(!x && d.getElementById) x=d.getElementById(n); return x;
              > }
              >
              > function MM_swapImage() { //v3.0
              > var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array;
              > for(i=0;i<(a.length-2);i+=3)
              > if ((x=MM_findObj(a
              ))!=null){document.MM_sr[j++]=x; if(!x.oSrc)
              > x.oSrc=x.src; x.src=a[i+2];}
              > }
              > //-->
              > </script>
              > </head>
              >
              > <body onLoad="MM_preloadImages('header-bg-bottom-2-dark.jpg')">
              > <div id="headerWrapper">
              > <div class="header">
              > <div class="menu">
              > <p><img src="headerimages/header-bg-top.jpg" width="873"
              > height="69"></p>
              > <p><img src="headerimages/header-bg-bottom-1.jpg" width="128"
              > height="26"><a
              > href="kaleidoscope/kaleidoscope.html" onMouseOut="MM_swapImgRestore()"
              > onMouseOver="MM_swapImage('Image8','','headerimages/header-bg-bottom-2-dark.jpg'
              > ,1)"><img src="headerimages/header-bg-bottom-2-light.jpg" name="Image8"
              > width="246" height="26" border="0"></a><img
              > src="headerimages/header-bg-bottom-3.jpg" width="78" height="26"><img
              > src="headerimages/header-bg-bottom-4.jpg" width="79" height="26"><img
              > src="headerimages/header-bg-bottom-5.jpg" width="81" height="26"><img
              > src="headerimages/header-bg-bottom-3.jpg" width="78" height="26"><span
              > class="style3">
              > <select name="select" class="content" id="select">
              > <option selected>Jump To:</option>
              > <option>Production</option>
              > <option>Design</option>
              > <option>Composing</option>
              > <option>Company Pilot</option>
              > <option>Travel Videos</option>
              > <option>Sound Engineering</option>
              > <option>Writing</option>
              > <option>Portfolio</option>
              > </select>
              > </span></p>
              > </div><!--end menu -->
              > </div><!--end header -->
              > </div> <!--end headerWrapper -->
              >
              > <div id="contentWrapper">
              > <div class="content">
              > <h1>Kaleidoscope Trailer Here</h1>
              > <p> </p>
              > <div class="code">
              > <h2><a href="index.html">Site</a></h2>
              > </div>
              > </div>
              > <div class="content"><div class="code"></div>
              > <!--end code -->
              > </div> <!--end content -->
              > </div> <!--end contentWrapper -->
              >
              > <div id="footerWrapper">
              > <div class="footer">
              > <p class="style3">&copy; 2009 shiny thunder productions, Inc. All Rights
              > Reserved.</p>
              > <p class="style3"> </p>
              > </div>
              > </div>
              >
              > <!--end myfootertext -->
              > </body>
              > </html>
              >

              • 4. Re: Moving Objects
                Level 7
                I can tell you that you have an error in your code, though. You cannot have
                a form element without a form tag.

                You can also consolidate and clean up your CSS a bit by replacing it with
                this -

                <style type="text/css">
                * {
                margin:0;
                padding:0
                }
                body {
                font-family:Verdana, Arial, Helvetica, sans-serif;
                text-align:center;
                background-color: #000000;
                }
                #headerWrapper {
                background: url(headerimages/header-bg.jpg) repeat-x
                }
                .menu {
                width:873px;
                text-align: left;
                margin: 0 auto;
                }
                #contentWrapper {
                width:800px;
                background-color: #333333;
                margin:0 auto; /**centers container screen**/
                }
                .content {
                padding: 10px;
                text-align: center;
                vertical-align: text-bottom;
                }
                h1, h2, h3 {
                font-size:1.1em;
                }
                .code {
                font-family:"Courier New", Courier, monospace;
                line-height: 1.2;
                margin-left: 10px;
                margin-right:10px;
                }
                #footerWrapper {
                background-color: #000000;
                }
                .footer {
                color:#000000;
                width: 770px;
                margin:0 auto;
                }
                #myfooter {
                text-align:left;
                color:#333333;
                }
                .myfootertext {
                text-indent: 75px;
                font-size:0.65em;
                line-height:1.5;
                }
                a {
                color: #C9B472;
                }
                a:hover {
                color: #996633;
                }
                a:active {
                color: #663300;
                }
                .style3 {
                font-family: "Courier New", Courier, monospace;
                line-height: 1.2;
                margin-left: 10px;
                margin-right: 10px;
                color: #333333;
                }
                </style>


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


                "Karl Warnke" <webforumsuser@macromedia.com> wrote in message
                news:gjvt6o$dvs$1@forums.macromedia.com...
                > Here is the code:
                >
                > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                > " http://www.w3.org/TR/html4/loose.dtd">
                > <html>
                > <head>
                > <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
                > <title>Shiny Thunder Productions</title>
                >
                >
                > <style type="text/css">
                >
                > * {margin:0; padding:0}
                >
                > body {
                > font-family:Verdana, Arial, Helvetica, sans-serif;
                > background: silver;
                > width:100%;
                > text-align:center;
                > background-color: #000000;
                > }
                >
                > #headerWrapper {
                > width:100%;
                > background: url(headerimages/header-bg.jpg) repeat-x
                > }
                >
                > .header {
                > text-align:center;
                > }
                >
                > .menu {
                > width:873px;
                > text-align: left;
                > margin: 0 auto;
                > }
                >
                > #contentWrapper {
                > width:800px;
                > background-color: #333333;
                > margin:0 auto; /**centers container screen**/
                > }
                >
                > .content {
                > padding: 10px;
                > text-align: center;
                > vertical-align: text-bottom;
                > letter-spacing: normal;
                > word-spacing: normal;
                > white-space: normal;
                > }
                >
                > h1,h2,h3 {font-size:1.1em;}
                >
                > .code {font-family:"Courier New", Courier, monospace; line-height: 1.2;
                > margin-left: 10px; margin-right:10px; }
                >
                >
                > #footerWrapper {
                > width:100%;
                > background: #000000;
                > }
                >
                > .footer {
                > color:#000000;
                > width: 770px;
                > margin:0 auto;
                > text-align: center;}
                >
                > #myfooter {
                > text-align:left;
                > padding:0 \\;
                > margin:0;
                > color:#333333;
                > background: #000000;
                > }
                >
                > .myfootertext {
                > background: #000000;
                > text-indent: 75px;
                > color:#333333;
                > font-size:0.65em;
                > line-height:1.5;
                > }
                > a:link {
                > color: #C9B472;
                > }
                > a:visited {
                > color: #C9B472;
                > }
                > a:hover {
                > color: #996633;
                > }
                > a:active {
                > color: #663300;
                > }
                > .style3 {font-family: "Courier New", Courier, monospace; line-height: 1.2;
                > margin-left: 10px; margin-right: 10px; color: #333333; }
                > </style>
                > <script type="text/javascript">
                > <!--
                > function MM_swapImgRestore() { //v3.0
                > var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a )&&x.oSrc;i++)
                > x.src=x.oSrc;
                > }
                > 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
                .indexOf("#")!=0){ d.MM_p[j]=new Image;
                > d.MM_p[j++].src=a ;}}
                > }
                >
                > 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
                [n];
                > for(i=0;!x&&d.layers&&i<d.layers.length;i++)
                > x=MM_findObj(n,d.layers .document);
                > if(!x && d.getElementById) x=d.getElementById(n); return x;
                > }
                >
                > function MM_swapImage() { //v3.0
                > var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array;
                > for(i=0;i<(a.length-2);i+=3)
                > if ((x=MM_findObj(a
                ))!=null){document.MM_sr[j++]=x; if(!x.oSrc)
                > x.oSrc=x.src; x.src=a[i+2];}
                > }
                > //-->
                > </script>
                > </head>
                >
                > <body onLoad="MM_preloadImages('header-bg-bottom-2-dark.jpg')">
                > <div id="headerWrapper">
                > <div class="header">
                > <div class="menu">
                > <p><img src="headerimages/header-bg-top.jpg" width="873"
                > height="69"></p>
                > <p><img src="headerimages/header-bg-bottom-1.jpg" width="128"
                > height="26"><a
                > href="kaleidoscope/kaleidoscope.html" onMouseOut="MM_swapImgRestore()"
                > onMouseOver="MM_swapImage('Image8','','headerimages/header-bg-bottom-2-dark.jpg'
                > ,1)"><img src="headerimages/header-bg-bottom-2-light.jpg" name="Image8"
                > width="246" height="26" border="0"></a><img
                > src="headerimages/header-bg-bottom-3.jpg" width="78" height="26"><img
                > src="headerimages/header-bg-bottom-4.jpg" width="79" height="26"><img
                > src="headerimages/header-bg-bottom-5.jpg" width="81" height="26"><img
                > src="headerimages/header-bg-bottom-3.jpg" width="78" height="26"><span
                > class="style3">
                > <select name="select" class="content" id="select">
                > <option selected>Jump To:</option>
                > <option>Production</option>
                > <option>Design</option>
                > <option>Composing</option>
                > <option>Company Pilot</option>
                > <option>Travel Videos</option>
                > <option>Sound Engineering</option>
                > <option>Writing</option>
                > <option>Portfolio</option>
                > </select>
                > </span></p>
                > </div><!--end menu -->
                > </div><!--end header -->
                > </div> <!--end headerWrapper -->
                >
                > <div id="contentWrapper">
                > <div class="content">
                > <h1>Kaleidoscope Trailer Here</h1>
                > <p> </p>
                > <div class="code">
                > <h2><a href="index.html">Site</a></h2>
                > </div>
                > </div>
                > <div class="content"><div class="code"></div>
                > <!--end code -->
                > </div> <!--end content -->
                > </div> <!--end contentWrapper -->
                >
                > <div id="footerWrapper">
                > <div class="footer">
                > <p class="style3">&copy; 2009 shiny thunder productions, Inc. All Rights
                > Reserved.</p>
                > <p class="style3"> </p>
                > </div>
                > </div>
                >
                > <!--end myfootertext -->
                > </body>
                > </html>
                >