Skip navigation
Currently Being Moderated

float left not working

Apr 14, 2012 10:17 AM

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

 
Replies
  • Currently Being Moderated
    Apr 14, 2012 11:30 AM   in reply to reelhero

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 14, 2012 11:39 AM   in reply to reelhero

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 14, 2012 12:41 PM   in reply to reelhero

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 16, 2012 12:43 AM   in reply to reelhero

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

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Apr 16, 2012 1:45 AM   in reply to reelhero

    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.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Apr 16, 2012 2:19 AM   in reply to reelhero

    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.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points