473,581 Members | 2,899 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Positioning list-style-image: url(image.gif); images

Hello,

I use small 15x15 images as 'bullets' in the list. The vertical center of
each image is well above the vertical center of the link item text. Damn if
I can't figure out how vertically align on center.

Does anybody have any tips?

<%= Clinton Gallagher
METROmilwaukee (sm) "A Regional Information Service"
NET csgallagher AT metromilwaukee. com
URL http://metromilwaukee.com/
URL http://clintongallagher.metromilwaukee.com/
Sep 30 '05 #1
11 24327
Els
clintonG wrote:
Hello,

I use small 15x15 images as 'bullets' in the list. The vertical center of
each image is well above the vertical center of the link item text. Damn if
I can't figure out how vertically align on center.

Does anybody have any tips?


li{
list-style:none;
background:url( image.gif) no-repeat 0px .2em; /* replace .2em by
whatever works for you */
padding-left:[width of image plus some space];
}

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Sep 30 '05 #2
Hi,
if you want the bullet-image centered you can use:
background:url( image.gif) no-repeat 0 50%;
or
background:url( image.gif) no-repeat 0 middle;

Chris

Sep 30 '05 #3
Els
ch***@leipold.w s wrote:
Hi,
if you want the bullet-image centered you can use:
background:url( image.gif) no-repeat 0 50%;
or
background:url( image.gif) no-repeat 0 middle;


That would only look good on list items that are guaranteed not to
wrap.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: The Beatles - You Won't See Me
Sep 30 '05 #4
Els
Els wrote:
ch***@leipold.w s wrote:
Hi,
if you want the bullet-image centered you can use:
background:url( image.gif) no-repeat 0 50%;
or
background:url( image.gif) no-repeat 0 middle;


That would only look good on list items that are guaranteed not to
wrap.


Plus 'middle' isn't a value for background-position.
Plus '0' isn't compatible with 'center'.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: The Beatles - What Goes On
Sep 30 '05 #5
<snip />

Thank you both. Els first solution works very well noting I need to use
inline declarations as I'm using a different image for each list item.

In closing, would either of you have a referral to a page that explains the
order and grouping syntax for the application of values to a specific
attribute? Especially when using the short form which I haven't memorized
yet.

// example
background:url( image.gif) no-repeat 0px .2em;

0px top, bottom?
..2em right, left?

<%= Clinton Gallagher
Sep 30 '05 #6
Els
clintonG wrote:
<snip />

Thank you both. Els first solution works very well noting I need to use
inline declarations as I'm using a different image for each list item.

In closing, would either of you have a referral to a page that explains the
order and grouping syntax for the application of values to a specific
attribute? Especially when using the short form which I haven't memorized
yet.
You mean like this?
http://www.w3.org/TR/CSS21/colors.ht...def-background
// example
background:url( image.gif) no-repeat 0px .2em;

0px top, bottom?
.2em right, left?


In the background-position property, the first value is from the left,
the second is from the top.

So "0px .2em" means 0px from the left, .2em from the top.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Deep Purple - Burn
Sep 30 '05 #7
<snip />
You mean like this?
http://www.w3.org/TR/CSS21/colors.ht...def-background


<snip />

Yes but...

I hoped to find a quick reference that is easier to read than 'official'
specifications which is why I think they call them 'quick' :-)
Furthermore, the attribute values for positioning are not consistent from
one element type to another which is why I need a quick reference.

// background-position (what other attributes may conform to this pattern?)
left, top

// margins and padding
top, right, bottom, left

Are there any other variants you may be aware of?

<%= Clinton Gallagher
Sep 30 '05 #8
clintonG wrote:
<snip />
You mean like this?
http://www.w3.org/TR/CSS21/colors.ht...def-background

<snip />

Yes but...

I hoped to find a quick reference that is easier to read than 'official'
specifications which is why I think they call them 'quick' :-)
Furthermore, the attribute values for positioning are not consistent from
one element type to another which is why I need a quick reference.

// background-position (what other attributes may conform to this pattern?)
left, top

// margins and padding
top, right, bottom, left


