HTML - How To Align Text To Top In A Cell?

I am attempting to have a table cell that is outlined. No matter how much text ends up in that table cell, the top part should align to the top, and the bottom part should align to the bottom. The cell size/border needs to be consistent across the row (which is why I didn't just float some divs).

I have spent hours looking online, and have found various "solutions" that do not in fact seem to work.

Here is my 'sample' code. I know that the valign isn't working, I just put it in there so it makes sense "logically" what I am trying to do.

Thank you in advance for any help you can provide.

Code:

<table width="600">
	<tr>
    	<td style="border:1px grey solid; width:150px;">
        	<table valign="top">
            	<tr>
                	<td>Float at the top!Float at the top!Float at the top!Float at the top!Float at the top!Float at the top!Float at the top!Float at the top!Float at the top!Float at the top!Float at the top!Float at the top!</td>
                </tr>
            </table>
            <table valign="bottom">
            	<tr>
                	<td>Float at the bottom!</td>
                </tr>
            </table>
        </td>
    	<td style="border:1px grey solid; width:150px;">
        	<table valign="top">
            	<tr>
                	<td>Float at the top!Float at the top!Float at the top!Float at the top!Float at the top!Float at the top!</td>
                </tr>
            </table>
            <table valign="bottom">
            	<tr>
                	<td>Float at the bottom!</td>
                </tr>
            </table>
        </td>
    	<td style="border:1px grey solid; width:150px;">
        	<table valign="top">
            	<tr>
                	<td>Float at the top!</td>
                </tr>
            </table>
            <table valign="bottom">
            	<tr>
                	<td>Float at the bottom!</td>
                </tr>
            </table>
        </td>
    	<td style="border:1px grey solid; width:150px;">
        	<table valign="top">
            	<tr>
                	<td>Float at the top!Float at the top!Float at the top!</td>
                </tr>
            </table>
            <table valign="bottom">
            	<tr>
                	<td>Float at the bottom!</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

I have a site which I regularly update but rather than using a flat colour for some of the cells I am now using images as a cell background. This obviously has ramifications when putting text over the top cause the depth of colour means the text can be hard to read.
What I want to do is create a layer in the cell which means that the text sits on a opaque layer which is lighter than the background image.
My intended desired effect would be similar to what is at http://iankearns.dialnet.com/images/desired_effect.jpg or as attached but rather than doing this as an image I would prefer to do it as HTML or DHTML (is possible) as this would mean changing the text easier
Thanks to anyone who can assist

Hi, I can make basic websites but I am not very skilled in web design. I am in need of help.

Since I made the website inside Photoshop using slices, I need to create a table at the center of the website. Since the center of the website is made of slices of jpeg images, I cannot create a table nor add any text here without disturbing the images.

I can get around this by making the pictures part of the cell background, but when I try and remove the images in the center after, the cell background images repeat over and over, and the whole website is unaligned and a big mess! Below is a picture of what I mean...



I have included a zip file containing my html pages and image folder. Please download it he

http://homepage.ntlworld.com/stephan.../Portfolio.zip

The file I need help with is work.html. I can ensure you it's virus free. I want to show my photoshop work off on a website, this is the reason why I am making this website.

When you format some text in a table cell (at least with <p> or <li> tags), some browsers drop it down one line, so that it can't fully valign top. Apparently Safari and Firefox do this. (IE seems to not do it - it valigns it to the top). Others may exhibit this behaviour, but these are all I've tested. Here is an example (view with Safari or Firefox to see problem):
http://www.fisheyemedia.net/test/
Is there any way around this? Maybe with CSS? I have a more complex table in 2 columns and am trying to get vertical alignments to match. Thanks.

G'day guys,

This will probably be a simple one for you.

I have a table set to 150px, it has to be this width, and I need to have text indented in each cell. Trouble is, when the text wraps to the next line in the cell, it doesn't stay inline or indented.

How do I get the text to stay indented when it travels to the next line?

Thanks very much for any help you can give me.

Cheers,
Jamie

Hi there

I'm pretty new to HTML, and am really stuck, and if anyone could point me in the right direction that would be awesome!

I am trying align text on the left and right sides on the same line, and in between two single boarder lines (top and bottom). I have read up that using a float works which it has, but I am having trouble getting it to sit in between two lines that I have created and in the correct formatting.

Below is my code and you should see what I mean...the text is currently sitting unformatted, and underneath the two lines, rather than formatted and inbetween the two lines.

Any pointers would be appreciated
Thanks, J

</tr>
</tbody></table>
<table border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
<td style="padding-left: 40px;" width="610"><p style="border-top: 1px solid rgb(186, 186, 186); border-bottom: 1px solid rgb(186, 186, 186); padding-top: 4px; padding-bottom: 4px; font-family: Arial,Helvetica,sans-serif; font-size: 70%; color: rgb(130, 130, 130);">
<div style="float:left">TEXT HERE</div><div style="float:right">TEXT HERE</div></p></td>
</tr>

I'm trying to use the SPAN tag to override a DIV's attributes wherein it is initially TEXT-ALIGN: LEFT;. I thought for sure that I could override it with the SPAN tag but no luck. I'm doing it this way because I want a portion of the content in the DIV to align left and the other to align right.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#quote { width: 500px; }
#quoteTop { width: 460px; height: 40px; padding: 0 20px; background: url('images/quoteTop.gif'); text-align: left; }
#quoteMiddle { width: 460px; padding: 0 20px 20px; background: url('images/quoteMiddle.gif'); text-align: left; }
#quoteBottom { width: 460px; height: 80px; padding: 0 20px; background: url('images/quoteBottom.gif'); text-align: left; }
</style>
</head>

<body>

<div id="quote">
	<div id="quoteTop">
	<span style="text-align: right;"><a href="/">top</a></span>
	</div>
	<div id="quoteMiddle">
blah blah blah blah blah blah blah <em>blah blah blah</em> blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah <strong>blah blah blah</strong> blah blah blah blah blah blah-blah blah&mdash;blah blah blah blah blah blah blah blah blah BLAH! blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
	</div>
	<div id="quoteBottom">
J. Doe
	</div>
</div>

</body>
</html>

Is overriding code a bad idea for what I'm trying to get done?

Hi there,

I am trying to align the text of a drop down box , so that it appears in the centre across all browsers.

In the code below I have sucessfully indented the text from the left by 5px and sucessfully aligned it in the centre (vertically)

However as I ahve used padding-top, it has also affected the drop down icon (v).

Is there a way to align the text in the drop down without the drop down icon being affected across IE7, 8 , FF, and chrome ?

I have tried adding line-height to the text and that doesnt work either.

Thanks for your help


HTML Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Text align center</title>
    <style type="text/css">
        #selection
        {
            color: #999999;
            display: block;
            font-family: Arial;
            font-size: 11px;
            height: 24px;
            padding: 0;
            width: 382px;
            line-height:20px;
            padding-left:5px;
        }
    </style>
</head>
<body>
    <select id="selection">
        <option value="0">Selection 1</option>
        <option value="1">Selection 2</option>
        <option value="2">Selection 3</option>
        <option value="3">Selection 4</option>
        <option value="4">Selection 5</option>
    </select>
</body>
</html>

Hello HTML experts; a nooby here. Searched for this and found tons of posts but none seemed to fit my question or fix my problem. To show what I am trying to do, I put all the details he http://www.sticksite.com/align/ Is there a solution that a nooby can understand?

THANKS for your time!

I wanted to create 2 tables side by side with each other to form 2 columns. What I did was nested 2 tables into 1 table. However when I did this the text of one table is aligned halfway down the column. I tried aligning it to the top but it just stays there. Any idea what the issue is here. I have attached a picture and the source code to show what's going on here. Any help is much appreciated.

Jesse

1st time post and an amatuer with no formal teaching of html.

I have placed an image on my web page and i want the text i enter to center itself next to the image. I have used align="Center" or Align="middle" and it does that perfectly for the 1st line of text. The issue is when the text spills over to the next line it goes under the image. I have tried a <br /> after the last word of the lines and that did nothing.

How can I get all the lines to be centered? Centered meaning from top to bottom not side to side.

Thanks,
Cardgunner

Hi

I'm still a newbie to HTML coding hence i would most appreciate your assistance.

I'm writing a few articles for my site and making use of images in my pieces.

However, i'm having alot of problems aligning the caption just right in the middle under the image. I would also like to add a hyperlink to the caption to open in a new window.

I've tried numerous tutorials on the web but still cant get it.

Would most appreciate some advice.

Thank you

Why doesn't this work? I'm trying color the text green and center it.

<h1 style="color: green" style="text-align=center">Some Text</h1>

It works when I use the deprecated attribute align.

<h1 style="color: green" align="center">Some Text</h1>

It works when I do either one or the other. Either just coloring the text or just centering the text. It also works when I use div tags. Is it necessary to use the div tags? I'd like to be able to do both without using the deprecated attribute. I must be overlooking something. Appreciate any help! Thanks.

ok, so I'm taking a course in college and the question came up... basically, if I do this

[p style = "text-align: right"][h3]Information[/h3][/p]

It won't apply the right justifictation, though if I put the justification setting in the h3 tag it does it, or if I switch the h3 to the outside and put the style on it, it works as well. Does anyone know why this is? My guess was that the h3 resets the text's formatting properties and then formats it?

Sorry, I'm a newbie

this is SO easy - except for me..

how do i align this image to the top of the page - i am using CSS for the text but not for the image by the way..

thanks for your help..

sandy


http://www.thebollocks.org/drop/rugged/taylor.html