|
HTML - Help - Can't Valign Middle
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/ Similar TutorialsI 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? 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'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. 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! 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? Hi, I have a problem. I don't get my table in the middle of the page. can someone help me? <removed by me> Got it now, delete this topic please I have my Introduction with the title and all. Then i want my href links on the left side of the picture. However i can't seem to be able to do it.(this is a type of autobiographical site for web design, i am making it as a joke to the current assignment. HOWEVER my teacher isn't able to assist me with this...) Ok here is my code <html> <head> <title>A web site about nothing but video games</title> </head> <body> <h1 align="Center">Chairman of the world</h1> <h4 align="center">This is a site dedicated to Chairman Tide Oo</h4> <hr noshade="1"> <center> <img align="middle" src="http://www.dimensionsguide.com/wp-content/uploads/2009/11/Orange.jpg"> </center> <a href="_" >Link 1</a> <p>Yes and yes</p> <a href="_">Link 2</a> <p>Why not </p> <a href="_">Link 3</a> <p>Why yes </p> <a href="_">Link 4</a> <p>Ye...no?</p> <a href="_">Link 5</a> <p>YES!</p> <hr noshade="1"> </body> </html> Thank you~ i'm new so please be gentle! I have recently designed and put up a new website. url he http://www.thecomicstrippresents.webs.com it's the first time i have used photoshop to design a website and for a first attempt i dont think it looks half bad. i'm sure as well as looking a whole lot worse, it could look a lot better. first off can someone tell me the ideal resolution i need to save the images as some of the images are grainy and pixely. secondly, can someone suggest what i can use to put content in the mid section? a lot of the content is longer than the box allows so for the time being i have put an Iframe there, the iframe is ok temporarily but will be a bit of a as far as SEO goes and up until i changed to iframe i was coming up second page of a google websearch for 'The Comic Strip Presents' please can you someone help? cheers Em Hi I am trying to make the image "y.bmp" and the text "Yahoo" and the other text ">" in the middle (vertically) I tried "vertical-align: middle" but does not work may someone please help me here. here is my html thanks HTML Code: <div style="width: 100%;">
<table cellspacing="0" cellpadding="0" style="width: 100%;">
<tr style="height: 76px; width: 100%; background-image: url('rep.bmp'); background-repeat: repeat-x;">
<td>
<a style="display: block; height: 100%; width: 100%; vertical-align: middle;" href="http://www.yahoo.com">
<img style="" src="y.bmp" />Yahoo!</a>
</td>
<td align="right">
<a style="display: block; height: 100%; width: 100%; vertical-align: middle;" href="http://www.yahoo.com">
></a>
</td>
</tr>
<tr style="height: 76px; width: 100%; background-image: url('rep.bmp'); background-repeat: repeat-x;">
<td>
<a style="display: block; height: 100%; width: 100%; vertical-align: middle;" href="http://www.google.com">
<img src="g.bmp" />Google</a>
</td>
<td align="right">
<a style="display: block; height: 100%; width: 100%; vertical-align: middle;" href="http://www.google.com">
></a>
</td>
</tr>
</table>
</div>
Help, Can anyone tell me why my website is splitting down the middle. In other words when I scroll down it looks like the left half and right half don't match. It happens on all computers. And, how do I fix it? The url is www.gotobreakingthrough.com Thanks Can someone please tell me how to center an iframe vertically on a page. I am feeling really stupid right now that I can't get it. I've tried a few different things and it's not budging!!!! Please help - thanks! I'm getting strange characters right in the middle of a word. The character looks like a rectangle with an X in it in my browser Safari. At a PC at a university the character was different, dots, I think. Here is the code for the relavent line: <LI><U> La Primavera: Music for voice, lute, viola da gamba and recorder from the English Renaissance</U> You can listen to the whole CD at Magnatune Records and it is also available <A HREF="luteCD.html#Total running time: 59:22"> <strong> here </strong></A>). Played lute as well as produced and arranged music from the late Renaissance featuring lute songs and instrumentals <BR> <align = 'right'> <a href = "mainpage.htm#Why">Back to Home Page</a> </right> Strange. The characters appear in the preview window for this message but not the window I'm typing in now. If you see the characters, there is no need to visit my page, but here is the link to the page. The troublesome line is at the bottom. http://www9.plala.or.jp/edurbrow/personalhistory.html TIA Hey guys! On the site I'm working on, I have made overflow:hidden, scrollbars:none, and body scroll=no. It works fine. But when I press and hold the scroll wheel on my mouse to scroll left and right (Middle Click Scrolling), it actually scrolls. How do I disable middle click scrolling? This is my first post here so I apologize if I've done something wrong. Thank you! EDIT: It also scrolls when I use the arrow keys! Help 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 how do you make it so the video is displayed in the middle of the browser? (I already got it in the center but I want it in the middle of the browser as well) Thanks. <center> <OBJECT ID="MediaPlayer" WIDTH="100" HEIGHT="100" CLASSID="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" STANDBY="Loading Windows Media Player components..." TYPE="application/x-oleobject"></div></div> <PARAM NAME="FileName" VALUE="http://www.htmlcodetutorial.com/graphics/heart.avi"> <PARAM name="ShowControls" VALUE="false"> <param name="ShowStatusBar" value="false"> <PARAM name="ShowDisplay" VALUE="false"> <PARAM name="autostart" VALUE="true"> <EMBED TYPE="application/x-mplayer2" SRC="http://www.htmlcodetutorial.com/graphics/heart.avi" NAME="MediaPlayer" WIDTH="100" HEIGHT="100" ShowControls="0" ShowStatusBar="0" ShowDisplay="0" autostart="1"> </EMBED>10:00 AM 11/4/2008 </OBJECT> </center> Hi guys, I'm really having a problem here. I'm creating a new instant messenger program and can't get the tables to stretch properly. Firstoff, when the messenger loads, you will not see the address bar, status bar, menu bar, etc. I want to be able to resize the browser (messenger) window to any size, just like you would with msn for example. I have 3 tables. 1) The first one will contain all the header graphics etc and I want this table to stay aligned to the TOP of the browser window. 2) The middle table is where the chat conversation text will go. The chat text will be aligned to the top of this window. This is the window that I need to stretch to vertically automatically when you resize the browser window. 3) The last table is where the message entry box will be. I want this to stay aligned to the BOTTOM of the browser window. Right now, my MAIN TABLE which contains all of the messenger content does stretch to fit the screen, but how the heck do I get the three tables inside it to be aligned how i need them??? Here is the basic code that I'm working with: <html> <head> <title>Site Title</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <table id="fullheight" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%"> <tr> <td> <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%"> <tr> <td width="100%">Header goes here - Stays aligned to the top of the browser window</td> </tr> <tr> <td width="100%">Middle chat content - automatically stretches vertically when the browser window is resized</td> </tr> <tr> <td width="100%">Message entry box section - stays aligned to the bottom of the browser window</td> </tr> </table> </td> </tr> </table> </body> </html> This is the CSS code that I'm using which makes the MAIN table expand to fit the entire browser window: html, body { margin:0; padding:0; height:100%; border:none } #fullheight{height:100%} Can anyone please help me out? Thanks! Hi, I have problem with XHTML CSS vertical align middle. It works with Firefox but not with IE6. Many people has IE6 still so I need to get it to work. HTML Code: <div style="height: 128px;">text</div> How would I middle vertical align the text? HTML Code: <div id="table_small"><div id="table_vm">Special Offer</div></div> HTML Code: #table_small
{
background-image: url('images/table.jpg');
width: 128px;
height: 22px;
border: 1px solid #5a5a5a;
font-family: Verdana;
font-size: 10px;
color: #e0e0e0;
text-align: center;
display: table;
}
#table_vm
{
display: table-cell;
vertical-align: middle;
}
First off I want to say that I'm new to this forum. Thanks in advance for the help you can give to a noobie. Here's the "dummy page" I put up: http://www.mrcrepe.com/work.html The table I made in dreamweaver. I put it as 900px wide with 1 row and 2 columns. The border color I made a redish/pinkish color as you can see on the outsides, but how do I make that "separater border" into the same color? Right now it's just that silver line. Thanks in advance. -Brian |
|||||||