...

View Full Version : Vertical alignment bullets



ken_shoti
05-13-2007, 07:58 AM
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:


<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...


<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


list-style-image:url(bullet.gif)

seems to be much more worst, alignment becomes more wrong

harbingerOTV
05-13-2007, 08:35 AM
assuming your image can be used as a background...



<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.

ken_shoti
05-13-2007, 01:01 PM
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

Arbitrator
05-14-2007, 10:37 AM
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 (http://www.w3.org/TR/CSS21/colors.html#propdef-background-position) if interested as to how it works.


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... thanksUsing 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 (http://www.jsgp.us/demos/CF114078.html) of the below 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 (http://www.w3.org/TR/css3-lists/).

ken_shoti
05-14-2007, 12:29 PM
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



.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...

Arbitrator
05-14-2007, 02:32 PM
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.


now i have this 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.


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).

ken_shoti
05-24-2007, 01:41 PM
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?

Arbitrator
05-25-2007, 12:46 AM
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.

ken_shoti
05-27-2007, 04:02 PM
hm...thanks for the tip...perhaps i will try those and explore more on css lists...Thanks



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum