9 Replies Latest reply on Nov 1, 2010 1:08 PM by Nancy OShea

    dreamweaver bug? or simple div problem?

    gespinha Level 1

      Hi there

      I`ve got the following 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>Untitled Document</title>
      <style type="text/css">
      body {padding:0 auto; margin:0 auto; background:#FFF repeat-x top}

      div#master_enter{width:1024px; height:768px; background:#F00); margin:0 auto}
      div#master{ width:1024px; height:auto}

      div#enterButton_selection{width:62px; height:17px; margin:478px 0px 0px 468px; padding:1px 0px 0px 0px; text-align:center; border:solid 1px #FFF; background:#87d9ff; filter:alpha(opacity=20); opacity:0.2; font-family:"Berlin Sans FB", Calibri, Arial; font-size:12px; color:#FFF}
      div#enterButton_selection:hover{width:62px; height:17px; margin:478px 0px 0px 468px; padding:1px 0px 0px 0px; text-align:center; border:solid 1px #FFF; background:#87d9ff; filter:alpha(opacity=60); opacity:0.6; font-family:"Berlin Sans FB", Calibri, Arial; font-size:12px; color:#FFF; text-decoration:underline}

      </style>
      </head>

      <body>
      <div id="master_enter">
           <div id="enterButton_selection">Enter</div>
      </div>
      </body>
      </html>


      My background should have an image there repeating X and the master_enter should have another image to.

      My problem is that when I preview the page, master_enter div apears down and very low at the page and it sould keep behind the enterButton_selection div.

      Whats happening?
      Any solution?

      Thanks

        • 1. Re: dreamweaver bug? or simple div problem?
          dan hop Level 1

          Somebody's going to ask you what the url of your page is so they can look at it on their own browser.

          Just as well post it...

           

          dan h

          • 2. Re: dreamweaver bug? or simple div problem?
            gespinha Level 1

            The web site is not built yet, so I don`t have a URL to it yet. But my problem now can be corrected through my code up there, just need the help for it, becuase I can`t see where the problem is

            • 3. Re: dreamweaver bug? or simple div problem?
              John Waller Adobe Community Professional & MVP
              function(){return A.apply(null,[this].concat($A(arguments)))}

              body {padding:0 auto; margin:0 auto; background:#FFF repeat-x top}


              My background should have an image there repeating X and the master_enter should have another image to.

               

              You haven't specified an image so no image will show.

               

              The rule just says white background color (background: #FFF).

               

              The repeat-x is ignored since there's no image to repeat.

              • 4. Re: dreamweaver bug? or simple div problem?
                gespinha Level 1

                I know that, I configured a white background because I cant send files through here and my images aren`t alocated at a server yet.

                • 5. Re: dreamweaver bug? or simple div problem?
                  osgood_ Level 8

                  Gespinha wrote:


                  My problem is that when I preview the page, master_enter div apears down and very low at the page and it sould keep behind the enterButton_selection div.

                   

                  The #master_enter <div> appears down and very low on the page because you have a top-margin of 478px set on the #enterButton_selection <div>????

                   

                  Not sure what you're trying to do?

                  • 6. Re: dreamweaver bug? or simple div problem?
                    gespinha Level 1

                    I`ve found a solution.

                     

                    An expensive solution (it takes a bit more time to load the page) but it works fine.

                     

                     

                    As you sould know, strangeling a div within a table row or column with margins (if the width of this column/row is 400px and the height 200px and the button it self has a width of 100 and a height of 50px, then insert a margin of 150px right and left and 125px top and bottom so there is no more space open un the column/row) would make it unmovable, so every browser then would see it the same way, without problems.

                     

                     

                    Well, in this div case, since strangeling with margins didn`t work I tryed a traditional div strangeling (the same thing as but with divs) and its done, as I said, in a slightly expensive way.

                     

                     

                    The result is here:

                     

                     

                    <!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>Untitled Document</title>
                    <style type="text/css">
                    body {padding:0 auto; margin:0 auto; background:url(../Img/Background_repeat.png) repeat-x top}

                    div#master_enter{width:1024px; height:768px; background:url(../Img/Background_enter.jpg); margin:0 auto}
                    div#master{ width:1024px; height:auto}

                    div#centering_left{width:480px; height:768px; float:left}
                    div#centering_right{width:480px; height:768px; float:left}
                    div#centering_center{width:64px; height:768px; float:left}
                    div#centering_top{width:64px; height:478px}
                    div#centering_bottom{width:64px; height:271px}
                    div#enterButton_selection{width:62px; height:18px; padding:1px 0px 0px 0px; text-align:center; border:solid 1px #FFF; background:#87d9ff; filter:alpha(opacity=20); opacity:0.2; font-family:"Berlin Sans FB", Calibri, Arial; font-size:12px; color:#FFF}
                    div#enterButton_selection:hover{width:62px; height:18px; padding:1px 0px 0px 0px; text-align:center; border:solid 1px #FFF; background:#87d9ff; filter:alpha(opacity=60); opacity:0.6; font-family:"Berlin Sans FB", Calibri, Arial; font-size:12px; color:#FFF; text-decoration:underline}

                    </style>
                    </head>

                    <body>
                    <div id="master_enter">
                         <div id="centering_left"></div>
                         <div id="centering_center">
                             <div id="centering_top"></div>
                             <div id="enterButton_selection">Enter</div>
                             <div id="centering_bottom"></div>
                         </div>
                         <div id="centering_right"></div>
                    </div>
                    </body>
                    </html>



                    Thanks anyway, as long as this is a test I`ll wait with this solution and then try to find an other easier way.

                    • 7. Re: dreamweaver bug? or simple div problem?
                      John Waller Adobe Community Professional & MVP

                      Sorry. It wasn't obvious to me that you knew that from the code you posted.

                      • 8. Re: dreamweaver bug? or simple div problem?
                        ShaShamimi

                        I found a simpler way based on choosing a color for text back ground and making that transparent so you could see the background.

                         

                        At first I found this example: http://http://www.domedia.org/oveklykken/css-transparency.php

                         

                        It was great to find, but the problem is that the background is within the div and the text is in a trasnparent background, which was not what I wanted. As the person explains the way the transparency worked is the rgba- the 'a' being the alpha channel.  Thus, I took just that color code and added it to the div I had already, choosing the color I wanted it to be by simply changing the value of the rgb code. The thing is though, that the transparency doesn't appear in the design view of dreamwaver but does appear in Safari and Firefox browsers. Just going to have to keep previewing it until the layout is to your liking.

                         

                        I hope this helps and is a lot simpler than what you have.

                        • 9. Re: dreamweaver bug? or simple div problem?
                          Nancy OShea Adobe Community Professional & MVP

                          Unfortunately, the "rgba method" isn't supported in all browsers.

                          For this reason, I use semi-transparent png images.

                          http://alt-web.com/Sample.html

                           

                           

                          Nancy O.
                          Alt-Web Design & Publishing
                          Web | Graphics | Print | Media  Specialists
                          http://alt-web.com/
                          http://twitter.com/altweb