Vertical center on images and text at the same line

#1

I am trying to create a breadcrumb with both icons and text, looking
like:

[img] Home > [img] Trail > [img] 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 cross-browser compability?

-e

--
egil helland - http://egil.net

#2

egil.NOSPAM (AT) egil (DOT) net (Egil Helland) wrote:

Quote:

I am trying to create a breadcrumb with both icons and text, looking
like:

[img] Home > [img] Trail > [img] Trail

What are the images for? They seem at best useless, maybe worse.

Quote:

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 cross-browser compability?

How are the images coded, in the HTML or in CSS?

--
Spartanicus

#3

Spartanicus <invalid (AT) invalid (DOT) invalid> wrote:

Quote:

egil.NOSPAM (AT) egil (DOT) net (Egil Helland) wrote:

I am trying to create a breadcrumb with both icons and text, looking
like:

[img] Home > [img] Trail > [img] Trail

What are the images for? They seem at best useless, maybe worse.

Probably worse...

Quote:

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 cross-browser compability?

How are the images coded, in the HTML or in CSS?

HTML

--
egil helland - http://egil.net

#4

egil.NOSPAM (AT) egil (DOT) net (Egil Helland) wrote:

Quote:

[img] Home > [img] Trail > [img] Trail

What are the images for? They seem at best useless, maybe worse.

Probably worse...

Then you should remove them.

--
Spartanicus

#5

Spartanicus <invalid (AT) invalid (DOT) invalid> wrote:

Quote:

egil.NOSPAM (AT) egil (DOT) net (Egil Helland) wrote:

[img] Home > [img] Trail > [img] Trail

What are the images for? They seem at best useless, maybe worse.

Probably worse...

Then you should remove them.

I would like to know how to do positioning like this, regardless of
whether you find the images useless here or not.

--
egil helland - http://egil.net

#6

egil.NOSPAM (AT) egil (DOT) net (Egil Helland) wrote:

Quote:

[img] Home > [img] Trail > [img] Trail

What are the images for? They seem at best useless, maybe worse.

Probably worse...

Then you should remove them.

I would like to know how to do positioning like this, regardless of
whether you find the images useless here or not.

This is a discussion group, post here and we'll discuss the implications
of what you want to do. If you're lucky you'll get good advice on best
authoring practices. It's coincidental if that happens to match what you
want to do.

--
Spartanicus

#7

egil.NOSPAM (AT) egil (DOT) net (Egil Helland) wrote in
news:1hb5xrw.k4enge12nb96wN%egil.NOSPAM (AT) egil (DOT) net:

Quote:

I am trying to create a breadcrumb with both icons and text, looking
like:

[img] Home > [img] Trail > [img] 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 cross-browser compability?

-e

See http://alamo-smccann.nmsu.edu/ and hover over one of the menu items
below the row of pictures. Is that kind of what you want?

<div id="primaryNav">
<ul>
<li id="current"><a href="/students/">Current Students</a></li>
<li id="prospective"><a href="/prospective/">Prospective Students
</a></li>
<li id="faculty"><a href="/facstaff/">Faculty & Staff</a>
</li>
<li id="alumni"><a href="/alumni/">Alumni</a></li>
<li id="visitors"><a href="/visitors/">Visitors</a></li>
</ul>
</div>

#primaryNav a:hover, #primaryNav a:active {
color:white;
background-color:#882345;
background: url("/image/arrow.gif") no-repeat left;
}
Note how the image is placed in the background. You could also use the
image with #primaryNav a:link, #primaryNav a:visited if you wanted it
visible all the time.
Then apply text-align:center to #primaryNav

HTH

--
Stan McCann, "Uncle Pirate" http://stanmccann.us/
Webmaster, NMSU at Alamogordo http://alamo.nmsu.edu/
Now blocking Google Grouper posts and replies.
http://blinkynet.net/comp/uip5.html

#8

Stan McCann <me (AT) stanmccann (DOT) us> wrote:

Quote:

egil.NOSPAM (AT) egil (DOT) net (Egil Helland) wrote in
news:1hb5xrw.k4enge12nb96wN%egil.NOSPAM (AT) egil (DOT) net:

I am trying to create a breadcrumb with both icons and text, looking
like:

[img] Home > [img] Trail > [img] 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 cross-browser compability?

-e

See http://alamo-smccann.nmsu.edu/ and hover over one of the menu items
below the row of pictures. Is that kind of what you want?

div id="primaryNav"
ul
li id="current"><a href="/students/">Current Students</a></li
li id="prospective"><a href="/prospective/">Prospective Students
/a></li
li id="faculty"><a href="/facstaff/">Faculty & Staff</a
/li
li id="alumni"><a href="/alumni/">Alumni</a></li
li id="visitors"><a href="/visitors/">Visitors</a></li
/ul
/div

#primaryNav a:hover, #primaryNav a:active {
color:white;
background-color:#882345;
background: url("/image/arrow.gif") no-repeat left;
}
Note how the image is placed in the background. You could also use the
image with #primaryNav a:link, #primaryNav a:visited if you wanted it
visible all the time.
Then apply text-align:center to #primaryNav

HTH

GRRRREAT! Thanks a lot, this was exactly what I wanted!

You made my
day

-e

--
egil helland - http://egil.net

#9

Spartanicus <invalid (AT) invalid (DOT) invalid> wrote:

Quote:

egil.NOSPAM (AT) egil (DOT) net (Egil Helland) wrote:

[img] Home > [img] Trail > [img] Trail

What are the images for? They seem at best useless, maybe worse.

Probably worse...

Then you should remove them.

I would like to know how to do positioning like this, regardless of
whether you find the images useless here or not.

This is a discussion group, post here and we'll discuss the implications
of what you want to do. If you're lucky you'll get good advice on best
authoring practices. It's coincidental if that happens to match what you
want to do.

Wow, so you are the stylesheets group police? I did not notice those
stars and stripes on your shoulder! I worship you and the ground that
you walk on

Just rant and troll on all you want, I got a superb answer right on
topic from Stan McCann. Have a nice day!

-e

--
egil helland - http://egil.net