SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Images wont display inline

    Hi from 8 degress c York UK...

    on this page i cant get the right hand side thumbnail pics to sit inline, instead they stack under each other, here is the offending page:http://www.davidclick.com/portfolio-fix4.html

    The thumbnail images should look like this -
    http://www.davidclick.com/york-pavil...ing-vision.htm

    Now before i posted this i did check the images were set to display inline, they are as the code below shows, i suspect an inheritance problem..

    Code:
    #aside ul {
      margin: 0 0 10px 0;
      padding: 0;
      float: left;
      text-align: center;
      background-color: #fff;
      line-height: 1em;
      list-style: none; 
      position: relative;
      
    }
    
    
    #aside ul li {
      display: inline;
      margin: 0;
      padding: 0;
    }
    
    #aside ul a {
      display: block;
      float: left;
      margin: 0 10px 10px 0;
      padding: 4px 4px 6px 4px;
      border: 0;
      background-color: #fff;
      text-align: center;
      width: 80px;
    }
    
    #aside ul a:hover {
      background-color: #CDCC00;
      border: 0;
    }
    Any insights welcome :-)
    Last edited by ralph.m; Mar 3, 2011 at 03:51. Reason: fixed code tag
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Try adding this:

    Code:
    #aside ul {
      margin: 0 0 10px 0;
      padding: 0;
      float: left;
      text-align: center;
      background-color: #fff;
      line-height: 1em;
      list-style: none; 
      position: relative;
      width:200px;
    }

  3. #3
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ralph you fixed it!
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Glad that helped. (I'm not totally sure why the width was needed, but I guess if the container and its content are floated, there's nothing to stop them wrapping like that. I need to understand the finer points of CSS better.)

  5. #5
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I usually don't use a width for the UL but have the< li's> floated! So far without the problems of wrapping!
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)


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
  •