SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    May 2006
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    images not floating across screen!

    Can some one tell my code isnt working. I'm trying to float images across the screen with captions underneath them. But they all end up on the left side of the screen.Please help! Below is the css the html:


    .imgFloat{float:left;}

    p{text-align:center;}

    <div id="centermain">
    <h4>Tennis Gallery</h4>


    <img src="DSC1A.jpg" width="150" height="113"class="float" alt="Tennis"/>
    <p>Caption</p>

    <img src="DSC2a.jpg" width="150" height="113"class="float" alt="Tennis"/>
    <p>Caption</p>


    <img src="DSC3a.jpg" width="150" height="113"class="float" alt="Tennis"/>

    <p>Caption</p>

    <img src="DSC4a.jpg" width="150" height="113"class="float" alt="Tennis"/>

    <p>Caption</p>



    <img src="DSC5a.jpg" width="150" height="113"class="float" alt="Tennis"/>
    <p>Caption</p>


    <img src="DSC7a.jpg" width="150" height="113"class="float" alt="Tennis"/>

    <p>Caption</p>


    <p><img src="DSC8a.jpg" width="150" height="113"class="float" alt="Tennis"/>

    <p>Caption</p>


    <img src="DSC9a.jpg" width="150" height="113"class="float" alt="Tennis"/>

    <p>Caption</p>


    <img src="DSC12a.jpg" width="150" height="113" class="float" alt="Tennis"/>

    <p>Caption</p>


    <img src="DSC15a.jpg" width="150" height="113"class="float" alt="Tennis"/>

    <p>Caption</p>




    <img src="DSC17a.jpg" width="150" height="113" alt="Tennis"/>


    <p>Caption</p>


    <img src="DSC18a.jpg" width="150" height="113" alt="Tennis"/>


    <p>Caption</p>


    <img src="DSC23a.jpg" width="150" height="113" alt="Tennis"/>

    <p>Caption</p>


    <img src="DSC25.jpg" width="150" height="113"class="float" alt="Tennis"/>

    <p>Caption</p>


    <img src="DSC22a.jpg" width="150" height="113" class="float" alt="Tennis"/>


    <p>Caption</p>


    </div>




    </html>

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    wrap each img/caption in a div and float the div left with text-align center and some margin between them (if you want it).

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,321
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    kaymeis, are you using any CSS with that? I just wanted to make sure that you weren't expecting class="float" to make the images float. Using class="float" with .imgFloat{float:left;} won't make the images float. You would need

    img.float {float: left;}

    ... though that's not going to achieve what you really want.

    You could do what Eric suggests, or you could also mark up your code as a list, like this:

    Code:
    <ul>
              <li>
                <p><a href="some.jpg"><img src="tnail-sample.jpg"
                     alt="" />caption</a></p>
              </li>
    
              <li>
                <p><a href="some.jpg"><img src="tnail-sample.7.jpg"
                     alt="" />caption, continued and more for a long
                     caption</a></p>
              </li>
    That's how it's done on this page, which is worth reading, as it has some useful tips on getting this kind of gallery to display right.

  4. #4
    SitePoint Member
    Join Date
    May 2006
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    All the images are still floating left instead of across the screen. The captions are straying to the right instead of underneath. here is the css and html again.

    div.imgdsc1a{float:left;
    margin:10px;
    text-align:center;}


    div.imgdsc2a{float:left;
    margin:10px;
    text-align:center;}

    div.imgdsc3a{float:left;
    margin:10px;
    text-align:center;}



    div.imgdsc4a{float:left;
    margin:10px;
    text-align:center;}

    div.dsc5a{float:left;
    margin:10px;
    text-align:center;}

    div.imgdsc7a{float:left;
    margin:10px;
    text-align:center;}

    div.dsc8a{float:left;
    margin:10px;
    text-align:center;}


    div.dsc9a{float:left;
    margin:10px;
    text-align:center;}

    div.dsc12a{float:left;
    margin:10px;
    text-align:center;}

    div.dsc15a{float:left;
    margin:10px;
    text-align:center;}

    div.dsc17a{float:left;
    margin:10px;
    text-align:center;}

    div.dsc18a{float:left;
    margin:10px;
    text-align:center;}


    div.imgdsc23a{float:left;
    margin:10px;
    text-align:center;}



    div.imgdsc25a{float:left;
    margin:10px;
    text-align:center;}


    div.imgdsc22a{float:left;
    margin:10px;
    text-align:center;}



    <div class="DSC1a">

    <p><img src="DSC1A.jpg" width="150" height="113" alt="Tennis"/>Tennis</p>
    </div>
    <div class="DSC2a.">

    <p><img src="DSC2a.jpg" width="150" height="113" alt="Tennis"/>Tennis</p>
    </div>

    <div class="DSC3a">
    <p><img src="DSC3a.jpg" width="150" height="113" alt="Tennis"/>Tennis</p>
    <div class="DSC4a">
    </div>

    <p><img src="DSC4a.jpg" width="150" height="113" alt="Tennis"/>Tennis</p>

    </div>

    <div class="DSC5a" >


    <p><img src="DSC5a.jpg" width="150" height="113" alt="Tennis"/> Tennis</p>

    </div>

    <div class="DSC7a">


    <p><img src="DSC7a.jpg" width="150" height="113" alt="Tennis"/>Tennis</p>

    </p>
    </div>

    <div class="DSC8a">

    <p><img src="DSC8a.jpg" width="150" height="113" alt="Tennis"/>Tennis</p>

    </div>

    <div class="DSC9a.">


    <p><img src="DSC9a.jpg" width="150" height="113" alt="Tennis"/>Tennis</p>l
    </div>
    <div class="DSC10a.jpg">

    <p><img src="DSC12a.jpg" width="150" height="113" class="float" alt="Tennis"/>Tennis</p>
    </div>

    <div class="DSC15a">
    <p><img src="DSC15a.jpg" width="150" height="113" alt="Tennis"/>Tennis</p>
    </div>
    <div class="DSC17a">
    <p><img src="DSC17a.jpg" width="150" height="113" alt="Tennis"/>Tennis</p>
    </div>
    <div class="DSC18a.">
    <p><img src="DSC18a.jpg" width="150" height="113" alt="Tennis"/>Tennis</p>
    </div>



    <div class="DSC23a">


    <p><img src="DSC23a.jpg" width="150" height="113" alt="Tennis"/>Tennis</p>

    </div>

    <div class="DSC25a.jpg">

    <p><img src="DSC25.jpg" width="150" height="113"class="float" alt="Tennis"/>Tennis</p>

    </div>

    <div class="DSC22a.jpg">


    <p><img src="DSC22a.jpg" width="150" height="113" class="float" alt="Tennis"/>Tennis</p>

    </div>

  5. #5
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Hello,

    use only one class in your css and say it only once >> and the css/html should look like below...

    div.class1 {
    float:left;
    margin:10px;
    text-align:center;
    }

    <div class="class1">
    <img src="DSC25.jpg" width="150" height="113" alt="Tennis"/>
    <p>Tennis</p>
    </div>

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,751
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Hello,

    use only one class in your css and say it only once >> and the css/html should look like below...

    div.class1 {
    float:left;
    margin:10px;
    text-align:center;
    }

    <div class="class1">
    <img src="DSC25.jpg" width="150" height="113" alt="Tennis"/>
    <p>Tennis</p>
    </div>
    Off Topic:

    Add display:inline; there to cure an IE6 bug
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •