|
HTML - Aligning Text To The Top And Bottom Of 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>
Similar TutorialsI have a cell text linked to a css stylesheet. the style for that "text" is as follows: .text { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #333333; text-align:left } How do I align the text to the top of the cell rather than middle? I get how to align two sections of text, one at the left of screen and one on the right, but how do I put this line at the bottom of the screen? I tried pretty much every combination now, bottom:0, vertical-align:bottom, vertical-align:text-bottom, with and without a parent div container, nothing works! The moment I try to put the line of text at the bottom of the screen the left/right alignment would be messed up or it wouldn't show at all. It seems html only allows you to align it left/right OR bottom/top, but not both? Any help is appreciated. This is what I have so far: Code: HTML:
<div style="clear:both;" id="bottom">
<p class="left">Text to go on left.</p>
<p class="right">Text to go on right.</p>
</div>
CSS:
#bottom {
bottom:0;
}
.left {
float: left;
}
.right {
float: right;
}
hey, simple question here i just cant get it to work though. i want to align some text to the bottom and to the right of a table <table width="100%" cellspacing="0" border="0" cellpadding="18" height="75%"> <tr> <td bgcolor="000000" width="10%"> <img src="graphics/spacer.gif" width="100" height="1"> </td> <td bgcolor="ffffff" width="90%" valign="top"> <h2>Welcome to the Darwin Soccer Clubs Official Website</h2> <hr color="black"> <p>Here we strive to bring you all the latest news from the club by keeping you updated on the results from all our games throught out the season, the roster so you will never forget when your teams, where your teams playing and who there playing. <br><br> Also check out the new <a href="p4potw.html">Player of the week</a> page to see if you have made it to number one!</p> <p align="right" valign="bottom"> THIS IS THE PART I CANT GET TO WORK</p> </td> </tr> i dont no why.. and try not to think about the other writing in the table this is for my studies i am doing. cheers </table> Hi guys I've spent the best part of two hours attempting this and have been failing. Miserably. What I'm trying to do is NOT to create a body background, but create an image, which will sit at the bottom of my browser window, regardless of it's size, and then go BEHIND other elements such as tables / images if my browser window size causes overlap. All help appreciated, thanks in advance. Antonz Does anyone have an idea how I can make the text in the TD-tags fit 100% in its cell. Help would be highly appreciated. Quote: <html> <style> .text {text-transform: uppercase; } </style> <body> <center> <table width="500" border="1"> <tr> <td> <span class="text">Text nrjkfb bfd df bfdfbhj</span> </td> </tr> <tr> <td> <span class="text">Text hjkbjkbjk</span> </td> </tr> </table> Hi, I'm working on an ecommerce website, my problem is that I cannot make some text in a cell wrap. Here's the details: The text in this particular cell is page numbers, and it is dynamically generated, so it changes depending on what the user selects in the shop. For example, if they are viewing a category that only has a couple pages of product, it's fine. But if they are viewing a category that has a couple hundred pages of product, the page number goes out horizontal in a straight line, and obviously causes some serious horizontal scrolling. I've tried setting a fixed width for the cell both in the <td> with width="whatever" and that didn't work, I tried setting it in the stylesheet with CSS but it still breaks the table. I just want it to wrap down a line when it gets to a certain width. Any ideas? I'm just getting into making pages again, after 3 years off I'm REALLY rusty! Here is the code: <div align="center"> <table border="0" width="635" height="490" cellspacing="0" cellpadding="0"> <tr> <td height="43" width="635"> <img border="0" src="AURORENOVA.jpg" width="640" height="168"></td> </tr> <tr> <td height="322" width="635"> <h1>Monday January 22nd 2007</h1> <p>So here is the first update.</p> </td> </tr> </table> </div> I just want to know how I can align the text in the cell to the top of the cell instead of having it hovering in the center. When I do add more text the position changes, but I just want it all to align to the top. Thanks. Hi, I want to align some text but not with the center or something but i want it to aling to a square on my background image and i also want to make it so that is looks the same on widescreens. at the moment i do it like this <BODY leftmargin="150%" topmargin="220%"> f </BODY> But when i enter window mode the text also moves. can someone help me with tihs ? Hi I am new to this site and very new to html. I just know the basics. My problem is, is there a way to make 1 line of text be split for example have 1 part of the line be aligned to the left and the other to the right. Here is an example, the first part is what is actually happening and the second part is the way i want it to look. This is an example.This is an example This is an example. This is an example. I just realized that my second part of the example didnt come out the way i wanted. So i want the second part to have the first part aligned to the left and the second part aligned to the right. Please help. Its probably really easy but like i said i just know the basics. Thanks in advance for any help that is given Mike I didn't screw this page up like the earlier page I posted.I inserted text ,but am unable to align it properly.Any help would make me and Kelli Maroney very happy this New Year. Hi, I seem to have lost the code I had for aligning text. I know it's simple, can someone help me. Take a look at my newsletter at http://www.ilovejesus.com/lot/awesomebks/news.shtml. You will note the text is not lined up correctly with the book covers. I don't want it to be completely lined up like a newspaper, just look a little better than it does. Thanks. 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 I'm new ,but had some success editing a website.I'm having trouble aligning the new text with the rest of the page. http://www.kellimaroney.com/press.html <ul> <li><strong>2010</strong><br> <blockquote> <p xmlns="http://www.w3.org/1999/xhtml" id="sites-page-title-header"><a href="http://www.youtube.com/user/RockandRollIncTV">New Web Series:Rock & Roll,Inc</a></p> <p xmlns="http://www.w3.org/1999/xhtml"> </p><p xmlns="http://www.w3.org/1999/xhtml"><strong><a <ul> <blockquote> <p xmlns="http://www.w3.org/1999/xhtml" id="sites-page-title-header"><a href="http://www.examiner.com/horror-in-national/exclusive-interview-with-actress-kelli-maroney-1 ">Horror Examiner Interview</a></p> <p xmlns="http://www.w3.org/1999/xhtml"> </p> <p xmlns="http://www.w3.org/1999/xhtml"><strong><a I am having problem aligning text next to a javascript slideshow in a table. I can't get text to sit next to the show. It always goes on the top or bottom. Please, any help? Hi, I am writing various things on one line - such as Previous, Back to Main Menu and Next - but would like to align the differently e.g. I would like "previous" to be aligned to the left of the page, "back to Main Menu" in the middle and "Next" on the right side. I have tried pressing space bar - but am only able to do one space in Dreamweaver. Any ideas? Thanks. Hello everyone, I've recently started a website at Angel Fire and went with HTML coding all the way. The problem I have is getting my text in their correct positions! It's been frustrating so, and I've searched everywhere for proper coding. Everytime I try to center certain text in the middle of the webpage, it pushes left aligned text further down. Any advice, coding, that would keep the text in check? Thanks. Hi, Does this look right i cant to have a header image and align come copy over it: <body> <!-- NEWS 1 --> <h1><img src="box.jpg" width="300" height="50" /></h1> <h2>News Item 1</h2> <!-- NEWS 2 --> <h1><img src="box.jpg" width="300" height="50" /></h1> <h2>News Item 2</h2> </body> h2 { position: relative; top: -37px; left: 135px; text-align: right; width: 150px; } http://www.miamiknight.com/table.htm How do I get the text in all 3 columns to align at the top? I had to add breaks or rows in column 3 at the bottom to bring the text higher and then column 2 had the text drop lower. Is there an easy way to always have text align at the tops of each column? I am designing a header for my website and need to put text on both the left and right hand side of the topline for the website. When I try to put the code it overspills to next line so when I save it all the information I need on the same line goes over to the next line. How can I put the code in a different line in my coding but display it on the same line on a browser? Well, i've been stressing myself over this quite a while. I know there is a way to it but it's been a long time since I used HTML. And I was not even good with HTML back then so it's worser. I`m trying to align a javascript web analyzer element with a piece of text. The thing is that even if i`m using things such as <div style="vertical-align:middle">code</div>, it won't have any effect. So here's the code: Code: <script type="text/javascript" language="javascript">
var site_id = 48608;
var gtopSiteIcon = 81;
var _gtUrl = (("https:" == document.location.protocol) ? "https://secure." : "http://fx.");
document.write(unescape("%3Cscript src='" + _gtUrl + "gtop.ro/js/gTOP.js' type='text/javascript'%3E%3C/script%3E"));
</script> "Piece of text"
The text will just stay at the baseline of the image no matter what. Any help is appreciated ! EDIT: It works with normal images, but not with javascript. |
|||||||