469,352 Members | 1,641 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,352 developers. It's quick & easy.

vertically center an image on the left of a column with multiple rows?

TJ
I'd like to do this:

------------------
|-------------
XX |-------------
|-------------
------------------

This is a navigation header with an icon. Each row will have text.

Issue:
If there is fixed size text in those rows, then when the user "enlarges" the
text using his browser, that I'd like the image to become recentered
between the top and bottom line

I'll post my sample in a few hours...

Thanks,
Jul 20 '05 #1
8 2021
TJ
Significant notes:
1. I plan to have the icon file be determined by the user (the icon
corresponds to the page that the user is on)... so a simple background
image, I think, will not exactly be correct the way I understand it.

??
Jul 20 '05 #2
in post: <news:8r*******************@twister.socal.rr.com >
TJ <tj@getlostspammers.com> said:
I'd like to do this:

------------------
|-------------
XX |-------------
|-------------
------------------


#content{display:table;}
#imagethingy{width:100px;vertical-align:middle;display:table-cell;}

<div id="content">
<div id="imagethingy"><img 100px...></div>
</div>

not supported by IE

--
b r u c i e
Jul 20 '05 #3
TJ wrote:
I'd like to do this:

------------------
|-------------
XX |-------------
|-------------
------------------

This is a navigation header with an icon. Each row will have text.

Issue:
If there is fixed size text in those rows, then when the user "enlarges" the
text using his browser, that I'd like the image to become recentered
between the top and bottom line


Like on of these?
http://tranchant.plus.com/tmp/navicon

--
Mark.
Jul 20 '05 #4
TJ wrote:
Significant notes:
1. I plan to have the icon file be determined by the user (the icon
corresponds to the page that the user is on)... so a simple background
image, I think, will not exactly be correct the way I understand it.


If you use different id attributes for different pages, and vary the
background for each id. The example given:
<http://tranchant.plus.com/tmp/navicon> uses this:

..blah {
background-image: url(/computing/graphics/images/pixels);
background-position: 0% 50%;
background-repeat: no-repeat;
}

<div class="blah">
<p>Lorem ipsum...</p>
</div>

Instead, use this:

<div class="blah" id="home">
<p>Lorem ipsum...</p>
</div>

<div class="blah id="products">
<p>Lorem ipsum...</p>
</div>

..blah {
background-image: url(/computing/graphics/images/pixels); /*the default,
if no id is specified */
background-position: 0% 50%;
background-repeat: no-repeat;
}

#home {
background-image: url(elsewhere);
}

#products {
background-image: url(etc);
}

--
Matt
-----= Posted via Newsfeeds.Com, Uncensored Usenet News =-----
http://www.newsfeeds.com - The #1 Newsgroup Service in the World!
-----== Over 100,000 Newsgroups - 19 Different Servers! =-----
Jul 20 '05 #5
TJ
Fantastic!
--
TJ
Jul 20 '05 #6
TJ
Thats it!

--
TJ
Jul 20 '05 #7
TJ wrote in
<eg*****************@twister.socal.rr.com>
Thats it!


No, it's not.

--
PeterMcC
If you feel that any of the above is incorrect,
inappropriate or offensive in any way,
please ignore it and accept my apologies.
Jul 20 '05 #8
PeterMcC wrote:
TJ wrote in
<eg*****************@twister.socal.rr.com>
Thats it!


No, it's not.


Did I make a mistake?

--
Matt
-----= Posted via Newsfeeds.Com, Uncensored Usenet News =-----
http://www.newsfeeds.com - The #1 Newsgroup Service in the World!
-----== Over 100,000 Newsgroups - 19 Different Servers! =-----
Jul 20 '05 #9

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

19 posts views Thread by George Ziniewicz | last post: by
27 posts views Thread by FL | last post: by
5 posts views Thread by Wilhelm Kutting | last post: by
40 posts views Thread by Mark | last post: by
reply views Thread by pamelafluente | last post: by
2 posts views Thread by jerrygadd | last post: by
reply views Thread by zhoujie | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.