HTML - Vertically Aligning Text In Tables
Hey there,
I have some text in a table that i want to vertically align center, however nothing i try with html or css seems to work. This is my current code atm; Code: <table cellpadding="0"> <tr> <td width="150" height="100" style="vertical-align:middle"> <img src='portals/default.jpg' > </td><td style="vertical-align:middle"> <h3><b><a href="/games/node/2">Welcome to the Halo Portal</a></b></h3><i><div style='font-size:0.9em; line-height: 0.3em;'>Posted by NightFox, on 15/03/09</div></i><br /><div style='line-height: 0.2em'><p>Welcome to the Halo Portal</p> </div>Halo <td></tr> </table> I want it all to vertically aligned centrally so that the text will line up with the center of the thumbnail - attached is wat it looks like atm. If anyone has any ideas please let me know (html, css, or php i don't mind) Regards NightFox Similar Tutorialshttp://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? Hello all, I am having a problem vertically aligning something inside a <li> element. This is the code I'm talking about: Code: <ul class="small_nav2"> <li class="small_nav_back"><a href="javascript: ;" onclick="hide_more_nav();" id="scroll_nb"></li> <li class="small_nav_next"><a href="javascript: ;" onclick="hide_more_nav();" id="scroll_nn"></li> </ul> It has the following CSS attached: Code: .small_nav2 { margin: 0 0 40px 0; } .small_nav_back { background:url("images/shadow_left.png") no-repeat scroll right top transparent; height:90px; left:0; position:absolute; top:5px; width:20px; } .small_nav_back a { background:url("images/btn_arrow_left.gif") no-repeat scroll left top transparent; display:block; height:19px; width:14px; top:5px; } As you can see, there is a <li> item, that has a background-image, and a hyperlink within that <li> item, that also has a background-image. Now I want that hyperlink (the block of 19x14) to align vertically within the <li> element. But how can I do that? I've tried (I hope in the right manner) to use vertical-align: middle, and adjusted the line-heigt as well. To no succes. You can see it all in action HERE Hello I have two tables in my JSP ; the first table has 3 columns, and should be displayed on top of the page and is used to display elements of a form. Another table should be displayed below that table, has dynamic number of columns. This page opens as a child window from main window The problem is that the tables are displayed beside each other if I have not specified width of table. If I do specify it (like I set it to 100%) the second table is not shown . Could you please help me and tell me how to have two tables displayed vertically inside my page ? Thank you so much Evrim Hey guys, i have 3 tables that I want to align like 1 2 3 at the moment they are 1 2 3 any ideas, here is the code i have HTML Code: <form action="process.php" method="POST" class="style1"> <table width="20%" style='border: 1px dotted;' bgcolor="#eeeeee" cellspacing="0" cellpadding="3"> <tr> <td>Xbox 360 GT:</td> </tr> <tr> <td><input type="text" name="x360gt" value="x360" /></td> <td></td> </tr> <tr><td colspan="2" align="right"> <input type="hidden" name="subedit1" value="1"> <input type="submit" value="Edit Gamertag"></td></tr> </table> </form> <br> <form action="process.php" method="POST" class="style1"> <table width="20%" style='border: 1px dotted;' bgcolor="#eeeeee" cellspacing="0" cellpadding="3"> <tr> <td>PS3 GT:</td> </tr> <tr> <td><input type="text" name="ps3gt" value="ps3" /></td> <td></td> </tr> <tr><td colspan="2" align="right"> <input type="hidden" name="subedit2" value="1"> <input type="submit" value="Edit Gamertag"></td></tr> </table> </form> <br> <form action="process.php" method="POST" class="style1"> <table width="20%" style='border: 1px dotted;' bgcolor="#eeeeee" cellspacing="0" cellpadding="3"> <tr> <td>PC GT:</td> </tr> <tr> <td><input type="text" name="pcgt" value="pc" /></td> <td></td> </tr> <tr><td colspan="2" align="right"> <input type="hidden" name="subedit3" value="1"> <input type="submit" value="Edit Gamertag"></td></tr> </table> </form> Could anyone help me out please Im trying to get the two items in this table aligned. One is suppose to be on the left side of the screen, the other on the right side but I cant get it to work. What am I doing wrong? <table> <tr> <td align="left"> <p>Im suppose to be on the left side of the screen</p> </td> <td align="right"> <p>Im suppose to be on the right side of the screen</p> </td> </tr> </table> Im trying to get something to align to the right side of a table, and cant seem to get it right. What this should look like is 'First One' in a cell, and 'Second One' in a cell bellow it, and to the right side they should each have two check marks side by side. Can anyone see what Im doing wrong? Thanks. <form method="post" action="file.php"><br/><div id="Accordion1" class="Accordion" tabindex="0"> <div class="AccordionPanel"> <div class="AccordionPanelTab"></div> <div class="AccordionPanelContent"><form action="file.php" method="post"> <table border="3" width="600"> <tr> <td><strong>First One</strong> </td> </tr> <input type="checkbox" name="a" /><input type="checkbox" name="aa" /></td> </tr> </table> <table border="3" width="600"> <tr> <td><strong>Second One </strong> </td> </tr> <input type="checkbox" name="b" /><input type="checkbox" name="ab" /></td> </tr> </table> <p></p> <input type="submit" value="Submit" name="submit"><br/></form><br/> Im trying to get something to align to the right side of a table, and cant seem to get it right. What this should look like is 'First One' in a cell, and 'Second One' in a cell bellow it, and to the right side they should each have two check marks side by side. Can anyone see what Im doing wrong? Thanks. <form method="post" action="file.php"><br/><div id="Accordion1" class="Accordion" tabindex="0"> <div class="AccordionPanel"> <div class="AccordionPanelTab"></div> <div class="AccordionPanelContent"><form action="file.php" method="post"> <table border="3" width="600"> <tr> <td><strong>First One</strong> </td> </tr> <input type="checkbox" name="a" /><input type="checkbox" name="aa" /></td> </tr> </table> <table border="3" width="600"> <tr> <td><strong>Second One </strong> </td> </tr> <input type="checkbox" name="b" /><input type="checkbox" name="ab" /></td> </tr> </table> <p></p> <input type="submit" value="Submit" name="submit"><br/></form><br/> Could somebody help me out in trying to put a separate image beside a table? Every time I try it the image ends up below the table rather than next to it. The table is surrounding a song lyric box. I want to put an image (of Ellla Fitgerald) beside the table. The image has a border that looks like the table. The combinded width of table and image is around 520px and I want about a 20px space between the two. That's a total width of 540px. It's to go on my LJ profile page. I fairly sure that's not too wide for the page. The code for the table and a screenshot of table/lyric box is below. The image that I'm trying to put next to it is: The outcome that I'm looking for is: Thanks in advance. Hi! I downloaded this script off the net: http://www.htmlforums.com/attachment...1&d=1178321623 (or download attachment) and modded it to my needs. The only problem is that the orange blob on the top left breaks up (I think due to the way the tables are set up... i'm not sure i'm a BIG NOOB at HTML). This happens ONLY when I have large amounts of content... To see a live preview of this problem... please visit my website: http://www.netsafehouse.com/ http://www.netsafehouse.com/index.html << This is what the script should look like... it looks fine... BUT http://www.netsafehouse.com/Radio.html << It breaks up here. Please tell me what to do (I'm using dreamweaver)... thanks!! Hi, I have recently downloaded a web template and have been editing it in Dreamweaver CS4. I created a web menu via an application I bought online and intergrated that into the webpage. It displays out of line in Dreamweaver however appreas to work fine (everything in line) in IE 7. I do not know where I am going worng with my toolbar / web menu and what I need to change for compatibility. It is written in java but I suspect its some dodgy html code that has be written by me. The website is www.ritzphoto.net/newsite/ css Code: body { margin: 0px; padding: 0px; background: #242323; text-align: justify; font: 13px Arial, Helvetica, sans-serif; color: #444444; } h1, h2, h3 { margin-top: 0px; font-weight: normal; color: #FFFFFF; } h1 { font-size: 2.4em; } h2 { font-size: 1.8em; } h3 { font-size: 1.4em; } p, ol, ul { margin-bottom: 1.8em; line-height: 160%; } a { color: #000000; } a:hover { text-decoration: none; color: #FF0000; } a img { border: none; } #wrapper { width: 900px; margin: 0 auto; border: 10px solid #FFFFFF; } /* Header */ #header { width: 900px; height: 150px; margin: 0px auto; } #header a { text-decoration: none; color: #FFFFFF; } /* Logo */ #logo { float: left; padding-left: 20px; } #logo h1, #logo p { margin: 0px; line-height: normal; font-weight: normal; color: #FFFFFF; } #logo h1 { padding: 25px 0px 0px 0px; } /* Menu */ #menu { float: right; } #menu ul { margin: 0px; padding: 49px 0px 0px 0px; list-style: none; line-height: normal; } #menu li { float: left; margin: 0px; } #menu a { display: block; width: auto; padding: 6px 20px; } #menu a:hover { text-decoration: underline; } #menu .active { background: #404040; } #menu .active a { background: url(images/img02.gif) no-repeat 100% -40px; } /* AWM */ #awmAnchor-menu { width: 900px; padding: 10px 0px 0px 0px; background: #FFFFFF; margin: 0px auto; } /* Page */ #page { width: 900px; margin: 0px auto; padding: 10px 0px 0px 0px; background: #FFFFFF; } #header-pic { background: url(images/img05.jpg) no-repeat left top; width: 900px; height: 210px; } /* Content */ #content { float: right; width: 570px; } .post { margin: 0px 0px 30px 0px; } .post .title { margin: 0px; background: #444444 url(images/img02.jpg) no-repeat left 50%; padding: 7px 25px; font-size: 1.4em; } .post .title h1 { } .post .entry { padding: 0 20px; } .post .meta { font-weight: bold; padding-left: 20px; } .post .byline { margin: 0px; padding-left: 20px; } /* Sidebar */ #sidebar { float: left; width: 300px; } #sidebar-bgtop { } #sidebar-bgbtm { background: url(images/img03.jpg) no-repeat left bottom; } #sidebar-content { background: url(images/img01.jpg) repeat-y left top; } #sidebar ul { padding: 0px 0 5px 0; margin: 0px; list-style: none; } #sidebar li li { margin-left: 20px; margin-right: 20px; line-height: 30px; padding-left: 15px; border-bottom: 1px dashed #BDBDBD; background: url(images/img04.jpg) no-repeat left 50%; } #sidebar li ul { margin-bottom: 1.8em; list-style: none; } #sidebar h2 { background: #444444 url(images/img02.jpg) no-repeat left 50%; padding: 7px 25px; font-size: 1.4em; } #sidebar a { text-decoration: none; } #sidebar a:hover { text-decoration: underline; } /* Search */ #search { } #search form { margin-bottom: 1.8em; padding: 0px; } #search fieldset { margin-left: 20px; padding: 0px; border: none; } #search #s { width: 160px; } /* Footer */ #footer { clear: both; width: 900px; height: 50px; margin: 0px auto 30px auto; color: #FFFFFF; } #footer p { margin: 0px; padding: 19px 0px 0px 0px; text-align: center; line-height: normal; font-size: smaller; } #footer a { color: #FFFFFF; } Cheers, Dave Hi all, what is the best method to align sets of labels, drop down lists, text input fields, images, and buttons with html? The file I attached is how I would like it to be formatted. I achieved this using tables, but had to play around with alignments and pixel adjustment for a really long time before they were just right. For reference, here is how I coded it: Code: <table style="width:768" cellpadding="0" cellspacing="0"> <td style="width:142" align="right"> <label for="county">* County : </label> </td> <td style="width:192" align="left"> <select name="county" id="county" class="ListBox"> <option selected>BEAUFORT</option> <option>HYDE</option> <option>MARTIN</option> <option>TYRELL</option> <option>WASHINGTON</option> </select> </td> <td style="width:40"></td> <td style="width:100" align="right"> <label for="caseOpened">* Case Opened : </label> </td> <td style="width:172" align="left"> <input type="text" size="10" maxlength="10" name="caseOpened" id="caseOpened"> mm/dd/yyyy </td> <td style="width:22" align="left"> <a href="#"><img src="images/calendar.gif" width="16" height="16" vspace="0" border="0" alt="Calender"></a> </td> <td style="width:100"> <input type="button" class="button" name="today" value="Today" onClick="setTodaysDate(caseOpened)"> </td> </table><br> <table style="width:768" cellpadding="0" cellspacing="0"> <td style="width:142" align="right"> <label for="localNumber">Local Number : </label> </td> <td style="width:192" align="left"> <input type="text" size="20" maxlength="15" name="localNumber" id="localNumber"> </td> <td style="width:40"></td> <td style="width:100" align="right"> <label for="caseNumber">* Case Number : </label> </td> <td style="width:294" align="left"> <input type="text" size="11" maxlength="11" name="caseNumber" id="caseNumber"> </td> </table><br> I'm definitely new to html, and had heaps of trouble getting the tables to display properly. Surely there must be an easier method. Also, is there a way to make static html pages resize themselves accordingly in respect to your browser size? Appreciate all the help in advance Hey guys been having a few problems finding resources on how to vertically align text. what it is is that i have a division i wish to display text in vertically... Any ideas? div{vertical-align: -50%} thats what i came up with but still no joy... When I place links on my bands myspace page the link text displays on the page vertically instead of horizontally on some computers. It displayed correctly (Horizontally) on the PC I created it on, but when i view it on other PCs the text was vertical. Here is the page. It's the white text near the top. (Add To Friends, Send Message etc.) http://profile.myspace.com/index.cfm...ndid=445328869 or www.myspace.com/theengineersband1 Here is the code for the links. I am a beginner with HTML. Thanks, James Kelly HTML Code: <a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVzc2FnZSZmcmllbmRJRD00NDUzMjg4Njk=" style="position:absolute; top:360px; left: 160px;"><font size=1; color=white><b> Send Message</a> <a href="http://www.msplinks.com/MDFodHRwOi8vZnJpZW5kcy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1pbnZpdGUuYWRkZnJpZW5kX3ZlcmlmeSZmcmllbmRJZD00NDUzMjg4Njk=" style="position:absolute; top:360px; left:290px;"><b><font size=1; color=white>Add To Friends </a> <a href="http://www.msplinks.com/MDFodHRwOi8vZnJpZW5kcy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1ibG9jay5ibG9ja3VzZXImdXNlcklEPTQ0NTMyODg2OQ==" style="position:absolute; top:360px; left:425px;"><b><font size=1; color=white>Block </a> <a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwuZm9yd2FyZFYyJmZyaWVuZElEPTQ0NTMyODg2OSZmPWZvcndhcmRwcm9maWxl" style="position:absolute; top:360px; left:510px;"><b><font size=1; color=white>Forward </a> <a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&friendID=445328869" style="position:absolute; top:355px; left: 620px;"><b><font size=1; color=white>View Pics </a> <a href="http://www.myspace.com/topshelfrecords" style="position:absolute; top:360px; left: 700px;"><b><font size=1 color=white>TSR </a> How do I vertically move all of the text (ie Days:Hour:Min:Sec) in the 2nd row of the column that says "Test" to the top of the box? How do I vertically move all of the text (ie Days:Hour:Min:Sec) in the 2nd row of the column that says "Best Time since 2005" to the middle of the box? Thank you. <table border="1"> <tr> <th> </th> <th>Test</th> <th style="color:green">Best Time Since 2005</th> </tr> <tr> <th>Comp X</th> <th> <div id="cpcontainer"> <table><tr class='text' align='center'><td>Days :</td><td> Hour :</td><td>Min :</td><td>Sec</td> </tr><tr class=''text'' align=''center'' style='color:green'> <td>11 :</td><td> 5 :</td><td>0 :</td><td>0</td> </tr></table> </div> </th> <th> <div id="cpcontainer1"> <table><tr class='text' align='center'><td>Days :</td><td> Hour :</td><td>Min :</td><td>Sec</td> </tr><tr class=''text'' align=''center'' style='color:green'> <td>11 :</td><td> 5 :</td><td>0 :</td><td>0</td> </tr></table> </div> </th> </tr> </table> 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 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 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 Hello, This is my first time in HTML world and I'm a complete n00b. I'm trying to put a counter on my blog for facebook/twitter/google+/rss to keep track of them on the blog. This is working fine, at least facebook and twitter are automatically updated (through a script I picked up on the internet), google+ and RSS is still manual, I still need to figure those ones out. Now I would like to nicely align the counters with the icons I have, and that's my problem. I want the text centered under the icon it belongs to, but I don't know how. With my lack of knowledge I found a somewhat cumbersome way to do that. Not that bad, simply not nice coding, but when the page is zoomed in or something the like, the aligning obviously doesn't work anymore. Could someone help me do the aligning properly? The code of the widget I have pasted below and the relevant blog: http://gebarentaal-signlanguage.blogspot.com. HTML Code: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> var f_page = "149198761796791"; // the page name for your fan page, e.g. the 'wvumountaineers' part of <a href=\"http://facebook.com/wvumountaineers\" target=\"_blank\" rel=\"nofollow\">http://facebook.com/wvumountaineers</a> var t_page = "Gebarentaal_"; // the account name for your main twitter account function add_commas(number) { if (number.length > 3) { var mod = number.length % 3; var output = (mod > 0 ? (number.substring(0,mod)) : ''); for (i=0 ; i < Math.floor(number.length / 3); i++) { if ((mod == 0) && (i == 0)) { output += number.substring(mod+ 3 * i, mod + 3 * i + 3); } else { output+= ',' + number.substring(mod + 3 * i, mod + 3 * i + 3); } } return (output); } else { return number; } } // when document is ready load the counts $(document).ready(function(){ // grab from facebook $.getJSON('https://graph.facebook.com/'+f_page+'?callback=?', function(data) { var fb_count = data['likes'].toString(); fb_count = add_commas(fb_count); $('#fb_count').html(fb_count); }); // grab from twitter $.getJSON('http://api.twitter.com/1/users/show.json?screen_name='+t_page+'&callback=?', function(data) { twit_count = data['followers_count'].toString(); twit_count = add_commas(twit_count); $('#twitter_count').html(twit_count); }); }); </script> <a href="http://www.facebook.com/pages/Gebarentaal/149198761796791" imageanchor="1" style="margin-left: 0em; margin-right: 0em;"><img border="0" src="http://1.bp.blogspot.com/-sT9lHle5N54/TqgOWhi-amI/AAAAAAAAFCU/MwoQL3ZhEy4/s1600/facebook-30x43.png" /> </a> <a href="http://twitter.com/Gebarentaal_" imageanchor="1" style="margin-left: 1.5em; margin-right: 0em;"><img border="0" src="http://2.bp.blogspot.com/-eVZSNf1mj_E/TqgOX_ldq1I/AAAAAAAAFCk/2wDDaA8esG8/s1600/twitter-30x43.png" /></a> <a href="https://plus.google.com/b/118073168609419238977/" imageanchor="1" style="margin-left: 1.5em; margin-right: 0em;"><img border="0" src="http://3.bp.blogspot.com/-icT9kVFhtOs/TqgOXLJCbBI/AAAAAAAAFCY/pU4wo8HyHNI/s1600/googleplus-30x43.png" /></a> <a href="http://gebarentaal-signlanguage.blogspot.com/feeds/posts/default" imageanchor="1" style="margin-left: 1.5em; margin-right: 0em;"><img border="0" src="http://3.bp.blogspot.com/-ShqPVqX-vhs/TqgOXX5m9WI/AAAAAAAAFCg/WFRLxQ4yjuM/s1600/rss-30x43.png" /></a><br /> <p> <font size="4" face="arial" color="#3c5f9d" style="margin-right:0.9em"> <span id="fb_count"></span> </font> <font size="4" face="arial" color="#63dfe5" style="margin-right:1.6em"> <span id="twitter_count"></span> </font> <font size="4" face="arial" color="#505050" style="margin-right:2em"> 8 </font> <font size="4" face="arial" color="#c35b02" > 3 </font> <br /> <font size="2" face="arial" color="#3c5f9d" style="margin-right:0.8em"> likes </font> <font size="2" face="arial" color="#63dfe5" style="margin-right:0.5em"> followers </font> <font size="2" face="arial" color="#505050" style="margin-right:1em"> +1's </font> <font size="2" face="arial" color="#c35b02"> readers </font> </p> 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 |