I think that's basically it. For attributes that are intrinsically a
single pair of values, one horizontal and one vertical, the horizontal
one comes first: left, then top. This follows from the standard order
for coordinates on a two-dimensional graph: first the x value
(horizontal), then the y value.

Where there are up to four values, the order you show above for margins
and paddings seems to be the standard in CSS.
Sep 30 '05 #9
Els
clintonG wrote:
<snip />
You mean like this?
http://www.w3.org/TR/CSS21/colors.ht...def-background
<snip />

Yes but...


:-)
I hoped to find a quick reference that is easier to read than 'official'
specifications which is why I think they call them 'quick' :-)


I don't know of any quick reference, but maybe you haven't seen this
page yet:
http://www.w3.org/TR/CSS21/propidx.html
It may take a bit of practice before you decipher the values (and
order) given for 'background-position' quickly, but once you're used
to it, it's a quick reference, with links to more detailed
explanations when you need it.

[snip - answered by Harlan already]

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Pearl Jam - Deep
Sep 30 '05 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
5344
by: Peter Cartwright | last post by:
Positioning four corner images in a stretchable box is possible using a table. But can it be done in CSS?
0
1685
by: miked | last post by:
Hi, I'm using relative positioning, and trying to shift the position of two gifs used to link to other pages on my site. The end result is fine in IE and Opera (the link gifs move to the required position), but doesn't seem to work in Netscape. The code I'm using is: A.1 {position: relative; left: 20px; top:25px} A.26 {position:...
1
1847
by: no0bodyhome | last post by:
Why am I having so much trouble positioning divs? Am I in a tables mindset here? Why doesn't content flow below or alongside where it is suppose to? I created the example below to give you some idea of what I mean. Please keep in mind, content is within the specified width and may be images or text. For some reason it just seems to have...
6
2825
by: hsomob1999 | last post by:
so i have a <ul> and I allow the user to append items to it. The problem is that on mozilla the <span class="line"> which is just a line to divide the sections gets overlaped and doesnt move down and adjust to the newly added items like it does in iE. It just occured to me that i dont really have to use a span, and a html <hr> tag could do...
2
1768
by: NASAdude | last post by:
I'm working on a report that shows a lot of data, so I've set it up so it is 2-pages wide in landscape view for each record. ie: The report is 22" wide (less margins). On the left page there are three images, and there are two images on the right page. The images are stored in a directory, and only path\filename info is stored in the...
6
1746
by: JD | last post by:
Hi all, Can anyone tell me is there a way to get a list of file types either supported on the server or clients computer and bind it to a drop down list in C# Thanks Jonathan Dixon
7
2819
by: John Williams | last post by:
Does anyone know a way of creating a PNG file containing several GIF files programmatically (using Visual Basic)? Here's what I do manually in Fireworks. Each Gif is 200 x 200 pixels. 1. Create a new canvas, 400 x 400. 2. Import Gif 1 and position in top left corner (x=0, y=0) 3. Import Gif 2 and position in bottom left corner (x=0,...
1
3194
by: Mika M | last post by:
I have made Setup and Deployment Project for my application. This application uses couble of Crysral Report .rpt -files, so I included following into Setup and Deployment Project ... - Crystal_Database_Access2003.msm - Crystal_Database_Access2003_enu.msm - Crystal_Managed2003.msm - Crystal_regwiz2003.msm ....and suddenly my...
0
3224
by: Brian Henry | last post by:
Here is another virtual mode example for the .NET 2.0 framework while working with the list view. Since you can not access the items collection of the list view you need to do sorting another way... here is my code on how I did it to help anyone starting out get an idea of how to use virtual mode in ..NET 2.0 Imports...
13
3133
by: Egil Helland | last post by:
I am trying to create a breadcrumb with both icons and text, looking like: Home > Trail > Trail Now, how on earth do I get the images and text to vertically align so that the vertical center of the text is identical to the vertical center of the images, with margins top and bottom as well as borders top and bottom? And retain...
0
7883
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, well explore What is ONU, What Is Router, ONU & Routers main...
0
7808
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
0
8158
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...
0
8312
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
1
7917
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
1
5685
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupr who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
5366
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
0
3835
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
2311
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.