|
HTML - Valign
I'm having trouble getting valign to work on a table.
Here is a screen shot of said table: http://www.novusinitium.co.uk/forum/ss.jpg And here is the code for that table: HTML Code: <table style="width:96%;margin:auto;"> <tr style="background-color:#000000;color:#FFFFFF;font-weight:bold;font-size:14pt;"><th colspan="2">Test Thread</th></tr> <tr style="background-color:#E0E0E0;font-weight:bold;"><td style="width:200px;text-align:center;">Conn</td><td style="padding-left:10px;">01.10.2008, 10:10<span style="margin-left:400px;"><a href="editPost.php?p=1"><img src="page_edit.png" alt="Edit Post" title="Edit Post" style="margin-left:10px;"></a><a href="deletePost.php?p=1"><img src="page_delete.png" alt="Delete Post" title="Delete Post" style="margin-left:10px;"></a></span></td></tr> <tr><td> <img src="http://www.fascinationst.com/productImages/CP1306D.jpg" style="width:150px;height:150px;margin-left:25px;margin-top:10px;" alt="Avatar"> <br> <p class="c">Administrative Duck</p> <div style="width:150px;margin-left:25px;background-color:#c0c0c0;padding:2px;font-size:8pt;"> <span>Posts: 2</span><br> <span>Group: <span style="color:#FF0000;">Admin</span></span><br> <span>Joined: 30.09.2008</span><br> <span>Country: England</span><br> <span>Game-Ranking: Newbie</span><br> </div> <br> <p style="text-align:center;"><a href="http://www.novusinitium.co.uk/messages.php?page=send&uid=1"><img src="email.png" alt="Message This User" title="Message This User"></a></p> </td><td valign="top" style="padding:10px;">This is a test post.</td></tr> <tr style="background-color:#E0E0E0;font-weight:bold;"><td style="width:200px;text-align:center;"></td><td style="text-align:right;padding-right:10px;padding-top:2px;"><a href="#top"><img src="arrow_up.png" alt="GoTo Top" title="GoTo Top" style="margin-left:10px;"></a><a href="reportPost.php?p=1"><img src="exclamation.png" alt="Report Post" title="Report Post" style="margin-left:10px;"></a></td></tr> <tr><td></td><td></td></tr> <tr style="background-color:#E0E0E0;font-weight:bold;"><td style="width:200px;text-align:center;">TEST</td><td style="padding-left:10px;">01.10.2008, 14:14</td></tr> <tr><td> <img src="http://imgs.xkcd.com/comics/turing_test.png" style="width:150px;height:150px;margin-left:25px;margin-top:10px;" alt="Avatar"> <br> <p class="c">TEST</p> <div style="width:150px;margin-left:25px;background-color:#c0c0c0;padding:2px;font-size:8pt;"> <span>Posts: 1</span><br> <span>Group: <span style="color:#000000;">Members</span></span><br> <span>Joined: 01.10.2008</span><br> <span>Country: England</span><br> <span>Game-Ranking: Newbie</span><br> </div> <br> <p style="text-align:center;"><a href="http://www.novusinitium.co.uk/messages.php?page=send&uid=2"><img src="email.png" alt="Message This User" title="Message This User"></a></p> </td><td valign="top" style="padding:10px;">A reply :O</td></tr> <tr style="background-color:#E0E0E0;font-weight:bold;"><td style="width:200px;text-align:center;"></td><td style="text-align:right;padding-right:10px;padding-top:2px;"><a href="#top"><img src="arrow_up.png" alt="GoTo Top" title="GoTo Top" style="margin-left:10px;"></a><a href="reportPost.php?p=3"><img src="exclamation.png" alt="Report Post" title="Report Post" style="margin-left:10px;"></a></td></tr> <tr><td></td><td></td></tr> </table> Any ideas why it's not working? Or what else i could do to get the same effect? Thanks. Similar TutorialsI have an asp page that loads select dropdowns sequentially. They are different sizes. I want them to align top regardless of the size. The problem is, if the second or third dropdown to load is bigger than an earlier one, then the td is stretched vertically and the earlier ones are not aligned top. You can view the page he http://www.h51software.net/usautomat...self_quote.asp Thanks for the help... Dear users, I have been having some trouble for quite sometime with both align and valign, I want to keep a iframe (Google Maps) absolutely centered regardless of the browser window size. This works fine for me until I want to add a picture on the page. When I add the picture I want it to be overlapping just slightly to the left of the iframe and stay like that regardless of window size also. I'm sure its just a basic container problem, but it also makes it harder when I'm using percentages. If anyone is having problems with what I'm trying to explain just ask and I'll try explain it a little bit better. http://www.autohotkey.net/~happytodd/index.html HTML Code: <style type="text/css">
#container{
position: relative;
min-width:700px;
min-height:100px;
}
#title
{
font-size: 65px;
}
#google
{
}
#image
{
border: 1px;
}
</style>
<body>
<div id="container">
<div id="google">
<div id="image">
<table border="1" cellpadding="0" cellspacing="0" width="100%" height="100%"><tr><td align="center" valign="middle">
<div id="title"><b>Where is Happytodd?</b></div> <br />
<img src="there_myselfEeek1.png" alt="Avatar"/>
</div>
<!-- Google Public Location Badge -->
<iframe src="http://www.google.com/latitude/apps/badge/api?user=-7616294934996694352&type=iframe&maptype=roadmap" width="500" height="500" frameborder="0"></iframe>
<!-- To disable location sharing, you *must* visit https://www.google.com/latitude/apps/badge and disable the Google Public Location badge. Removing this code snippet is not enough! -->
</td></tr>
</div>
</div>
</body>
I am havin an issue with some code ... I'm tryin to valign it to middle but it isnt accepting ANY code i try besides what code is already being used. heres a snippet of the table.... Code: <table cellspacing="1" cellpadding="1" border="0" style="width: 550px;">
<thead>
</thead>
<tfoot></tfoot>
<tbody>
<tr>
<td height="30" bgcolor="#cccc99" valign="middle"><strong>Date</strong></td>
<td height="30" bgcolor="#cccc99" valign="middle"><strong>Sermon Title</strong></td>
<td height="30" bgcolor="#cccc99" valign="middle"><strong>Notes</strong></td>
<td height="30" bgcolor="#cccc99" valign="middle"><strong>Podcast</strong></td>
</tr>
Thanks! I can't seems to be able to get it to a valign middle at oscommerce but on my html page it worked fine. Also why is the html page gray bar bigger than the oscomerce gray bar? Code: <table width="100%" height="30" align="center" border="0" bgcolor="grey"> <tr> <td class="bar1" valign="middle" height="100%"> <ul id="navlist"> <li id="active"><a href="/index.html" id="current">Home</a></li> <li><a href="index.php">Collections</a></li> <li><a href="/payment.html">Payment & Shipping</a></li> <li><a href="/about.html">About us</a></li> <li><a href="contact_us.php">Contact Us</a></li> </ul> </td> </tr> </table> Code: .bar1 {font-family:Arial, Helvetica, sans-serif; font-size: 14px; text-align:center;}
#navlist ul {margin-left: 0;padding-left: 0;white-space: nowrap;}
#navlist li {display: inline;list-style-type: none;}
#navlist a { padding: 15px 20px; }
#navlist a:link, #navlist a:visited {color: #fff;background-color: grey;text-decoration: none;}
#navlist a:hover{color: #fff;background-color: #6D6968;text-decoration: none;}
actual site http://janlevin.com.my/ Im trying to valign some text, but when there is an image in the same field it doesn't work. Heres an example: PHP Code: <html> <body> <table border=1><tr><td valign="middle"> test text <img src="http://fiestafan.com/120.png"> </td></tr></table> </body> </html> Anyone know how to do this? I am trying to keep everything in line, but valign is not working I do not believe? <td width="60%" align="left" valign="middle">$selection <input type="button" value="Create New" onclick="window.location.href='$scripturl';"></td> The button is the same height as the drop down selection list created in the string $selection, but the drop down list is higher than my button? I have a table cell to the left which has a <br /> in it, not sure if this matters? Hi there. So, I've got this page I'm working on, see... http://www.giardinidisole.com/splash/splash.html ...and if you see the text in the space next to the pics, I'm trying to get them to align at the top of the cell. I've tried putting the <valign="top"> tag in the <tr> and I've also tried putting it in each <td> but as you can see the text lines up in the middle. Am I missing something? Gidmeister |
|||||||