23 Replies Latest reply on Sep 25, 2011 11:47 AM by emailblainhere

    Dreamweaver 8 help with aligning Layers

    MrCairns

      Hi all

      I am completely stuck I want my layer AP (tag) to display in the center of my browser and any browser it displays in?????

      I need help please I don’t know how to set this to the center using CSS

      Thanks

        • 1. Re: Dreamweaver 8 help with aligning Layers
          MurraySummers Level 8

          The way to do this is simple, but would depend largely on what else you have on your page.  Can you post a link to the live page so we can see that?  And can you tell us which absolutely positioned element ("layer") you are concerned about?

          • 2. Re: Dreamweaver 8 help with aligning Layers
            MrCairns Level 1

            Hi

            Firstly being new to this thanks for such a swift response and secondly how do i upload a file on here as i cant upload the files yet have no webspace sorry

             

            I have copied the code for you, is that ok???

             

            Its the layer 2 im desperate to align it to the center

             

            Thanks

             

            <!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=iso-8859-1" />
            <title>home</title>
            <link href="background.css" rel="stylesheet" type="text/css" />
            <style type="text/css">
            <!--
            .style1 {
            color: #FFFFFF;
            font-family: Verdana, Arial, Helvetica, sans-serif;
            font-weight: bold;
            position: inherit;
            }
            #Layer1 #Layer2 {
            background-image: url(Images/460.gif);
            }
            -->
            </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[i])&&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[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_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[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
            }
            //-->
            </script>
            <link href="style.css" rel="stylesheet" type="text/css" />
            <style type="text/css">
            <!--
            #Layer2 {
            position:absolute;
            left:175px;
            top:152px;
            width:553px;
            height:209px;
            z-index:1;
            }
            -->
            </style>
            </head>

            <body class="background" id="Layer1" onload="MM_preloadImages('Images/Year_7_button_over.png','Images/Year_8_button_over.png') ">
            <div id="Layer2"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('YEAR7','','Images/Year_7_button_over.png',1)"><img src="Images/Year_7_button.png" alt="YEAR&amp;" name="YEAR7" width="200" height="80" border="0" id="YEAR7" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Year8','','Images/Year_8_button_over.png',1)"><img src="Images/Year_8_button.png" alt="Year8" name="Year8" width="200" height="80" border="0" id="Year8" /></a></div>
            </body>
            </html>

            • 3. Re: Dreamweaver 8 help with aligning Layers
              MurraySummers Level 8

              Is there a good reason why you are using positioning for that at all?  For example, if you replace your Layer2 rule with this one, you will get exactly what you want with no positioning -

               

               

              #Layer2 {

              width:553px;

              height:209px;

              margin:152px auto;

              }

              • 4. Re: Dreamweaver 8 help with aligning Layers
                MrCairns Level 1

                Fantastic

                 

                Thanks a million for that, tried at diff screen resolutions and bang in the centre

                 

                only thing is i want the page to not have a scroll down the right hand side

                 

                I was trying to backspace the page back up as it only needs to be around 600 in height as this is the layer height??

                 

                Any ideas

                 

                Really appreciate the help BTW

                 

                 

                Stevielee Cairns

                • 5. Re: Dreamweaver 8 help with aligning Layers
                  MurraySummers Level 8

                  The div will be 152px from the top of the viewport.

                   

                  You could try changing the CSS to this -

                   

                  #Layer2 {

                  width:553px;

                  height:209px;

                  margin:152px auto 0;

                  }

                   

                  That will make your page only be 361px vertical height (of course depending on what else you have on the page).

                  • 6. Re: Dreamweaver 8 help with aligning Layers
                    MrCairns Level 1

                    Fantastic

                     

                    Thanks a million for that, tried at diff screen resolutions and bang in the centre

                     

                    only thing is i want the page to not have a scroll down the right hand side

                     

                    I was trying to backspace the page back up as it only needs to be around 600 in height as this is the layer height??

                     

                    Any ideas

                     

                    Really appreciate the help BTW

                     

                     

                    Code below

                     

                    <!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=iso-8859-1" />
                    <title>home</title>
                    <link href="background.css" rel="stylesheet" type="text/css" />
                    <style type="text/css">
                    <!--
                    #Layer1 #Layer2 {
                    background-image: url(Images/460.gif);
                    }
                    -->
                    </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[i])&&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[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_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[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
                    }
                    //-->
                    </script>
                    <link href="style.css" rel="stylesheet" type="text/css" />
                    <style type="text/css">
                    <!--
                    #Layer2 {
                    width:602px;
                    height:600px;
                    margin-top: 0px;
                    margin-right: auto;
                    margin-bottom: 152px;
                    margin-left: auto;
                    }
                    .style2 {
                    font-family: Verdana, Arial, Helvetica, sans-serif;
                    font-weight: bold;
                    color: #FFFFFF;
                    }

                    -->
                    </style>
                    </head>

                    <body class="background" id="Layer1" onload="MM_preloadImages('Images/Year_7_button_over.png','Images/Year_8_button_over.png', 'Images/OCR_Over.png')">
                    <div id="Layer2">
                      <div align="center"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('YEAR7','','Images/Year_7_button_over.png',1)"><img src="Images/Year_7_button.png" alt="YEAR&amp;" name="YEAR7" width="200" height="80" border="0" id="YEAR7" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Year8','','Images/Year_8_button_over.png',1)"><img src="Images/Year_8_button.png" alt="Year8" name="Year8" width="200" height="80" border="0" id="Year8" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('OCR','','Images/OCR_Over.png',1)"><img src="Images/OCR.png" alt="OCR" name="OCR" width="200" height="80" border="0" id="OCR" /></a></div>
                      <p> </p>
                      <p align="center" class="style2">Welcome to ICT </p>
                      <p align="center" class="style2">Please click on the  button that you need </p>
                      <p align="center" class="style2">If you are in year 7  click the year 7 button </p>
                      <p align="center" class="style2">If you are in year 8  click the year 8 button </p>
                      <p align="center" class="style2">If you are working on  OCR units click the OCR button</p>
                      <p align="center" class="style2">SIMPLES!</p>
                    </div>
                    </body>
                    </html>

                    • 7. Re: Dreamweaver 8 help with aligning Layers
                      MrCairns Level 1

                      Hi

                       

                      It is just where i want it now

                       

                      here is the finished code

                       

                      I am very grateful for all your help i may be posting more in the future

                       

                       

                       







                       



                       

                      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_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[i]))!=null){document.MM_sr[j+]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i2];}

                      }

                      //-->



                       

                      <!--

                      #Layer2

                      .style2 {

                      font-family: Verdana, Arial, Helvetica, sans-serif;

                      font-weight: bold;

                      color: #FFFFFF;

                      }

                      -->




                       


                       

                      !Images/Year_7_button.png|id=YEAR7|height=80|alt=YEAR&|width=200|name=YEAR7|src=Images/Yea r_7_button.png|border=0!!Images/Year_8_button.png|id=Year8|height=80|alt=Year8|width=200|name=Year8|src=Images/Yea r_8_button.png|border=0!

                      !Images/OCR.png|id=OCR|height=80|alt=OCR|width=200|name=OCR|src=Images/OCR.png|border=0!

                       


                      Welcome to ICT


                      Please click on the button that you need


                      If you are in year 7 click the year 7 button


                      If you are in year 8 click the year 8 button


                      If you are working on OCR units click the OCR button


                      SIMPLES!




                       

                       

                       

                      Stevielee Cairns

                      • 8. Re: Dreamweaver 8 help with aligning Layers
                        MrCairns Level 1

                        Thanks for all your help

                         

                        So this will def work in screen resolution??

                         

                         

                         

                        Stevielee Cairns

                        • 9. Re: Dreamweaver 8 help with aligning Layers
                          emailblainhere

                          Hi Murray,

                           

                          I found your answer regarding centering layers and found it to be quite helpful! However when I applied it to my code, it worked, but my 2nd layer has been forced downward to the bottom of layer 1. Originally, it was layered ontop of layer 1 where it needs to be. My layer 1 is an image of a picture frame. Layer 2 is a logo and 3 buttons. So, I need both layers to move simultaneously, and they both do, but how can I force layer 2 back into it's orginal position?

                           

                          Any ideas for me?

                           

                          Would appreciate any tips.


                          thank you so much!

                          • 10. Re: Dreamweaver 8 help with aligning Layers
                            MurraySummers Level 8

                            Which DW are you using, and what is your code on the page?  We need to see both the HTML and the CSS, please.

                            • 11. Re: Dreamweaver 8 help with aligning Layers
                              MurraySummers Level 8

                              So this will def work in screen resolution??

                               

                              This may surprise you but screen resolution has nothing to do with how your page renders.  Differing screen resolutions only affect the width you would achieve on a maximized browser viewport.  In other words, if you maximize your browser, it will be twice as wide on a 2048 screen as it is on a 1024 screen.

                               

                              An HTML page block element that is bare on a page and is centered with the CSS I recommended will be centered in any width viewport.

                              • 12. Re: Dreamweaver 8 help with aligning Layers
                                emailblainhere Level 1

                                I'm using Dreamweave 8.

                                 

                                My code below:

                                 






                                 



                                 

                                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_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[i]))!=null){document.MM_sr[j+]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i2];}

                                }

                                //-->





                                 


                                 

                                 


                                   

                                !images/silver-frame.jpg|height=697|width=582|src=images/silver-frame.jpg!


                                   

                                   [ | Dudes.html]  [ | Chicks.html]  [ | Contact.html]


                                 



                                 


                                 

                                !images/crichtonhill-frontpage.jpg|height=37|width=120|src=images/crichtonhill-frontpage.j pg!


                                 

                                !images/CrichtonHill-Logo.jpg|height=340|width=284|src=images/CrichtonHill-Logo.jpg!



                                 


                                 

                                 

                                 

                                !images/dudes.jpg|id=Image1|height=50|onmouseout=MM_swapImgRestore()|width=78|src=images/d udes.jpg|border=0|onmouseover=MM_swapImage(!         !images/chicks.jpg|id=Image2|height=50|onmouseout=MM_swapImgRestore()|width=80|src=images/ chicks.jpg|border=0|onmouseover=MM_swapImage(!         !images/contact.jpg|id=Image3|height=50|onmouseout=MM_swapImgRestore()|width=98|src=images /contact.jpg|border=0|onmouseover=MM_swapImage(!</p>

                                </div>

                                </body>

                                </html

                                • 13. Re: Dreamweaver 8 help with aligning Layers
                                  emailblainhere Level 1

                                  Sorry, not sure why my that last post omitted most of the code, I'll try again:

                                   

                                  <!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=ISO-8859-1" />
                                  <title>Crichton Hill Corp</title>
                                  <style type="text/css">
                                  <!--
                                  body {
                                      background-color: #000000;
                                  }
                                  #Layer1 {
                                      left:0px;
                                      top:0px;
                                      width:1000px;
                                      height:800px;
                                      margin: auto;
                                      z-index:1;
                                  }
                                  #Layer2 {
                                      left:310px;
                                      top:104px;
                                      width:380px;
                                      height:493px;
                                      margin: auto;
                                      z-index:2;
                                  }
                                  -->
                                  </style>
                                  <script type="text/JavaScript">
                                  <!--
                                  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_swapImgRestore() { //v3.0
                                    var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
                                  }

                                   

                                  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_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[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
                                  }
                                  //-->
                                  </script>
                                  </head>

                                   

                                  <body onload="MM_preloadImages('images/dudes-over.jpg','images/chicks-over.jpg','images/contact -over.jpg')">
                                  <div id="Layer1">
                                    <div align="center">
                                      <p><img src="images/silver-frame.jpg" width="582" height="697" /></p>
                                      <p>   <a href="Dudes.html"></a>  <a href="Chicks.html"></a>  <a href="Contact.html"></a></p>
                                    </div>
                                  </div>
                                  <div id="Layer2">
                                    <p><img src="images/crichtonhill-frontpage.jpg" width="120" height="37" /></p>
                                    <p align="center"><img src="images/CrichtonHill-Logo.jpg" width="284" height="340" /><br />
                                    </p>
                                    <p align="center"><a href="Dudes.html"><img src="images/dudes.jpg" width="78" height="50" border="0" id="Image1" onmouseover="MM_swapImage('Image1','','images/dudes-over.jpg',1)" onmouseout="MM_swapImgRestore()" /></a>         <a href="Chicks.html"><img src="images/chicks.jpg" width="80" height="50" border="0" id="Image2" onmouseover="MM_swapImage('Image2','','images/chicks-over.jpg',1)" onmouseout="MM_swapImgRestore()" /></a>         <a href="Contact.html"><img src="images/contact.jpg" width="98" height="50" border="0" id="Image3" onmouseover="MM_swapImage('Image3','','images/contact-over.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></p>
                                  </div>
                                  </body>
                                  </html>

                                  • 14. Re: Dreamweaver 8 help with aligning Layers
                                    MurraySummers Level 8

                                    Place this code into a page in your site and see if that's what you want -

                                     

                                    <!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=ISO-8859-1" />

                                    <title>Crichton Hill Corp</title>

                                    <style type="text/css">

                                    <!--

                                    body {

                                    background-color: #000000;

                                    }

                                    #frame {

                                    width:372px;

                                    margin: auto;

                                    background-image:url(images/silver-frame.jpg);

                                    background-repeat:no-repeat;

                                    background-position:center;

                                    padding:20px 105px;

                                    }

                                    #frame p {

                                    text-align:center;

                                    }

                                    #frame img.pic {

                                    display:block;

                                    margin: 20px auto;

                                    }

                                    -->

                                    </style>

                                    <script type="text/JavaScript">

                                    <!--

                                    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_swapImgRestore() { //v3.0

                                      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

                                    }

                                     

                                    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_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[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

                                    }

                                    //-->

                                    </script>

                                    </head>

                                     

                                    <body onload="MM_preloadImages('images/dudes-over.jpg','images/chicks-over. jpg','images/contact-over.jpg')">

                                    <div id="frame"> <img src="images/crichtonhill-frontpage.jpg" width="120" height="37" /> <img src="images/CrichtonHill-Logo.jpg" width="284" height="340" class="pic" />

                                      <p><a href="Dudes.html"><img src="images/dudes.jpg" width="78" height="50" border="0" id="Image1" onmouseover="MM_swapImage('Image1','','images/dudes-over.jpg',1)" onmouseout="MM_swapImgRestore()" /></a> <a href="Chicks.html"><img src="images/chicks.jpg" width="80" height="50" border="0" id="Image2" onmouseover="MM_swapImage('Image2','','images/chicks-over.jpg',1)" onmouseout="MM_swapImgRestore()" /></a> <a href="Contact.html"><img src="images/contact.jpg" width="98" height="50" border="0" id="Image3" onmouseover="MM_swapImage('Image3','','images/contact-over.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></p>

                                    </div>

                                    </body>

                                    </html>

                                     

                                    Nothing very exotic there....

                                    • 15. Re: Dreamweaver 8 help with aligning Layers
                                      emailblainhere Level 1

                                      Yes, thank you, it worked, but now the frame graphic is being cut off at the top and the bottom for some reason. How do we remedy that so that the frame graphic fits within the frame div tag?

                                      • 16. Re: Dreamweaver 8 help with aligning Layers
                                        MurraySummers Level 8

                                        Add the height:800px; property/value pair back to the rule for "#frame".

                                        • 17. Re: Dreamweaver 8 help with aligning Layers
                                          emailblainhere Level 1

                                          What would the exact code be? I'm not sure I'm getting it. I've added the height in the code and it's messing it all up. Is there another line of code I'm missing?

                                           

                                          Thanks a million by the way!!!!!!!!

                                           

                                          Blain_

                                           

                                          Sent from my iPhone:)

                                          • 18. Re: Dreamweaver 8 help with aligning Layers
                                            MurraySummers Level 8

                                            #frame {

                                            height:800px;

                                            width:372px;

                                            margin: auto;

                                            background-image:url(images/silver-frame.jpg);

                                            background-repeat:no-repeat;

                                            background-position:center;

                                            padding:20px 105px;

                                            }

                                            • 19. Re: Dreamweaver 8 help with aligning Layers
                                              emailblainhere Level 1

                                              Thank you Thank you Thank you!!!

                                              Very much appreciate your help, Murray.

                                               

                                              Blain_

                                               

                                              Sent from my iPhone:)

                                              • 20. Re: Dreamweaver 8 help with aligning Layers
                                                MurraySummers Level 8

                                                I received your PM message -

                                                 

                                                "...the placement of the second layer is overlapping the top of the bottom layer and not sure how to remedy that so it fits within the frame."

                                                 

                                                First, there are no 'layers' on the page any longer.  You used absolute positioning originally (thus, layers), but I removed all of it because it was unnecessary.  So, no 'layers'.

                                                 

                                                Next, all you need to do to position things correctly on your page would be to add some top margin to the first image in the div#frame, which will push it and all subsequent images down within that container.  For example, I changed this -

                                                 

                                                <div id="frame"> <img src="images/crichtonhill-frontpage.jpg" width="120" height="37" />

                                                 

                                                to this -

                                                 

                                                <div id="frame"> <img src="images/crichtonhill-frontpage.jpg" width="120" height="37" style="margin-top:168px;" />

                                                 

                                                And that seemed to do the trick.  Did it work for you?

                                                • 21. Re: Dreamweaver 8 help with aligning Layers
                                                  emailblainhere Level 1

                                                  Yes, it worked!!! Wow! Thank you again and again! You have no idea how much I appreciate your help. So very much!

                                                  Ok, one last question: How do we center the '3' buttons at the bottom? See how 'Dudes' 'Chicks' & 'Contact' are off to the left just a bit? Do we just add another 'margin' code to it to center those within the frame?

                                                   

                                                  Thank You So Much!

                                                   

                                                  Blain_

                                                  • 22. Re: Dreamweaver 8 help with aligning Layers
                                                    MurraySummers Level 8

                                                    Yeah - add left margin to the left-most image to tweak to the center.

                                                    • 23. Re: Dreamweaver 8 help with aligning Layers
                                                      emailblainhere Level 1

                                                      Great! Thanks again for all your help.