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

    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">

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

          http://img19.imageshack.us/img19/8434/afbeelding36.png

          that's how it looks in DW.

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

            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 Community Member

              Hi Nancy,

               

              i sent you a pm with the URL.

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

                Responded with add some CSS margins to your .holder.

                 

                Nancy O.

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

                  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 Community Member

                    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 Community Member

                      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 Community Member

                        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 Community Member

                          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. CommunityMVP

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

                             

                             

                            Nancy O