Adobe Community: float left not working

Currently Being Moderated

1. mhollis55,

Apr 14, 2012 11:30 AM in reply to reelhero

Report

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

2. 3DeeGee,

Apr 14, 2012 11:39 AM in reply to reelhero

Report

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

3. reelhero,

Apr 14, 2012 12:17 PM in reply to mhollis55

Report

i did it as a list and it gets funky

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

|

Mark as:

Currently Being Moderated

4. mhollis55,

Apr 14, 2012 12:41 PM in reply to reelhero

Report

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

5. reelhero,

Apr 14, 2012 1:44 PM in reply to mhollis55

Report

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

<ul>

</ul>

</div>

|

Mark as:

Currently Being Moderated

6. 3DeeGee,

Apr 16, 2012 12:43 AM in reply to reelhero

Report

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

|

Mark as:

3,731 posts
Oct 15, 2010

Currently Being Moderated

7. Sudarshan Thiagarajan,

Apr 16, 2012 1:45 AM in reply to reelhero

Report

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:

3,731 posts
Oct 15, 2010

Currently Being Moderated

8. Sudarshan Thiagarajan,

Apr 16, 2012 2:19 AM in reply to reelhero

Report

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.

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:

Dreamweaver

float left not working

Apr 14, 2012 10:17 AM

More Like This

Bookmarked By (0)

Answers + Points = Status