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

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

    KevinHensels Newcomer

      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 O. Legend

          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 Newcomer

            Hi Nancy,

             

            i sent you a pm with the URL.

            • 4. Re: Wrapper/gallery off center > needs to be in the middle.
              Nancy O. Legend

              Responded with add some CSS margins to your .holder.

               

              Nancy O.

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

                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 Newcomer

                  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 Newcomer

                    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 Newcomer

                      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 Newcomer

                        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 O. Legend

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

                           

                           

                          Nancy O