1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

CSS list guidance for a page on my site

Discussion in 'CSS' started by JakeThePeg, Dec 16, 2008.

  1. #1
    I require some CSS styling for the square images and text that appear on the main content area of this page http://www.helloelbow.com/the-crew/


    The requirements are as follows:

    1. I would like the images to be listed across the page, rather than down the page
    2. The text beneath each image should be smaller than it is currently
    3. The text underneath each image should be the same width as the image itself (it is ok to wrap the text onto the next line)
    4. I would like to remove the hyperlink underline beneath each image

    Is anyone able to suggest some CSS code / pointers / or styles in order to create this list style?
     
    JakeThePeg, Dec 16, 2008 IP
  2. MWH-Jon

    MWH-Jon Peon

    Messages:
    13
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Far as I know this should work.

    In CSS
    
    li.blockcrew {
    	float: left;
    	width: 80px;
    	list-style: none;
    	font-size: 10px;
    	}
    	
    li.blockcrew a:link, li.blockcrew a:active, li.blockcrew a:visited {
    	text-decoration: none;	
    	}
    	
    li.blockcrew a:hover {
    	text-decoration: none;
    	}
    	
    ul.blocklist {
    	margin: 0px 0px 0px 0px;
    	padding: 0px 0px 0px 0px;
    	}
    	
    #clearblock; {
    	clear: both;
    	}
    Code (markup):
    In Document
    <ul class="blocklist">
    
    <li class="blockcrew"><a href='/author/JakeThePeg/'> <img src="http://www.helloelbow.com/wp-content/images/userphoto/JakeThePeg.thumbnail.jpg" alt="JakeThePeg" width="80" height="80" class="photo" style="border:0" /></a></li>
    <li class="blockcrew"><a href='/author/suburbanriot/'> <img src="http://www.helloelbow.com/wp-content/images/userphoto/suburbanriot.thumbnail.jpg" alt="Jason from Suburban Riot" width="80" height="80" class="photo" style="border:0" /></a></li>
    <li class="blockcrew"><a href='/author/science/'> <img src="http://www.helloelbow.com/wp-content/images/userphoto/science.thumbnail.jpg" alt="Jeremy from Science" width="80" height="80" class="photo" style="border:0" /></a></li>
    <li class="blockcrew"><a href='/author/localcelebrity/'> <img src="http://www.helloelbow.com/wp-content/images/userphoto/localcelebrity.thumbnail.jpg" alt="Jordan from Local Celebrity" width="80" height="80" class="photo" style="border:0" />  </a></li>
    <li class="blockcrew"><a href='/author/younglovers/'> <img src="http://www.helloelbow.com/wp-content/images/userphoto/younglovers.thumbnail.jpg" alt="Luke from Young Lovers" width="80" height="80" class="photo" style="border:0" />  </a></li>
    <li class="blockcrew"><a href='/author/Sanda_ArmedAngels/'> <img src="http://www.helloelbow.com/wp-content/images/userphoto/sanda_armedangels.thumbnail.jpg" alt="Sanda from ArmedAngels" width="80" height="77" class="photo" style="border:0" />  </a></li>
    <li class="blockcrew"><a href='/author/splitreason/'> <img src="http://www.helloelbow.com/wp-content/images/userphoto/splitreason.thumbnail.jpg" alt="Sebastian from Split Reason" width="80" height="80" class="photo" style="border:0" />  </a></li>
    <li class="blockcrew"><a href='/author/sundayoutfit/'> <img src="http://www.helloelbow.com/wp-content/images/userphoto/sundayoutfit.thumbnail.jpg" alt="sundayoutfit" width="80" height="80" class="photo" style="border:0" />  </a></li>
    <li class="blockcrew"><a href='/author/clearcutcase/'> <img src="http://www.helloelbow.com/wp-content/images/userphoto/clearcutcase.thumbnail.jpg" alt="Sven from Clear Cut Case" width="80" height="80" class="photo" style="border:0" />  </a></li>
    <li class="blockcrew"><a href='/author/nipplecripple/'> <img src="http://www.helloelbow.com/wp-content/images/userphoto/nipplecripple.thumbnail.jpg" alt="Tweaker from Nipple Cripple" width="80" height="80" class="photo" style="border:0" />  </a></li>
    <li class="blockcrew"><a href='/author/waterloo/'> <img src="http://www.helloelbow.com/wp-content/images/userphoto/waterloo.thumbnail.jpg" alt="Waterloo" width="79" height="78" class="photo" style="border:0" />  </a></li>
    
    </ul>
    
    <div id="clearblock"></div>
    Code (markup):
     
    MWH-Jon, Dec 16, 2008 IP
  3. JakeThePeg

    JakeThePeg Active Member

    Messages:
    230
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    53
    #3
    JakeThePeg, Jan 29, 2009 IP
  4. JakeThePeg

    JakeThePeg Active Member

    Messages:
    230
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    53
    #4
    Ok, this looks cool in Firefox, but I just had a look at in IE 7 and it's broke. Any ideas what is wrong in IE 7?

    Here's the page again... http://www.helloelbow.com/the-crew/
     
    JakeThePeg, Feb 2, 2009 IP
  5. JakeThePeg

    JakeThePeg Active Member

    Messages:
    230
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    53
    #5
    bumpity bump.... does anyone have any clues regarding the CSS issue above in IE7?
     
    JakeThePeg, Feb 11, 2009 IP
  6. unigogo

    unigogo Peon

    Messages:
    286
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #6
    
    <li class='blockcrew'><a href='/author/Sanda_ArmedAngels/'> <img src="http://www.helloelbow.com/wp-content/images/userphoto/sanda_armedangels.thumbnail.jpg" alt="Sanda from ArmedAngels" width="80" [B][COLOR="Blue"]height="77"[/COLOR][/B] class="photo" style="border:0" /> 
      <br>Sanda from ArmedAngels<br><br></a></li>
    
    Code (markup):
    Change height value to 80

     [COLOR="blue"][B]height="80"[/B][/COLOR] 
    Code (markup):
    Solved in IE 6
     
    unigogo, Feb 12, 2009 IP