Centering an img with text

[TC]

I'm trying to center the Yahoo Join Groups image with the text below
it. Using markup in the doc, I'd just use <center> tags. But I'm using
css. How can I do this?

<!-- Add link to join Yahoo Groups -->
<a href="http://groups.yahoo.com/group/floridahunters/join">
<img class="yahooGrp"
src="http://us.i1.yimg.com/us.yimg.com/i/yg/img/i/us/ui/join.gif"
alt="" />Join FloridaHunters</a>

Can be seen at:

http://www.unitedhunters.org/index.html

TIA!

[Evertjan.]

TC wrote on 06 nov 2005 in comp.infosystems.www.authoring.stylesheets:

I'm trying to center the Yahoo Join Groups image with the text below
it. Using markup in the doc, I'd just use <center> tags. But I'm using
css. How can I do this?

<!-- Add link to join Yahoo Groups -->
<a href="http://groups.yahoo.com/group/floridahunters/join">
<img class="yahooGrp"
src="http://us.i1.yimg.com/us.yimg.com/i/yg/img/i/us/ui/join.gif"
alt="" />Join FloridaHunters</a>

Can be seen at:

http://www.unitedhunters.org/index.html

<h3>Magazines</h3>
<ul>
<li><a href="http://www.floridawildlifemagazine.com/">Florida
Wildlife</a></li>
<li><a href="http://www.woodsnwater.net/">Woods &amp; Water</a>
</li>
</ul>

<!-- Add link to join Yahoo Groups -->

<div style='text-align:center;'>

<a href="http://groups.yahoo.com/group/floridahunters/join">
<img class="yahooGrp"
src="http://us.i1.yimg.com/us.yimg.com/i/yg/img/i/us/ui/join.gif"
alt="" />Join FloridaHunters</a>

</div>

</div>
<!-- End Navigation -->
--
Evertjan.
The Netherlands.
(Replace all crosses with dots in my emailaddress)

[TC]

Evertjan. wrote:

TC wrote on 06 nov 2005 in comp.infosystems.www.authoring.stylesheets:

I'm trying to center the Yahoo Join Groups image with the text below
it. Using markup in the doc, I'd just use <center> tags. But I'm
using css. How can I do this?

<!-- Add link to join Yahoo Groups -->
<a href="http://groups.yahoo.com/group/floridahunters/join">
<img class="yahooGrp"
src="http://us.i1.yimg.com/us.yimg.com/i/yg/img/i/us/ui/join.gif"
alt="" />Join FloridaHunters</a>

Can be seen at:

http://www.unitedhunters.org/index.html

<h3>Magazines</h3>
<ul>
<li><a
href="http://www.floridawildlifemagazine.com/">Florida
Wildlife</a></li> <li><a
href="http://www.woodsnwater.net/">Woods &amp; Water</a> </li>
</ul>

<!-- Add link to join Yahoo Groups -->

<div style='text-align:center;'>

<a href="http://groups.yahoo.com/group/floridahunters/join">
<img class="yahooGrp"
src="http://us.i1.yimg.com/us.yimg.com/i/yg/img/i/us/ui/join.gif"
alt="" />Join FloridaHunters</a>

</div>

</div>
<!-- End Navigation -->

Arggg! That was too easy. I was thinking it would be much harder.
Thanks!

[Haines Brown]

"TC" <no*****@yahoo.com> writes:

I'm trying to center the Yahoo Join Groups image with the text below
it. Using markup in the doc, I'd just use <center> tags. But I'm using
css. How can I do this?

I only mention the method I use because I consider it a hack and I'd
be interested in hearing of a more elegant solution.

div.image-container { width: XXXpx; }
#image-name { width: XXXpx; height: XXXpx; }
div.image-container {float: left;}

<div class="image-container">
<img id="image-name" src="NNN.png" alt="[image identifier]" />
<div>
<span>Caption text</span>
</div>
</div>

--

Haines Brown
KB1GRM

[Jim Moe]

TC wrote:

I'm trying to center the Yahoo Join Groups image with the text below
it. Using markup in the doc, I'd just use <center> tags. But I'm using
css. How can I do this?

..captioned-figure { text-align: center; }
..captioned-figure img { border: 0; }

<p class="captioned-figure">
<a href="http://groups.yahoo.com/group/floridahunters/join">
<img src="http://us.i1.yimg.com/us.yimg.com/i/yg/img/i/us/ui/join.gif"
alt="" />
<br />Join FloridaHunters</a>
</p>
This works for floating the image+caption as well. Just add float:left
or float:right to "captioned-figure".

It would save a little load time if you download the image and serve it
locally rather than link to it directly.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[TC]

Jim Moe wrote:

TC wrote:

I'm trying to center the Yahoo Join Groups image with the text below
it. Using markup in the doc, I'd just use <center> tags. But I'm
using css. How can I do this?

.captioned-figure { text-align: center; }
.captioned-figure img { border: 0; }

<p class="captioned-figure">
<a href="http://groups.yahoo.com/group/floridahunters/join">
<img src="http://us.i1.yimg.com/us.yimg.com/i/yg/img/i/us/ui/join.gif"
alt="" />
<br />Join FloridaHunters</a>
</p>
This works for floating the image+caption as well. Just add
float:left or float:right to "captioned-figure".

It would save a little load time if you download the image and serve
it locally rather than link to it directly.

Good idea! Done.

[Evertjan.]

Jim Moe wrote on 07 nov 2005 in
comp.infosystems.www.authoring.stylesheets:

<img
src="http://us.i1.yimg.com/us.yimg.com/i/yg/img/i/us/ui/join.gif"
alt="" /> It would save a little load time if you download the image and
serve it
locally rather than link to it directly.

Why?

could be that http://us.i1.yimg.com is much faster than your own server.

--
Evertjan.
The Netherlands.
(Replace all crosses with dots in my emailaddress)

[Jim Moe]

Evertjan. wrote:

It would save a little load time if you download the image and
serve it locally rather than link to it directly.

Why?

could be that http://us.i1.yimg.com is much faster than your own server.

It may be. But then there is the DNS lookup, establishing another
connection, and that the image may move somewhere else, or disappear
altogether, spontaneously.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[Evertjan.]

Jim Moe wrote on 07 nov 2005 in
comp.infosystems.www.authoring.stylesheets:

Evertjan. wrote:

It would save a little load time if you download the image and
serve it locally rather than link to it directly.

Why?

could be that http://us.i1.yimg.com is much faster than your own
server.

It may be. But then there is the DNS lookup, establishing another
connection, and that the image may move somewhere else, or disappear
altogether, spontaneously.

So it is, Jim, but that is not important as loading time.

--
Evertjan.
The Netherlands.
(Replace all crosses with dots in my emailaddress)

[otto]

Apart from the maintenance / reliability headache already mentioned it
will take more than 1.5k data plus additional and possibly large
latencies just to lookup the other server and establish the connection
to it.

Unless its a large image or the server is a slug I very much doubt a
visitor would ever get such a small image delivered quicker from
another site.

I say copy it locally (if u r allowed).

[Evertjan.]

otto wrote on 07 nov 2005 in comp.infosystems.www.authoring.stylesheets:

Apart from the maintenance / reliability headache already mentioned it
will take more than 1.5k data plus additional and possibly large
latencies just to lookup the other server and establish the connection
to it.

Unless its a large image or the server is a slug I very much doubt a
visitor would ever get such a small image delivered quicker from
another site.

This is not email, but usenet, so please follow usenet Netiquette and quote
what you are replying on.

--
Evertjan.
The Netherlands.
(Replace all crosses with dots in my emailaddress)