473,320 Members | 1,920 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Align two images in a table..one at top..one at bottom..how?

Hi folks. I'm trying to figure out how I can insert 2 different
graphics into a table cell and align one to the top and one to the
bottom using CSS. I used the "vertical align" to "top" in DW but
nothing happens. I don't understand why. Please help. Thanks.

Jul 26 '06 #1
7 3318
PTM
"ridergroov" <ri*********@comcast.netwrote in message
news:11*********************@75g2000cwc.googlegrou ps.com...
Hi folks. I'm trying to figure out how I can insert 2 different
graphics into a table cell and align one to the top and one to the
bottom using CSS. I used the "vertical align" to "top" in DW but
nothing happens. I don't understand why. Please help. Thanks.
there's a couple of ways to do it but it depends on what else is in the cell
with the two pics.

if its only the two pics then use the 'margin-bottom:VU;' tag applied to the
top pic and adjust the V (value) and U (units) according to how you want it
to display.

if you have text along with the pics then you can either use a third style,
specifically for the text if its only to float along side, or as a wrapper
for the whole cell contents if you want wrap round.

Phil
Jul 26 '06 #2
Thanks very much Phil. I did what you said and I can get the top image
exactly where I wnat it and move it around using the margin-bottom tag.
That works really well. The problem is with the rest of the stuff I
wnat to put in the table. If i position the cursor to the right of the
current image and type, it puts it way below the image. There is a big
space that I can't use at all in between the bottom of the image and
where the text starts typing. If I go to put an image in, it puts it
to the left of the image. It's as if nothing can go directly below the
image. Why does it do that and how do I fix it? Thanks very much for
your time.

PTM wrote:
"ridergroov" <ri*********@comcast.netwrote in message
news:11*********************@75g2000cwc.googlegrou ps.com...
Hi folks. I'm trying to figure out how I can insert 2 different
graphics into a table cell and align one to the top and one to the
bottom using CSS. I used the "vertical align" to "top" in DW but
nothing happens. I don't understand why. Please help. Thanks.

there's a couple of ways to do it but it depends on what else is in the cell
with the two pics.

if its only the two pics then use the 'margin-bottom:VU;' tag applied to the
top pic and adjust the V (value) and U (units) according to how you want it
to display.

if you have text along with the pics then you can either use a third style,
specifically for the text if its only to float along side, or as a wrapper
for the whole cell contents if you want wrap round.

Phil
Aug 1 '06 #3
On 26 Jul 2006 12:39:24 -0700, "ridergroov" <ri*********@comcast.netwrote:
>Hi folks. I'm trying to figure out how I can insert 2 different
graphics into a table cell and align one to the top and one to the
bottom using CSS. I used the "vertical align" to "top" in DW but
nothing happens. I don't understand why. Please help. Thanks.
It's hard to figure what you're trying to achieve here. Could you explain it
more fully? (And maybe give us a URI?)

Why do you want to put two images (and maybe some text) into the same cell in
the table? I would put one item per cell and arrange any other items in the
table using ROWSPAN and COLSPAN as appropriate.

Is it that you're a beginner? No harm in that; we all started out that way.
But since you can handle the hints you've already been given, you'll have no
trouble doing your table the right way.
Aug 2 '06 #4
Well I'm more of an I use to do HTML and didn't for a few years and
need major refreshing. I'm working on learning CSS more now so I was
kind of guided into using that for the most part. Try this url:
http://paymca.org/newy3/facilities.htm

It's not finished so don't mind the sloppiness. What I have is the tip
center main table centered using CSS and that table has two columns.
On the left you see the vertical nav menu. IN the right table you see
the "our facilities" box. That is actually another 2 column table
inside the main table that I first spoke of. I am using CSS to put the
"our facilities table" margin-bottom 150px for it's positioning. I
figured I could just throw another table right under that and just use
CSS with the margin-bottom and put a different pixel value and it would
position it under that. Apparently that is not the case. I guess the
best thing to do woudl be to split the right column of the main table
into another table? I guess I'm trying to stay away from that because
I was on another group and they basically blasted me for using tables
so I thought using more tables in my structure was a bad thing.
Anyway, I dont know what the best thing to do is to acheive what I
want. I want to be able to put text or other pictures under where the
"facilities" box is. I hope this explains it a little better.
Consider me a newb when you write back. I appreciate any info you
could give. Thanks.
Christopher P. Winter wrote:
On 26 Jul 2006 12:39:24 -0700, "ridergroov" <ri*********@comcast.netwrote:
Hi folks. I'm trying to figure out how I can insert 2 different
graphics into a table cell and align one to the top and one to the
bottom using CSS. I used the "vertical align" to "top" in DW but
nothing happens. I don't understand why. Please help. Thanks.

