10 Replies Latest reply on Jun 13, 2013 4:16 PM by Nancy OShea

    Wrapper/gallery off center > needs to be in the middle.

    KevinHensels

      I'm working on a js/jquery gallery.

       

      It works like a charm, but the only thing that bothers me is that it's off centre.

       

      Here's the code:

       

      <head>

      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

      <title>FISH DESIGN</title>

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

      <link href="css/jquery.lightbox-0.5.css" rel="stylesheet" type="text/css" media="screen" />

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

      <script type="text/javascript" src="js/jquery.lightbox-0.5.min.js"></script>

       

       

       

       

       

       

      <script type="text/javascript">

       

       

      $(function() {

       

       

      $('#gallery a').lightBox();

       

       

      });

       

       

      </script>

       

       

       

       

      <head>

                <meta charset="UTF-8">

                <title>FISH DESIGN</title>

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

      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

      <style type="text/css">

      body,td,th {

                font-family: QuattrocentoSans-Regular;

      }

      body {

                background-color: #444;

                background-image: url(images/BACK_ROEST3.png);

      }

      </style>

      </head>

      <body>

                <div id="header">

                          <div>

              <div id="logo"> <img src="images/logo_apart.png" alt="LOGO" height="115">

                                    </div>

                            <ul id="navigation">

                            <li>

                                                        <a href="index.html">Home</a>

                                    </li>

                                              <li class="selected">

                                                        <a href="fotos.html">Foto's</a>

                  <li>

                                                        <a href="bestellen.html">Bestellen?

                          </a>

                                              </li>

                                              <li>

                                                        <a href="contact.php">Contact</a>

                                              </li>

                            </ul>

                          </div>

                </div>

                <div id="contents">

                          <div>

                                    <div class="body"  id="FOTO'S">

       

       

      <div id="wrapper">

      <div id="gallery">

       

       

      <div class="holder">

       

       

      <div class="thumb"> <a href="images/coming-soon.jpg" title="Tafel"><img src="thumbsgallery/coming-soon.jpg" width="140" height="120" alt="Coming soon" /></a></div>

      <!-- end thumb class -->

       

       

      <div class="title">

        <p>Coming soon</p>

       

       

      </div>

      <!-- end title class -->

       

       

      </div> <!-- end holder class -->

       

       

      <div class="holder">

       

       

      <div class="thumb"> <a href="images/coming-soon.jpg" title="Tafel"><img src="thumbsgallery/coming-soon.jpg" width="140" height="120" alt="Coming soon" /></a></div>

      <!-- end thumb class -->

       

       

      <div class="title">

        <p>Coming soon</p>

       

       

      </div>

      <!-- end title class -->

       

       

      </div> <!-- end holder class -->

      <div class="holder">

       

       

      <div class="thumb"> <a href="images/coming-soon.jpg" title="Tafel"><img src="thumbsgallery/coming-soon.jpg" width="140" height="120" alt="Coming soon" /></a></div>

      <!-- end thumb class -->

       

       

      <div class="title">

        <p>Coming soon</p>

       

       

      </div>

      <!-- end title class -->

       

       

      </div> <!-- end holder class -->

      <div class="holder">

        • 2. Re: Wrapper/gallery off center > needs to be in the middle.
          Nancy OShea Adobe Community Professional & MVP

          What matters is how it looks in browsers.  Can you upload your test page & dependant files to your remote server and post the URL?

           

           

          Nancy O.

          • 3. Re: Wrapper/gallery off center > needs to be in the middle.
            KevinHensels Level 1

            Hi Nancy,

             

            i sent you a pm with the URL.

            • 4. Re: Wrapper/gallery off center > needs to be in the middle.
              Nancy OShea Adobe Community Professional & MVP

              Responded with add some CSS margins to your .holder.

               

              Nancy O.

              • 5. Re: Wrapper/gallery off center > needs to be in the middle.
                KevinHensels Level 1

                Afbeelding 37.png

                 

                unfortunately I can't figure it out.

                It has to be something simple.. but I don't really know what it is.

                 

                It also shows some box/edge that were not there before and seem unnecessary.

                • 6. Re: Wrapper/gallery off center > needs to be in the middle.
                  KevinHensels Level 1

                  it looks like this in dreamweaver:

                  Afbeelding 39.png

                   

                   

                  but in the browers it looks like this

                   

                  Afbeelding 40.png

                  • 7. Re: Wrapper/gallery off center > needs to be in the middle.
                    KevinHensels Level 1

                    If I preview the site in the browser it4s perfectly centred.

                     

                    But the moment i zant to upload in on a server it suddenly shifts everything off center.

                     

                    How is this even possible?

                    • 8. Re: Wrapper/gallery off center > needs to be in the middle.
                      KevinHensels Level 1

                      This the URL: http://fishdesign.be/TEST/tafels3.html

                       

                      I'm guessing it's some Css problem.

                       

                      But I can't really figure it out.

                      • 9. Re: Wrapper/gallery off center > needs to be in the middle.
                        KevinHensels Level 1

                        Well the galery is nice and centered now.

                         

                        Another problem that occurs with the lightbox gallery is that it plays pictures in the wrong order.

                         

                        this is the code:

                         

                        <div class="holder">

                         

                         

                        <div class="thumb"> <a href="images/accessoires/groot/accessoires2.jpg" title="Tafel"><img src="images/accessoires/klein/accessoires2.jpg" width="140" height="120" alt="Coming soon" /></a></div>

                        <!-- end thumb class -->

                        <div class="title">

                          <p>Broodtrommel</p>

                        </div>

                        <!-- end title class -->

                         

                         

                        </div> <!-- end holder class --><!-- end holder class -->

                        <div class="holder">

                          <div class="thumb"> <a href="images/accessoires/groot/accessoires10.jpg" title="Tafel"><img src="images/accessoires/klein/accessoires10.jpg" width="140" height="120" alt="Coming soon" /></a></div>

                          <!-- end thumb class -->

                          <div class="title">

                            <p>Vintage  lampje</p>

                          </div>

                          <!-- end title class -->

                        </div>

                        <!-- end holder class -->

                        <div class="holder">

                          <div class="thumb"> <a href="images/accessoires/groot/accessoires9.jpg" title="Tafel"><img src="images/accessoires/klein/accessoires9.jpg" width="140" height="120" alt="Coming soon" /></a></div>

                          <!-- end thumb class -->

                          <div class="title">

                            <p>Vintage  lampje</p>

                          </div>

                          <!-- end title class -->

                        </div>

                        <!-- end holder class -->

                        <div class="holder">

                          <div class="thumb"> <a href="images/accessoires/groot/accessoires8.jpg" title="Tafel"><img src="images/accessoires/klein/accessoires8.jpg" width="140" height="120" alt="Coming soon" /></a></div>

                          <!-- end thumb class -->

                          <div class="title">

                            <p>Ventilator</p>

                          </div>

                          <!-- end title class -->

                        </div>

                        <!-- end holder class -->

                        <div class="holder">

                          <div class="thumb"> <a href="images/accessoires/groot/accessoires7.jpg" title="Tafel"><img src="images/accessoires/klein/accessoires7.jpg" width="140" height="120" alt="Coming soon" /></a></div>

                          <!-- end thumb class -->

                          <div class="title">

                            <p>Ventilator</p>

                          </div>

                          <!-- end title class -->

                        </div>

                        <!-- end holder class -->

                        <div class="holder">

                          <div class="thumb"> <a href="images/accessoires/groot/accessoires14.jpg" title="Tafel"><img src="images/accessoires/klein/accessoires14.jpg" width="140" height="120" alt="Coming soon" /></a></div>

                          <!-- end thumb class -->

                          <div class="title">

                            <p>Vintage radio</p>

                          </div>

                          <!-- end title class -->

                        </div>

                        <div class="holder">

                          <div class="thumb"> <a href="images/accessoires/groot/accessoires13.jpg"><img src="images/accessoires/klein/accessoires13.jpg" width="140" height="120" alt="Coming soon" /></a></div>

                          <!-- end thumb class -->

                          <div class="title">

                            <p>Vintage radio PHILIPS</p>

                          </div>

                          <!-- end title class -->

                        </div>

                        <div class="holder">

                          <div class="thumb"> <a href="images/accessoires/groot/accessoires12.jpg" title="Tafel"><img src="images/accessoires/klein/accessoires12.jpg" width="140" height="120" alt="Coming soon" /></a></div>

                          <!-- end thumb class -->

                          <div class="title">

                            <p>Vintage radio</p>

                          </div>

                          <!-- end title class -->

                        </div><div class="holder">

                          <div class="thumb"> <a href="images/accessoires/groot/accessoires11.jpg" title="Tafel"><img src="images/accessoires/klein/accessoires11.jpg" width="140" height="120" alt="Coming soon" /></a></div>

                          <!-- end thumb class -->

                          <div class="title">

                            <p>Vintage  lampje</p>

                          </div>

                          <!-- end title class -->

                        </div>

                        </div> <!-- end gallery div -->

                        </div> <!-- end wrapper div -->

                                  </div>

                                            </div>

                                  </div>

                        <div id="footer">

                          <div>

                            <div id="logo2"></div>

                            <p id="footnote"><img src="images/footer_tekst.png" alt="LOGO" width="949" height="124" /></p>

                          </div>

                         

                         

                        Any Idea how to fix this?

                        • 10. Re: Wrapper/gallery off center > needs to be in the middle.
                          Nancy OShea Adobe Community Professional & MVP

                          No idea.  Your link to the page is 404 not found.

                           

                           

                          Nancy O