6 Replies Latest reply on Feb 28, 2010 2:18 PM by MichaelCo

    It's good but it's not right

    MichaelCo Level 1

      I have completed my logo and nav bar section on my pages and now want the main page (960 px)to consist of two divs( 240px and 720px)

       

      When I am manipulating my page in dreamweaver, the right side div is top right and my left side div is on next line on left.

       

      When I preview in IE or Firefox it looks ok and they line up side by side. So it would be ok to leave it here. However, I like to see the changes as I am going along so would prefer to see what is hapening raher than having to preview in browser for every little change.

       

      Thanks for all who helped wth my previous question

       

      Michael

        • 1. Re: It's good but it's not right
          hans-g. Adobe Community Professional & MVP

          Hi,

           

          let me see what you're talking about with a link to your website.

           

          Hans-G.

          • 2. Re: It's good but it's not right
            MichaelCo Level 1

            Hans G

             

            thanks for your reply

             

            My original site is already up there and the one I am working with is a revamp so I can't put itup 'til it is more complete. I can send you the html and css code if that helps.

             

            Michael

            • 3. Re: It's good but it's not right
              hans-g. Adobe Community Professional & MVP

              Hi Michael,

               

              ok, let's try it.

               

              Hans-G.

              1 person found this helpful
              • 4. Re: It's good but it's not right
                MichaelCo Level 1

                HTML is

                 

                 

                 

                <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

                 

                "http://www.w3.org/TR/html4/loose.dtd">

                 

                <html>

                 

                <head>

                 

                <title>dkb</title>

                 

                <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

                 

                <style type="text/css">

                 

                <!--

                 

                body {

                 

                    background-color: #FFFFFF;

                 

                }

                 

                -->

                 

                </style>

                 

                <link href="css/layout.css" rel="stylesheet" type="text/css">

                 

                <script type="text/javascript" src="p7pm/p7popmenu.js"></script>

                 

                <style type="text/css" media="screen">

                 

                <!--

                 

                @import url("p7pm/p7pmh0.css");

                 

                -->

                 

                </style>

                 

                </head>

                 

                <body onLoad="P7_initPM(1,0,1,-20,10)">

                 

                <div id="wrapper">
                  <div id="header"> </div>
                  <div id="navhold">
                    <ul id="p7PMnav">
                      <li><a href="#">Section
                          1</a></li>
                      <li><a href="#" class="p7PMtrg">Section
                          2</a>
                          <ul>
                            <li><a href="#">Link
                                2.1</a></li>
                            <li><a href="#" class="p7PMtrg">Link
                                2.2</a>
                                <ul>
                                  <li><a href="#">Link
                                      2.2.1</a></li>
                                  <li><a href="#">Link
                                      2.2.2</a></li>
                                  <li><a href="#">Link
                                      2.2.3</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Link
                                2.3</a></li>
                          </ul>
                      </li>
                      <li><a href="#" class="p7PMtrg">Section
                          3</a>
                          <ul>
                            <li><a href="#">Link
                                3.1</a></li>
                            <li><a href="#">Link
                                3.2</a></li>
                            <li><a href="#">Link
                                3.3</a></li>
                          </ul>
                      </li>
                      <li><a href="#">Section
                          4</a></li>
                      <!--[if lte IE 6]><style>#p7PMnav a{height:1em;}#p7PMnav li{height:1em;}#p7PMnav ul li{float:left;clear:both;width:100%}</style><![endif]-->
                      <!--[if IE 6]><style>#p7PMnav ul li{clear:none;}</style><![endif]-->
                      <!--[if IE 7]><style>#p7PMnav a{zoom:100%;}#p7PMnav ul li{float:left;clear:both;width:100%;}</style><![endif]-->
                    </ul>
                  </div>
                  <div class=".clear"></div>
                  <div class="bodyright">
                    <p> </p>
                    <p align="center"><img src="images/arlington.jpg" width="129" height="103"> <img src="images/boston_black.jpg" width="129" height="103"> <img src="images/boston_ivory.jpg" width="129" height="103">  <img src="images/boston_latte.jpg" width="129" height="103">
                    <p>
                    </p>
                    Lorem
                      ipsum dolor
                      sit amet, consetetur
                      sadipscing elitr, sed
                      diam nonumy eirmod
                      tempor invidunt ut
                      labore et dolore magna
                      aliquyam erat, sed
                      diam voluptua. At vero
                      eos et accusam et justo
                      duo dolores et ea rebum.
                      Stet clita kasd gubergren,
                      no sea takimata sanctus
                      est Lorem ipsum dolor
                      sit amet. Lorem ipsum
                      dolor sit amet, consetetur
                      sadipscing elitr, sed
                      diam nonumy eirmod
                      tempor invidunt ut
                      labore et dolore magna
                      aliquyam erat, sed
                      diam voluptua. At vero
                      eos et accusam et justo
                      duo dolores et ea rebum.
                      Stet clita kasd gubergren,
                      no sea takimata sanctus
                      est Lorem ipsum dolor
                      sit amet. Lorem ipsum
                      dolor sit amet, consetetur
                      sadipscing elitr, sed
                      diam nonumy eirmod
                      tempor invidunt ut
                      labore et dolore magna
                      aliquyam erat, sed
                      diam voluptua. At vero
                      eos et accusam et justo
                    duo dolores et ea rebum. </p>
                  </div>
                  <div id="bodyarea">
                    <div class="bodyleft">Lorem
                        ipsum dolor sit
                        amet, consetetur
                        sadipscing elitr,
                        sed diam nonumy
                        eirmod tempor invidunt
                        ut labore et dolore
                        magna aliquyam
                        erat, sed diam
                        voluptua. At vero
                        eos et accusam
                        et justo duo dolores
                        et ea rebum. Stet
                        clita kasd gubergren,
                        no sea takimata
                        sanctus est Lorem
                        ipsum dolor sit
                        amet. Lorem ipsum
                        dolor sit amet,
                        consetetur sadipscing
                        elitr, sed diam
                        nonumy eirmod tempor
                        invidunt ut labore
                        et dolore magna
                        aliquyam erat,
                        sed diam voluptua.
                        At vero eos et
                        accusam et justo
                        duo dolores et
                        ea rebum. Stet
                        clita kasd gubergren,
                        no sea takimata
                        sanctus est Lorem
                        ipsum dolor sit
                        amet. Lorem ipsum
                        dolor sit amet,
                      consetetur</div>
                      <p align="center"> <img src="images/arlington.jpg" width="129" height="103"> <img src="images/boston_black.jpg" width="129" height="103"> <img src="images/boston_ivory.jpg" width="129" height="103"> <img src="images/boston_latte.jpg" width="129" height="103"> <img src="images/boston_red.jpg" width="129" height="103"> </p>
                      <p>Lorem ipsum dolor
                        sit amet, consetetur
                        sadipscing elitr,
                        sed diam nonumy
                        eirmod tempor invidunt
                        ut labore et dolore
                        magna aliquyam
                        erat, sed diam
                        voluptua. At vero
                        eos et accusam
                        et justo duo dolores
                        et ea rebum. Stet
                        clita kasd gubergren,
                        no sea takimata
                        sanctus est Lorem
                        ipsum dolor sit
                        amet. Lorem ipsum
                        dolor sit amet,
                        consetetur sadipscing
                        elitr, sed diam
                        nonumy eirmod tempor
                        invidunt ut labore
                        et dolore magna
                        aliquyam erat,
                        sed diam voluptua.
                        At vero eos et
                        accusam et justo
                        duo dolores et
                        ea rebum. Stet
                        clita kasd gubergren,
                        no sea takimata
                        sanctus est Lorem
                        ipsum dolor sit
                        amet. Lorem ipsum
                        dolor sit amet,
                        consetetur sadipscing
                        elitr, sed diam
                        nonumy eirmod tempor
                        invidunt ut labore
                        et dolore magna
                        aliquyam erat,
                        sed diam voluptua.
                        At vero eos et
                        accusam et justo
                        duo dolores et
                        ea rebum. </p>
                      <p>Stet
                          clita kasd gubergren,
                          no sea takimata
                          sanctus est Lorem
                          ipsum dolor sit
                          amet.</p>
                      <p> </p>
                      <p>Lorem ipsum dolor
                        sit amet, consetetur
                        sadipscing elitr,
                        sed diam nonumy
                        eirmod tempor invidunt
                        ut labore et dolore
                        magna aliquyam
                        erat, sed diam
                        voluptua. At vero
                        eos et accusam
                        et justo duo dolores
                        et ea rebum. Stet
                        clita kasd gubergren,
                        no sea takimata
                        sanctus est Lorem
                        ipsum dolor sit
                        amet. Lorem ipsum
                        dolor sit amet,
                        consetetur sadipscing
                        elitr, sed diam
                        nonumy eirmod tempor
                        invidunt ut labore
                        et dolore magna
                        aliquyam erat,
                        sed diam voluptua.
                        At vero eos et
                        accusam et justo
                        duo dolores et
                        ea rebum. Stet
                        clita kasd gubergren,
                        no sea takimata
                        sanctus est Lorem
                        ipsum dolor sit
                        amet. Lorem ipsum
                        dolor sit amet,
                        consetetur sadipscing
                        elitr, sed diam
                        nonumy eirmod tempor
                        invidunt ut labore
                        et dolore magna
                        aliquyam erat,
                        sed diam voluptua.
                        At vero eos et
                        accusam et justo
                        duo dolores et
                        ea rebum. Stet
                        clita kasd gubergren,
                        no sea takimata
                        sanctus est Lorem
                        ipsum dolor sit
                        amet.</p>
                  </div>
                </div>
                </body>
                </html>

                 

                 

                Code is

                 

                 

                 

                * {
                    margin: 10px auto 0px auto;
                    padding: 0px;
                }
                #wrapper {
                    width: 960px;
                    margin: 0px auto;
                    border-right-width: 5px;
                    border-left-width: 5px;
                    border-right-style: solid;
                    border-left-style: solid;
                    border-right-color: #0000FF;
                    border-left-color: #0000FF;
                }
                #header {
                    background-image: url(../images/designer_kitchens_logo.gif);
                    height: 134px;
                    width: 960px;
                }
                #bodyarea {
                    width: 960px;
                }

                 

                #navhold {
                    background-color: #0099FF;
                    width: 960px;
                    height:34px;
                    margin-right: auto;
                    margin-left: auto;
                    margin-top: 0px;
                    margin-bottom: 0px;
                }
                .clear {
                clear:both;
                }

                 


                .bodyleft {
                    background-color: #00FF33;
                    width: 240px;
                    float: left;
                    font-family: Arial, Helvetica, sans-serif;
                    margin-top: 0px;
                    margin-right: auto;
                    margin-bottom: 0px;
                    margin-left: auto;
                }

                 

                .bodyright {
                    background-color: #FF6600;
                    width: 720px;
                    float: right;
                    margin-top: 0px;
                    margin-right: auto;
                    margin-bottom: 0px;
                    margin-left: auto;
                }

                 


                hope this helps

                • 5. Re: It's good but it's not right
                  hans-g. Adobe Community Professional & MVP

                  Hi Michael,

                   

                  you wrote you was "manipulating my page in dreamweaver". In your code I often see "P7". Does it mean "projectseven"?  I beg your pardon but shouldn't  you first ask these peoples?

                   

                  Hans-G.

                   

                  P.S.

                  If I am wrong, please excuse my idea and come back again.

                  1 person found this helpful
                  • 6. Re: It's good but it's not right
                    MichaelCo Level 1

                    Hi Michael,

                     

                    you wrote  you was "manipulating my page in dreamweaver". In your code I often see  "P7". Does it mean "projectseven"?  I beg your pardon but shouldn't  you  first ask these peoples?

                     

                    Hans-G.

                     

                    P.S.

                    If I am wrong, please excuse my  idea and come back again.

                     

                    Hans G

                     

                    It does mean project seven. I am using dreamweaver and inserting projectseven in to a div.

                     

                    I think that it is me who is wrong.

                     

                    Yet again,I had some stuff in the wrong div so I think I have sorted that problem and it is time to move on to my next mess. I thought that I was mastering this css thing but very often what I see in the design view is not what I am getting when I view in browser.

                     

                    Thamk you for your interest, it is people like you who give me the will to go on.