It's hard to figure what you're trying to achieve here. Could you explain it
more fully? (And maybe give us a URI?)

Why do you want to put two images (and maybe some text) into the same cell in
the table? I would put one item per cell and arrange any other items in the
table using ROWSPAN and COLSPAN as appropriate.

Is it that you're a beginner? No harm in that; we all started out that way.
But since you can handle the hints you've already been given, you'll have no
trouble doing your table the right way.
Aug 2 '06 #5
ALright. I notice that as soon as I add CSS (margin-bottom = 150px) to
the "facilities" table, I can no longer do anything directly below that
table. It jumps the cursor more than double the size of the table down
in that cell when I press enter. If i hit the right arrow key, it puts
the cursor in the left main table cell! I don't get this. Really
making me mad. What is going on?

ridergroov wrote:
Well I'm more of an I use to do HTML and didn't for a few years and
need major refreshing. I'm working on learning CSS more now so I was
kind of guided into using that for the most part. Try this url:
http://paymca.org/newy3/facilities.htm

It's not finished so don't mind the sloppiness. What I have is the tip
center main table centered using CSS and that table has two columns.
On the left you see the vertical nav menu. IN the right table you see
the "our facilities" box. That is actually another 2 column table
inside the main table that I first spoke of. I am using CSS to put the
"our facilities table" margin-bottom 150px for it's positioning. I
figured I could just throw another table right under that and just use
CSS with the margin-bottom and put a different pixel value and it would
position it under that. Apparently that is not the case. I guess the
best thing to do woudl be to split the right column of the main table
into another table? I guess I'm trying to stay away from that because
I was on another group and they basically blasted me for using tables
so I thought using more tables in my structure was a bad thing.
Anyway, I dont know what the best thing to do is to acheive what I
want. I want to be able to put text or other pictures under where the
"facilities" box is. I hope this explains it a little better.
Consider me a newb when you write back. I appreciate any info you
could give. Thanks.
Christopher P. Winter wrote:
On 26 Jul 2006 12:39:24 -0700, "ridergroov" <ri*********@comcast.netwrote:
>Hi folks. I'm trying to figure out how I can insert 2 different
>graphics into a table cell and align one to the top and one to the
>bottom using CSS. I used the "vertical align" to "top" in DW but
>nothing happens. I don't understand why. Please help. Thanks.
It's hard to figure what you're trying to achieve here. Could you explain it
more fully? (And maybe give us a URI?)

Why do you want to put two images (and maybe some text) into the same cell in
the table? I would put one item per cell and arrange any other items in the
table using ROWSPAN and COLSPAN as appropriate.

Is it that you're a beginner? No harm in that; we all started out that way.
But since you can handle the hints you've already been given, you'll have no
trouble doing your table the right way.
Aug 2 '06 #6
On 2 Aug 2006 09:49:42 -0700, "ridergroov" <ri*********@comcast.netwrote:
>Well I'm more of an I use to do HTML and didn't for a few years and
need major refreshing. I'm working on learning CSS more now so I was
kind of guided into using that for the most part. Try this url:
http://paymca.org/newy3/facilities.htm

It's not finished so don't mind the sloppiness. What I have is the tip
center main table centered using CSS and that table has two columns.
On the left you see the vertical nav menu. IN the right table you see
the "our facilities" box. That is actually another 2 column table
inside the main table that I first spoke of. I am using CSS to put the
"our facilities table" margin-bottom 150px for it's positioning. I
figured I could just throw another table right under that and just use
CSS with the margin-bottom and put a different pixel value and it would
position it under that. Apparently that is not the case. I guess the
best thing to do woudl be to split the right column of the main table
into another table? I guess I'm trying to stay away from that because
I was on another group and they basically blasted me for using tables
so I thought using more tables in my structure was a bad thing.
Anyway, I dont know what the best thing to do is to acheive what I
want. I want to be able to put text or other pictures under where the
"facilities" box is. I hope this explains it a little better.
Consider me a newb when you write back. I appreciate any info you
could give. Thanks.
I took a look at the source, but I really couldn't see through all the
Javascript to tell what's going on with the HTML. Not a criticism, just a
fact.

A lot of people will jump on you for using tables to lay out a page. (Be
glad you weren't here four or five years ago when the battles between
"purists" and "deesyners" were going hot and heavy. ;) I agree using tables
purely for layout is not optimum, but since I do it myself I can't object too
loudly.

