Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    Nov 2005
    Posts
    230
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Vertical alignment bullets

    In working on tables we have valign=middle...
    but i seem not to find a solution for this...
    for example, i want to create a bullet image for every line of text enclosed by a div..the bullet image is 25x25 pixels...it's a box button with an arrow inside, and some shadow effects...
    so here it goes:

    Code:
    <style>
    .bullet
    {
    height:25;
    padding-left:25;
    background:url(bullet.gif);
    background-repeat:no-repeat;
    }
    </style>
    
    <div class=bullet>Line 1</div>
    <div class=bullet>Line 2</div>
    <div class=bullet>Line 3</div>
    the problem is ...the text seem not to align with the bullet's pointing arrow...i dont want to edit or resize my bullet because it's perfect...all i want to do is to command my text to have a vertical alignment that is centered....since height is defined as 25px, can i vertically align my text to the middle... i trited vertical-align:middle, but it seems not to work...

    Code:
    <img src=bullet.gif align=absmiddle>Line 1
    gives me the perfect solution...but i want to use css to do the bulleting...
    and using

    Code:
    list-style-image:url(bullet.gif)
    seems to be much more worst, alignment becomes more wrong

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    assuming your image can be used as a background...

    Code:
    <style>
    .bullet {
    height: 25px;
    padding-left: 25px;
    background:url(bullet.gif) 50% 0 no-repeat;
    }
    </style>
    
    <div class="bullet">Line 1</div>
    <div class="bullet">Line 2</div>
    <div class="bullet">Line 3</div>
    put the px (or em or % in there).

    why are you not usng a list? seems to me that that is what your really doing.

    if that doesnt work, post up a llink to a page so we can debug it better.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    Regular Coder
    Join Date
    Nov 2005
    Posts
    230
    Thanks
    1
    Thanked 0 Times in 0 Posts
    thanks for your reply...
    but it didn't work..analyzing the css...the 50% 0 in background will not work, since the image is 25px, so it will not do any adjustment...the 50% should rather i guess be applied to the text instead of the image... but then how...

    yes, you guessed it right..i'm doing a list, i want to use picture bullets instead of the default symbol...but using the list-style-image doesnt produce the good effect...it's even worse, totally not aligned...the good solution can be using the <img valign=middle src=bullet.gif> but as i have posted, i want to use a css way in doing it... thanks

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,305
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by ken_shoti View Post
    50% 0 in background will not work, since the image is 25px, so it will not do any adjustment...
    That sets the background image position at 50% of the element width from the left side and adjacent to the elementís top border. I think what harbingerOTV meant to do was to vertically center the bullet background image at the left side of the element; the code for that would have been background-position: left (or you could replace 50% 0 in his example with the left keyword). You can read up on the property in the CSS2.1 (WD) specification if interested as to how it works.

    Quote Originally Posted by ken_shoti View Post
    yes, you guessed it right..i'm doing a list, i want to use picture bullets instead of the default symbol...but using the list-style-image doesnt produce the good effect...it's even worse, totally not aligned...the good solution can be using the <img valign=middle src=bullet.gif> but as i have posted, i want to use a css way in doing it... thanks
    Using a list element doesnít mean that you need to use the list style CSS properties. You can still use a list element and generate bullets through the use of the CSS background properties. In fact, this is the semantic way of doing things since the content is still marked up as a list (div elements are semantically meaningless).

    Anyway, on to your problem. I think that an example may demonstrate how you can use the background properties to accomplish your goal. Hereís a live example of the below code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    	"http://www.w3.org/TR/html4/strict.dtd">
    
    <html lang="en-Latn-US">
    	<head>
    
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    		<title>Demo CF114078</title>
    		<meta name="Author" content="Patrick Garies">
    		<meta name="Created" content="2007-05-14">
    		<style type="text/css">
    			* { margin: 0; padding: 0; }
    			html { padding: 1em; background: white; color: black; }
    			li { list-style: none; height: 35px; margin: 5px; padding: 0 0 0 35px; background: #eee url("bullet.gif") 5px center no-repeat; line-height: 35px; }
    		</style>
    
    	</head>
    	<body>
    
    		<ol lang="ja-Latn">
    			<li>ichi</li>
    			<li>ni</li>
    			<li>san</li>
    		</ol>
    		
    	</body>
    </html>
    I do agree that the CSS list properties are limiting, by the way; the W3C, apparently, does too since they have an entire CSS3 module (WD) dedicated to lists.
    Last edited by Arbitrator; 05-14-2007 at 12:46 PM. Reason: I forgot to assign a matching text color for the background color as per good practice.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    Regular Coder
    Join Date
    Nov 2005
    Posts
    230
    Thanks
    1
    Thanked 0 Times in 0 Posts
    hey thanks for the help guys...and for the recent code sir arbitrator...esp. for the effort of uploading it as a live demo! cool......
    but i am now using this code...i actually missed the line-height which was quite essential...now i have this code


    Code:
    .bullet{
    margin-bottom:5;
    height:25;
    background-repeat:no-repeat;
    padding-left:28;line-height:2
    }
    the good thing about this...it supports line breaks and still the text are indented, so bullets are highlighted..i dont think the list supports that...

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,305
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by ken_shoti View Post
    hey thanks for the help guys...and for the recent code sir arbitrator...esp. for the effort of uploading it as a live demo! cool......
    but i am now using this code...i actually missed the line-height which was quite essential...
    Iím glad that your problem is, apparently, solved.

    Quote Originally Posted by ken_shoti View Post
    now i have this code


    Code:
    .bullet{
    margin-bottom:5;
    height:25;
    background-repeat:no-repeat;
    padding-left:28;line-height:2
    }
    Iím not certain how this can be your solution though. Thereís no reference to a background image and your declarations for the margin-bottom, height, and padding-left have values that are missing (required) units. I assume that you meant 5px, 25px, and 28px, respectively.

    This also sounds like you went for the less‐than‐optimal div solution.

    Quote Originally Posted by ken_shoti View Post
    the good thing about this...it supports line breaks and still the text are indented, so bullets are highlighted..i dont think the list supports that...
    • List elements support line‐breaks.
    • You can achieve indentation using list elements by specifying the margin, padding, or text-indent properties; if you want to indent the bullet too, you can use list-style-position: inside in conjunction with the other mentioned properties.
    • Iím not sure what you mean with regard to highlighting. You still canít highlight bullets in background image form; I donít know why you would want to do so either if the bullet is, in fact, presentational (unless itís a numeric counter for an ordered list).
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #7
    Regular Coder
    Join Date
    Nov 2005
    Posts
    230
    Thanks
    1
    Thanked 0 Times in 0 Posts
    hm..thanks for the response...

    yah, i meant px...and i forgot to include my bg image

    hm i seem not to know the reason, i think it was based on experimenting rather than having a constant code, though i prefer the constant one...i'm just contented on having it worked...

    line-breaks? hm...hope i remembered it right, line-breaks supported but the content on the next line seem not be indented? or is it?

  • #8
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,305
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by ken_shoti View Post
    line-breaks? hm...hope i remembered it right, line-breaks supported but the content on the next line seem not be indented? or is it?
    Content on the subsequent lines will be indented by the same amount; the padding remains constant down the left side of the element. If you want the opposite, where only the first line is indented, you would use the text-indent property.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #9
    Regular Coder
    Join Date
    Nov 2005
    Posts
    230
    Thanks
    1
    Thanked 0 Times in 0 Posts
    hm...thanks for the tip...perhaps i will try those and explore more on css lists...Thanks


  •  

    Posting Permissions

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