SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    May 2005
    Posts
    248
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    change leading (baseline) of image in list

    Hi all,
    I would like the crossbar image between the list items to be centered vertically i.e. to increase the leading of the text so the image sat in the middle of the words. I've tried a bazillion things only a couple of which you can see here: http://mmnkltd.com/trials/leading.html
    I read: http://meyerweb.com/eric/css/inline-format.html (hopefully my understanding not getting too far off base) and tried to apply those concepts to lists with no success.
    Ideas please, or can it not be done?
    thanks
    Cheers

  2. #2
    SitePoint Enthusiast
    Join Date
    May 2006
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe I'm not understanding exactly what you want, but how about leaving the text items alone and moving the images down however much you need to produce the desired result? For example, you could style each image with "position:relative; top:20px;" or whatever value works.

    Ned

  3. #3
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by marioo View Post
    I would like the crossbar image between the list items to be centered vertically i.e. to increase the leading of the text so the image sat in the middle of the words. ...
    Test using the vertical-align property with your code. E.g:
    Code:
    ul * {
      vertical-align: middle;
    }
    Happy ADD/ADHD with Asperger's

  4. #4
    SitePoint Addict
    Join Date
    May 2005
    Posts
    248
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you all for getting back to me. I've tried both ways.
    recce101's solution is here: http://mmnkltd.com/trials/leading.html To make it all balance out I put a border at the bottom of the ul;
    Code:
    		
    ul {
    	background-color: #FF9;
    	border-bottom: 14px solid #FF9;	/* light yellow line */
    		}
    li {
    	display: inline;
    	padding: 10px;
    }
    .image-bump {
    	position: relative;
    	top: 20px;
    }
    that worked except for the large space above the list.
    and Erik J's here: http://mmnkltd.com/trials/leading02.html
    This also worked, but unless I misunderstand the "*" the style will apply to all the unordered lists -- something I don't think I want.
    I tried some variations on the <ul>s but couldn't keep the style from applying to other ids of the uls. (Like I said, my understanding of the "*" may be wrong.)
    more ideas???
    thank you!

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    HI,

    I didn't understand what you meant exactly but if you want the alignment to apply to one list only then use the id.

    Code:
    ul#vertical * {
        vertical-align: middle;
    }
    The universal selector (*) will apply rules to every element that is a child or grandchild of the ul element. As vertical-align only applies to inline elements it will only have effect if the elements are inline elements of course.

  6. #6
    SitePoint Addict
    Join Date
    May 2005
    Posts
    248
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks all,
    Paul, I understand that issue better.
    I also changed the graphic a little so it sat better in the list, but what really made it work was the: vertical-align: middle;.
    the change is at: http://mmnkltd.com/trials/leading02.html
    thanks everyone for your help.


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
  •