Anyway, stick with the principle of one item per table cell and you'll
save yourself a lot of grief. That way you can use CSS to fine-tune the
spacings for any item without messing up something else.

You should also think about getting rid of the spacer gifs and the
BGCOLOR statements in the tables. Doing that sort of thing with CSS will make
your pages much easier to maintain.

What you've got looks like a decent start though.

Best,

CPW
Aug 3 '06 #7
Thanks very much for your info. I dont know if you are still following
this thread or not but if you could look at it one last time. I removed
the table that had all the java rollovers so it should look a little
cleaner. Thank you again even if I dont' hear back. Much appreciated.
Christopher P. Winter wrote:
On 2 Aug 2006 09:49:42 -0700, "ridergroov" <ri*********@comcast.netwrote:
Well I'm more of an I use to do HTML and didn't for a few years and
need major refreshing. I'm working on learning CSS more now so I was
kind of guided into using that for the most part. Try this url:
http://paymca.org/newy3/facilities.htm

It's not finished so don't mind the sloppiness. What I have is the tip
center main table centered using CSS and that table has two columns.
On the left you see the vertical nav menu. IN the right table you see
the "our facilities" box. That is actually another 2 column table
inside the main table that I first spoke of. I am using CSS to put the
"our facilities table" margin-bottom 150px for it's positioning. I
figured I could just throw another table right under that and just use
CSS with the margin-bottom and put a different pixel value and it would
position it under that. Apparently that is not the case. I guess the
best thing to do woudl be to split the right column of the main table
into another table? I guess I'm trying to stay away from that because
I was on another group and they basically blasted me for using tables
so I thought using more tables in my structure was a bad thing.
Anyway, I dont know what the best thing to do is to acheive what I
want. I want to be able to put text or other pictures under where the
"facilities" box is. I hope this explains it a little better.
Consider me a newb when you write back. I appreciate any info you
could give. Thanks.

I took a look at the source, but I really couldn't see through all the
Javascript to tell what's going on with the HTML. Not a criticism, just a
fact.

A lot of people will jump on you for using tables to lay out a page. (Be
glad you weren't here four or five years ago when the battles between
"purists" and "deesyners" were going hot and heavy. ;) I agree using tables
purely for layout is not optimum, but since I do it myself I can't object too
loudly.

Anyway, stick with the principle of one item per table cell and you'll
save yourself a lot of grief. That way you can use CSS to fine-tune the
spacings for any item without messing up something else.

You should also think about getting rid of the spacer gifs and the
BGCOLOR statements in the tables. Doing that sort of thing with CSS will make
your pages much easier to maintain.

What you've got looks like a decent start though.

Best,

CPW
Aug 3 '06 #8

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

Similar topics

10
by: Markus Ernst | last post by:
Hi I have a strange problem with vertical-align. The case can be viewed at http://www.brainput.info/geschichte.html. HTML code: <div id="bild"><img src="geschichte.gif" width="274"...
2
by: Newry | last post by:
Hi, I'm trying to position something with CSS, to have the equivalent of: <table> <tr> <td><img src="foo.jgp"></td> <td valign=bottom>Label</td> </tr> </table>
2
by: Thomas Scheiderich | last post by:
Is there a way to make a section of a <td> tag to go to the bottom of the cell? Below is a portion of my page. The <td class="BodyText"> tag has a "vertical-align:top" in the css file to move...
2
by: gee.sucka.foo | last post by:
I have a few thumbnail images each surrounded by a few links. So I put the thumbnail and the links in a div tag and set the div's to float:left. So my intent is to have the thumbnails wrap at the...
0
by: laredotornado | last post by:
Hello, I'm trying to write TABLE-free HTML pages, but I'm having a problem with rewriting a particular block of code using DIVs and CSS. I want to align the "More" button at the bottom right of...
3
by: torbs | last post by:
Strange behaviour in ie7. A collegue of mine put several images into a page using JCE in Joomla. JCE have the option to align these images and he left aligned every single one - to create a...
2
by: vinit_mahajan99 | last post by:
Hello all, I want to align the images and controls at the bottom of a master page or at the right side. I tried to do it with the table but I was not successful. The image should be seen at...
2
by: yangtono | last post by:
Hi, I am creating a table to list some data. The table is using a sorting and highlight function that I found from the net. I can't attach image here, basically html will wrap the heading,...
40
by: maya | last post by:
hi, how do I get text to vertical-align inside a div? http://www.mayacove.com/misc/home.html vertical-align should work, according to this:...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

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.