Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Arrow How To Center Web Pages In Dreamweaver CS3?!

    Hi, My name is Jessica.
    Quick Question: How do you center your entire website in Dreamweaver CS3?

    www .AllGreenedUp. Net
    (I encourage you to please look at the source code!)

    'I would like for my website to stay centered, In FireFox & IE browsers.'


    I really need assistance on this! Please help if you have any knowledge
    you can share... It's greatly appreciated! I need to have this website
    in alignment and 'centered' before the end of today!

    (Just in case you need it)
    Here is a sample of some of 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>
    <script type="text/javascript" language="JavaScript1.2" src="stmenu.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Services</title>
    <style type="text/css">
    <!--
    body {
    background-image: url(Images/backgroundmain.jpg);
    background-repeat: repeat;
    }
    #apDiv1 {
    position:absolute;
    left:0px;
    top:2px;
    width:935px;
    height:791px;
    z-index:1;
    }
    #apDiv2 {
    position:absolute;
    left:51px;
    top:250px;
    width:333px;
    height:351px;
    z-index:2;
    }
    .style1 {
    color: #999999;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    }
    .style2 {font-size: 14px}

    }
    -->
    </style></head>

    <body>
    <div id="apDiv1"><img src="Images/Design.jpg" alt="SIP PBX AGU" width="944" height="781" /></div>
    <div id="apDiv2">
    <p class="style1"><span class="style8"> Our Network Design</span> &amp; <span class="style8">Engineering</span> <br />
    -can help you choose the correct elements from today's technology and deploy them to your companies advantages. <br />
    </p>
    <p class="style1"><br />
    </p>
    <p class="style1"><span class="style8">Our technical expertise</span> <br />
    -extends from small Local Area Networks to larger Wide Area Networks &amp; Metropolitan Area Networks in the world.<br />
    <br />
    </p>
    <p class="style1"><br />
    <br />
    text</span> <br />
    more text here<br />
    more of our text here</p>
    </div>
    </script>
    </div>
    </body>
    </html>


    Any input is appreciated, thanks!

  • #2
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Oh, Dreamweaver...

    To center using CSS you need three things:

    - A valid DOCTYPE for your markup (which you have).
    - A width for your container.
    - Margins set to auto.

    We'll wrap your site in a containing div, give it a width and set its margins to auto and you should be good to go:

    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>
    <script type="text/javascript" language="JavaScript1.2" src="stmenu.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Services</title>
    <style type="text/css">
    <!--
    body {
    background-image: url(Images/backgroundmain.jpg);
    background-repeat: repeat;
    }
    
    #wrap {
    	position:relative;
    	margin:0 auto;
    	width:935px;
    }
    
    #apDiv1 {
    position:absolute;
    left:0px;
    top:2px;
    width:935px;
    height:791px;
    }
    #apDiv2 {
    position:absolute;
    left:51px;
    top:250px;
    width:333px;
    height:351px;
    z-index:2;
    }
    .style1 {
    color: #999999;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    }
    .style2 {font-size: 14px}
    
    }
    -->
    </style></head>
    
    <body>
    <div id="wrap">
    <div id="apDiv1"><img src="Images/Design.jpg" alt="SIP PBX AGU" width="944" height="781" /></div>
    <div id="apDiv2">
    <p class="style1"><span class="style8"> Our Network Design</span> &amp; <span class="style8">Engineering</span> <br />
    -can help you choose the correct elements from today's technology and deploy them to your companies advantages. <br />
    </p>
    <p class="style1"><br />
    </p>
    <p class="style1"><span class="style8">Our technical expertise</span> <br />
    -extends from small Local Area Networks to larger Wide Area Networks &amp; Metropolitan Area Networks in the world.<br />
    <br /> 
    </p>
    <p class="style1"><br />
    <br />
    text</span> <br />
    more text here<br />
    more of our text here</p>
    </div>
    </script>
    </div>
    </div>
    </body>
    </html>
    matt | design | blog

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,607
    Thanks
    6
    Thanked 997 Times in 970 Posts
    Quote Originally Posted by msuffern View Post
    We'll wrap your site in a containing div, give it a width and set its margins to auto and you should be good to go:
    That’s not going to work because all the divs are positioned absolutely.

    Try changing the absolute position of #apDiv22 to “relative”, apply margin: auto; as mentioned above and put all the other apDivs inside that one and see if that works. You will probably need more adjustments to the other divs.

    I recommend learning how to hand code HTML and CSS.

  • #4
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Quote Originally Posted by VIPStephan View Post
    That’s not going to work because all the divs are positioned absolutely.
    Did you plug the code I posted into a browser? My test page worked okay (in FF3 and Safari at least). The divs are absolutely positioned, yes (the joy of DW), but I added position:relative to the wrap div to get the others to reference it when positioning themselves:

    Code:
    #wrap {
    	position:relative;
    	margin:0 auto;
    	width:935px;
    }
    I recommend learning how to hand code HTML and CSS.
    Seconded.
    matt | design | blog

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,607
    Thanks
    6
    Thanked 997 Times in 970 Posts
    Quote Originally Posted by msuffern View Post
    Did you plug the code I posted into a browser? My test page worked okay (in FF3 and Safari at least). The divs are absolutely positioned, yes (the joy of DW), but I added position:relative to the wrap div to get the others to reference it when positioning themselves:
    I see. I just looked at their home page and there the div structure seems to be different. And I haven’t tried it but I assume that the divs would move away from the left side of the relatvie container, too, since they have a left position. Best is to just get rid of the positioning at all.

  • #6
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Quote Originally Posted by VIPStephan View Post
    Best is to just get rid of the positioning at all.
    Agreed.

    I definitely need to refine my understanding of position:relative, too. I don't use it often at all, and I have a growing sense that I haven't got my head around it as well as I thought I did.

    Regardless, in this case it works as anticipated.
    matt | design | blog

  • #7
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation

    Quote Originally Posted by msuffern View Post
    Agreed.

    I definitely need to refine my understanding of position:relative, too. I don't use it often at all, and I have a growing sense that I haven't got my head around it as well as I thought I did.

    Regardless, in this case it works as anticipated.
    Hi everyone,

    Thanks for your help.
    Though my results were not successful.
    I tried using actual 'tables' in dreamweaver,
    then aligning them and I still cannot get the
    layers to all center. Any other imput?!
    Its always appreciated!

  • #8
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Can you post the results of our input and/or your attempts in DW? Please remember to use the &#91;CODE&#93;&#91;/CODE&#93; tags when posting code.
    matt | design | blog

  • #9
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by msuffern View Post
    Can you post the results of our input and/or your attempts in DW? Please remember to use the tags when posting code.
    Hi, Msuffern - Thanks for the feedback. I appreciate it.

    Here are the results of your code, after I have added one new DIV layer with text:
    http://i16.photobucket.com/albums/b46/Sayxxoh/Try1.jpg

    This is what I am aiming for:
    http://i16.photobucket.com/albums/b46/Sayxxoh/agu1.jpg

    Here is the code after I added the new DIV containing the white text:
    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>
    <script type="text/javascript" language="JavaScript1.2" src="stmenu.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Services</title>
    <style type="text/css">
    <!--
    body {
    	background-image: url(Images/backgroundmain.jpg);
    	background-repeat: repeat;
    	margin-right: auto;
    	margin-left: auto;
    }
    
    #wrap {
    	position:relative;
    	margin:0 auto;
    	width:935px;
    }
    
    #apDiv1 {
    	position:absolute;
    	left:0px;
    	top:-25px;
    	width:935px;
    	height:791px;
    }
    #apDiv2 {
    	position:absolute;
    	left:53px;
    	top:250px;
    	width:333px;
    	height:351px;
    	z-index:2;
    }
    .style1 {
    color: #999999;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    }
    
    }
    #apDiv3 {
    position:absolute;
    left:791px;
    top:250px;
    width:333px;
    height:351px;
    z-index:2;
    }
    .style1 {
    color: #999999;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    }
    .style3 {color: #FFFFFF}
    -->
    </style></head>
    
    <body>
    <div id="wrap">
    <div id="apDiv1"><img src="Images/Design.jpg" alt="SIP PBX AGU" width="944" height="781" /></div>
    <div id="apDiv2">
    <p class="style1"><span class="style8"> Our Network Design</span> &amp; <span class="style8">Engineering</span> <br />
    -can help you choose the correct elements from today's technology and deploy them to your companies advantages. <br />
    </p>
    <p class="style1"><br />
    </p>
    <p class="style1"><span class="style8">Our technical expertise</span> <br />
    -extends from small Local Area Networks to larger Wide Area Networks &amp; Metropolitan Area Networks in the world.<br />
    <br /> 
    </p>
    <p class="style1"><br />
    <br />
    All Greened Up </span> <br />
    -ensures maximum performance, stability, <br />
    and security that your business depends on.</p>
    </div>
    </script>
    </div>
    <div id="apDiv3">
      <p></p>
      <p class="style1"><span class="style8">SIP Phone Systems <br />
        T1 &amp; DSL extensions </p>
      <p class="style3">Network Security Audits<br />
        Network Design &amp; Support, </p>
      <p class="style3">Data Back-Up &amp; Recovery <br />
        Internet Video Monitoring </p>
      <p class="style3">Wi-Fi Hotspot Installations <br />
        Complete Computer Repairs </p>
      <p class="style3">Great Web Development <br />
      Firewalls' &amp; VPN'S </p>
    </div>
    </div>
    </body>
    </html>
    Should I be creating/including the 'apDiv3' with a wrap?
    Or, how exactly did you get 'apDiv2' where it is centered?
    (So I can replicate it and modify them on the other pages to my website.)



    You seriously have no idea how much I appreciate you help.
    Its great, your great, thanks so much for any feedback!

  • #10
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Validate your page. You'll find errors in your HTML, among them an extra closing div tag, which was causing the problem:

    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>
    <script type="text/javascript" language="JavaScript1.2" src="stmenu.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Services</title>
    <style type="text/css">
    
    body {
    	background-image: url(Images/backgroundmain.jpg);
    	background-repeat: repeat;
    	margin-right: auto;
    	margin-left: auto;
    }
    
    #wrap {
    	position:relative;
    	margin:0 auto;
    	width:935px;
    }
    
    #apDiv1 {
    	position:absolute;
    	left:0px;
    	top:-25px;
    	width:935px;
    	height:791px;
    }
    #apDiv2 {
    	position:absolute;
    	left:53px;
    	top:250px;
    	width:333px;
    	height:351px;
    	z-index:2;
    }
    .style1 {
    color: #999999;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    }
    
    }
    #apDiv3 {
    position:absolute;
    left:791px;
    top:250px;
    width:333px;
    height:351px;
    z-index:2;
    }
    .style1 {
    color: #999999;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    }
    .style3 {color: #FFFFFF}
    
    </style></head>
    
    <body>
    <div id="wrap">
    <div id="apDiv1"><img src="Images/Design.jpg" alt="SIP PBX AGU" width="944" height="781" /></div>
    <div id="apDiv2">
    <p class="style1"><span class="style8"> Our Network Design</span> &amp; <span class="style8">Engineering</span> <br />
    -can help you choose the correct elements from today's technology and deploy them to your companies advantages. <br />
    </p>
    <p class="style1"><br />
    </p>
    <p class="style1"><span class="style8">Our technical expertise</span> <br />
    -extends from small Local Area Networks to larger Wide Area Networks &amp; Metropolitan Area Networks in the world.<br />
    <br /> 
    </p>
    <p class="style1"><br />
    <br />
    All Greened Up </span> <br />
    -ensures maximum performance, stability, <br />
    and security that your business depends on.</p>
    </div>
    </script>
    <!-- </div> -->
    <div id="apDiv3">
      <p></p>
      <p class="style1"><span class="style8">SIP Phone Systems <br />
        T1 &amp; DSL extensions </p>
      <p class="style3">Network Security Audits<br />
        Network Design &amp; Support, </p>
      <p class="style3">Data Back-Up &amp; Recovery <br />
        Internet Video Monitoring </p>
      <p class="style3">Wi-Fi Hotspot Installations <br />
        Complete Computer Repairs </p>
      <p class="style3">Great Web Development <br />
      Firewalls' &amp; VPN'S </p>
    </div>
    </div>
    </body>
    </html>
    You have other errors as well. It's good practice to use the validator often, like a spell check. It's a good way to catch those easily overlooked mistakes.
    matt | design | blog


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •