8 Replies Latest reply: Apr 16, 2012 2:19 AM by sudarshan.t RSS

    float left not working

    reelhero

      my images are stacking on top of each other below "share" and "follow" rather than going side by side:

       

      http://toddheymandirector.com/REEL/index_newlook_gallery2222.html

       

      here is it working but without the resizing function

       

      http://toddheymandirector.com/REEL/index_newlook.html

        • 1. Re: float left not working
          mhollis55 Community Member

          you don't use float that way.

           

          Float means the object in question is taken to the position described in the float.

           

          I think that, if what you want is the images laid out in an horizontal array you can simply place them with no float thusly:

           

          <a href="http://toddheymandirector.com/REEL/"><img src="../Images/thumbs_jsh/nike.png" alt="nike" border="0" class="faded2 fadehover"  /></a><a href="http://toddheymandirector.com/REEL/"><img src="../Images/thumbs_jsh/td_cops.png" alt="nike" border="0" class="faded2 fadehover" /></a> and so on.

           

          The images will be displayed side by side.

           

          You can also create a list and set up the list to desplay: inline; in CSS so that the list doesn't stack the images one above another.

          • 2. Re: float left not working
            3DeeGee Community Member

            You have a lot of errors in your code which doesn't help. Run it through this http://validator.w3.org/

            That'll help you find the problems, a quick glance and I can see ';' missing in the css, <div> inside a <ul> when it should be <li> etc...

            Run the code through validator and that should get you going in the right direction at least.

            • 4. Re: float left not working
              mhollis55 Community Member

              OK, back to what 3DeeGee said, check errors in code.

               

              And I have to ask, have you made these photos all the same size? You need to do that first, you know.

               

              If you did a list and you styled it correctly, it should work.

              • 5. Re: float left not working
                reelhero Community Member

                thanks--i did a validator - there were some meta mistakes (from the google plus like buttons so i didnt code that google did) and a few open tags..i started correcting some of it but i wanted to test the list first..

                unfortunately im simultaneously cutting a big commercial even though id rather be fixing the site - the photos are all the same size.. i tried to stlye it correctly but something isnt working..

                 

                my CSS

                 

                #container{

                    width:100%;

                    height:auto;

                    margin:0;

                    padding:0;

                }

                 

                 

                 

                 

                #gallery{

                    position:absolute;

                          left:0px;

                          top:340px;

                          width:100%;

                    height:auto;

                    margin:0;

                    padding:0;

                   

                }

                 

                 

                #gallery ul{

                    width:100%;

                    height:auto;

                    margin:0;

                    padding:0;

                    background-color:#595959;

                    list-style-type:none;

                }

                 

                 

                #gallery ul li{

                    min-width:26.6%;

                    display:inline

                    margin:0;

                    padding:0;

                    background-color:#595959;

                }

                 

                 

                img{

                   

                    border:none;

                    margin:0;

                    padding:0;

                    width:100%;

                 

                }

                 

                the HTML

                 

                <div id="container">

                <div id="gallery">

                <ul>

                 

                 

                 

                 

                <li class="faded2 fadehover"><a href="http://toddheymandirector.com/REEL/"><img src="../Images/thumbs_jsh/nike.png" alt="nike" border="0" class="a"  /></a> <img src="../Images/thumbs_jsh/nike_hot.png" alt="" class="b"  /></li>

                <li class="faded2 fadehover"><a href="http://toddheymandirector.com/REEL/"><img src="../Images/thumbs_jsh/td_cops.png" alt="nike" border="0" class="a"  /></a> <img src="../Images/thumbs_jsh/td_cops_hot.png" alt="" class="b"  /></li>

                <li class="faded2 fadehover"><a href="http://toddheymandirector.com/REEL/"><img src="../Images/thumbs_jsh/chex.png" alt="nike" border="0" class="a"  /></a> <img src="../Images/thumbs_jsh/chex_hot.png" alt="" class="b"  /></div>

                <li class="faded2 fadehover"><a href="http://toddheymandirector.com/REEL/"><img src="../Images/thumbs_jsh/florastor.png" alt="nike" border="0" class="a"  /></a> <img src="../Images/thumbs_jsh/florastor_hot.png" alt="" class="b"  /></li>

                <li class="faded2 fadehover"><a href="http://toddheymandirector.com/REEL/"><img src="../Images/thumbs_jsh/ulife.png" alt="nike" border="0" class="a"  /></a> <img src="../Images/thumbs_jsh/ulife_hot.png" alt="" class="b"  /></li>

                <li class="faded2 fadehover"><a href="http://toddheymandirector.com/REEL/"><img src="../Images/thumbs_jsh/fdic.png" alt="nike" border="0" class="a"  /></a> <img src="../Images/thumbs_jsh/fdic_hot.png" alt="" class="b"  /></li>

                 

                 

                </ul>

                </div>

                </div>

                • 6. Re: float left not working
                  3DeeGee Community Member

                  Seems it's the javascript that's making a mess of things now. You both Spry and jQuery, are you using both?

                  • 7. Re: float left not working
                    sudarshan.t CommunityMVP

                    You're loading multiple jQuery instances on your page - that is one of the major culprit resulting in bugs.

                     

                    You should ideally use 1 single jQuery pack or make a custom .js file with all the required jQuery items in it as usually, if there is 1 conflicting item in 1 or more of your jQuery loaders, your site will break down. Also, it will not be compatible across browsers. This is something W3 validator wont tell you. Since I ran a source code lookup on your page, I found this out.

                    • 8. Re: float left not working
                      sudarshan.t CommunityMVP

                      reelhero wrote:

                       

                      thanks--i did a validator - there were some meta mistakes (from the google plus like buttons so i didnt code that google did) and a few open tags..i started correcting some of it but i wanted to test the list first..

                      unfortunately im simultaneously cutting a big commercial even though id rather be fixing the site - the photos are all the same size.. i tried to stlye it correctly but something isnt working..

                       

                      my CSS

                       

                      #container{

                          width:100%;

                          height:auto;

                          margin:0;

                          padding:0;

                      }

                       

                       

                       

                       

                      #gallery{

                          position:absolute;

                                left:0px;

                                top:340px;

                                width:100%;

                          height:auto;

                          margin:0;

                          padding:0;

                         

                      }

                       

                       

                      #gallery ul{

                          width:100%;

                          height:auto;

                          margin:0;

                          padding:0;

                          background-color:#595959;

                          list-style-type:none;

                      }

                       

                       

                      #gallery ul li{

                          min-width:26.6%;

                          display:inline

                          margin:0;

                          padding:0;

                          background-color:#595959;

                      }

                       

                       

                      img{

                         

                          border:none;

                          margin:0;

                          padding:0;

                          width:100%;

                       

                      }

                       

                       

                       

                      Looking at your site now, There are LOTS of errors in your CSS itself which prevent the site from doing what its supposed to do.

                       

                      I've made necessary changes. Replace the following CSS in your HTML and it should function properly.

                      div.fadehover {

                          position: relative;

                          }

                      img.a {

                          position: relative;

                          left: 0;

                          top: 0;

                          z-index: 10;

                         

                          }

                       

                      img.b {

                          position: absolute;

                          left: 0;

                          top: 0;

                          }

                      img.c {

                          position: absolute;

                          left: 0;

                          top: 0;

                          z-index: 10;

                         

                          }

                      #thumb1 {

                          position:absolute;

                          left:0px;

                          top:358px;

                          width:116px;

                          height:110px;

                          z-index:1;

                      }

                      #thumb2 {

                          position:absolute;

                          left:260px;

                          top:358px;

                          width:39px;

                          height:51px;

                          z-index:2;

                      }

                      #thumb3 {

                          position:absolute;

                          left:520px;

                          top:358px;

                          width:37px;

                          height:40px;

                          z-index:3;

                      }

                      #thumb4 {

                          position:absolute;

                          left:780px;

                          top:358px;

                          width:58px;

                          height:72px;

                          z-index:4;

                      }

                      #thumb5 {

                          position:absolute;

                          left:1040px;

                          top:358px;

                          width:80px;

                          height:108px;

                          z-index:5;

                      }

                      #thumb6 {

                          position:absolute;

                          left:1300px;

                          top:358px;

                          width:26px;

                          height:47px;

                          z-index:6;

                      }

                       

                           

                       

                      .faded { display: none; }

                            .faded2 { display: none; }

                         .faded3 { display: none; }

                      #apDiv1 {

                          position:absolute;

                          left:40px;

                          top:719px;

                          width:40px;

                          height:16px;

                          z-index:7;

                      }

                      #tweet {

                          position:absolute;

                          left:108px;

                          top:664px;

                          width:27px;

                          height:15px;

                          z-index:7;

                      }

                      #google {

                          position:absolute;

                          left:167px;

                          top:664px;

                          width:26px;

                          height:17px;

                          z-index:8;

                      }

                      #like {

                          position:absolute;

                          left:57px;

                          top:664px;

                          width:32px;

                          height:17px;

                          z-index:9;

                      }

                      #container{

                          width:100%;

                          height:auto;

                          margin:0;

                          padding:0;

                      }

                       

                       

                      #gallery{

                          position:absolute;

                          left:0px;

                          top:340px;

                          width:100%;

                          height:auto;

                          margin:0;

                          padding:0;

                         

                      }

                       

                      #gallery ul{

                          width:100%;

                          height:auto;

                          margin:0;

                          padding:0;

                      float:left;

                          background-color:#595959;

                          list-style-type:none;

                      }

                       

                      #gallery ul div{

                          min-width:26.6%;

                        margin:0;

                        float:left;

                          background-color:#595959;

                      }

                       

                      img{

                         

                          border:none;

                          margin:0;

                          padding:0;

                          width:100%;

                         

                      }

                       

                      Here is a screenshot of what I achieved after changing a few lines in your CSS.

                      Screen Shot 2012-04-16 at 2.46.20 PM.png

                       

                      In your CSS definition for img.a, which is the default faded image, your position should be 'relative' to the page container. For img.b, which is a hover image, your position should be 'absolute' as it'll just sit atop img.a and replace it. In your CSS, both were 'absolute' which is what was causing the issue. Also, there were a lot of minor but very costly errors in your CSS tags - some of them weren't closed/ appended properly with the ';' - this is a critical issue causing your HTML not to render properly.

                       

                      Try the CSS I've given here and let us know the progress.