|
HTML - Valign Text And Image
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? Similar TutorialsI'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. I 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... 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/ 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>
here is the (ineffective) code currently: <img style="float: left; width: 169px; height: 73px;" src="img/logo1.png" alt="" /> <h1 style="text-align: center;">random text</h1> the image shifts the left margin such that the text is centered as though the page width was 169px less than it really is. i'm not debating the code itself; the code above behaves as its meant to. aka no surprises. i just cant figure out the appropriate code to center the text across the entire real width of the page as though there was no image. i've tried div tags & all the things google hunting advised. no luck. other than finding this forum, which seems like it'll be a boon! thanx in advance for advise/comments/feedback/help. I have seen this many times but can not figure how to do it. Its the transparent images or text in text boxes, one example of this is http://au.movies.yahoo.com/Coming+Soon/to-cinemas/ At the top right you can see that transparent yahoo image in the text box and when you click it it disappears then comes back? can someone tell me how this works? Thanks Im trying to create a simple thing for my business. What im trying to do is have the image of each of my employees and under it have their name and other info. I want the images side by side with some space and able to put their info under it. Can someone help me with a html code? thanks! My client friend wants a links page with rollover emails that chage the main image of the page so he can have a different sketch of each of them. My idea, and its backfiring as I can do this if I change the email text into images with swap image and a target but he wants them to remain as copyable (mmm is that even a word?) text. Can it be done with text without making it an image? many thanks to all you wonderful people that make these sites possible jax 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? How can I, in a table, put text directly to the right of an image? When I try, the image is placed, and then there's plenty of space to the right, but the text goes to the bottom right corner of the picture. How can I have it like this: (x's represent the image) xxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxx ← Text xxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxx I'd like to have them all on a center line so to speak, where the middle of the text is lined up with the middle of the picture, and the text is centered (the text will be in a column-like structure, not just one line as it appears above) Hi, I am new to the forum, and HTML. I have a website, but it built by someone else, who has since left the country, so I am trying to learn basic coding to do my own website work. My question is, how do I put an image on a page with text displayed on the image ? There is an image on the home page of my site, Lanna Charm, with text on it , and I have tried to create the same effect, without success. Is there an easy way to do this ? I found the image in "Assets", in the admin section, and I can reproduce it, but I want to use different images, with different text. Thank you, Mickmac If anyone knows how to do this, please help... I am trying to place text over an image. My image is broken up into 2 images. I want the text to be over the top image while retaining the two images being together. Here is my html: <td align="center" valign="top"><table width="500" border="0" cellspacing="0" cellpadding="0"> <img src="top.jpg"><img src="middle.jpg"> What would the html be to accomplish this? Thank you How do I type text on top of a image and have it look the same in IE and Firefox Hi, I am relativeley new to web design, I am just wondering if there is a way for me to put text over an image in Dreamweaver. I made my layout in Photoshop, sliced it in Imageready and now have it open in Dreamweaver. Any help is much appreciated. Thanks -Danny Edit: Sorry, should've posted a screenshot to give you a better idea of what I mean.. Click the link to see what it is I want the text on.. The 'box' is a slice by the way. http://img396.imageshack.us/img396/3271/helpub8.jpg How can I get text on top of an image? I can't use an absolute position. credmond8.awardspace.com/random.html The text on the footer img. Hello, I would like to know, how can I insert text on top of an image (the one with the baby), so that the text would be non stop there on the same position, even if you change browser width... URL: http://www.fkkt.org/gdemsa/domov.html Please help Hi, I want to place some text over an image, however i don't want to set the image as a background, as the user should be able to print the image, along with the text. What i want is that a photo would have something like "copyright 2009" or something similar when it is printed. Can someone point me in the right direction (to the correct forum, link etc.) thanks and best regards, Joe Heya, Im coding a site here in Dreamweaver CS3 and need some help. I have a sliced image from my made-in-photoshop layout, that is my content area. But In dreamweaver I cannot add text over it. Anyone have a tutorial or advice that can get me past this? Quote: <html> <head> <title>newv4</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="breakdownconspiracyinc.css" rel="stylesheet" type="text/css"> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <!-- ImageReady Slices (newv4.psd) --> <div id="site_layout"> <table id="Table_01" align="center" width="500" height="470" border="0" cellpadding="0" cellspacing="0"> <tr> <td rowspan="4"> <img src="images/area/name_area.jpg" width="26" height="470" alt=""></td> <td colspan="11"> <img src="images/area/logo_area.jpg" width="450" height="159" alt=""></td> <td rowspan="4"> <img src="images/fill/right_fill.gif" align="middle" width="24" height="470" alt=""></td> </tr> <tr> <td> <img src="images/fill/graphics-fill.jpg" width="42" height="17" alt=""></td> <td> <a href="http://www.freewebs.com/breakdowninc/pages/Graphics.html"> <img src="images/buttons/button_graphics.jpg" border=0 width="73" height="17" alt=""></a></td> <td> <img src="images/fill/music_fill.jpg" width="31" height="17" alt=""></td> <td> <a href="http://www.freewebs.com/breakdowninc/pages/music.html"> <img src="images/buttons/button_music.jpg" border=0 width="45" height="17" alt=""></a></td> <td> <img src="images/fill/film_fill.jpg" width="33" height="17" alt=""></td> <td> <a href="http://www.freewebs.com/breakdowninc/pages/film.html"> <img src="images/buttons/button_film.jpg" border=0 width="30" height="17" alt=""></a></td> <td> <img src="images/fill/blog_fill.jpg" width="36" height="17" alt=""></td> <td> <a href="http://www.freewebs.com/breakdowninc/pages/blog.html"> <img src="images/buttons/button_blog.jpg" border=0 width="33" height="17" alt=""></a></td> <td> <img src="images/fill/about_fill.jpg" width="33" height="17" alt=""></td> <td> <a href="http://www.freewebs.com/breakdowninc/pages/blog.html"> <img src="images/buttons/button_about.jpg" border=0 width="50" height="17" alt=""></a></td> <td> <img src="images/fill/end_fill.jpg" width="44" height="17" alt=""></td> </tr> <tr> <td colspan="11"> <img src="images/area/content_area.gif" width="450" height="270" alt=""></td> </tr> <tr> <td colspan="11"> <img src="images/area/copywrite_area.jpg" width="450" height="24" alt=""></td> </tr> </table> </div> <!-- End ImageReady Slices --> </body> </html> image: http://allyoucanupload.webshots.com/...57666093499606 |
|||||||