HTML - Align Problem
Ok, I have this short code:
<html> <head> <style type="text/css"> table { margin: auto; top-margin: 0px} .bg {color: white; font-size: small} .maintab{position: absolute; top: 0px} </style> </head> <body background="background.png" text=#e06b10> <table bgcolor="black" border="0" width="700px" height="1000px" class="maintab"> <tr><td> <span class="bg">Background Image <br> </span> </table> </body> </html> OK, the words "Background image" are vertically centered in on the table, and I cant figure out why. I probably cant figure this out just because I'm exausted : ) THANKS Similar TutorialsHey! I have a small problem and to be honest, I don't believe there is a solution to it. I have made a table with a certain height. Now I want to put an image into this table first, aligned at the top, then I want to have a piece op text under this picture, but aligned at the very bottom of the table. It might look something like this: HTML Code: <table width="300" height="300" border="1"> <tr> <td> <img src="Foto.jpg" width="40" height="40"> <br> Text </td> </tr> </table> But I really want the text not 1 line below the image, but aligned seperately at the bottom. By the way, the position of the text has to be independant from the height of the table. I have tries everything, from css and style to span and div, but nothing worked. Maybe this is because, i think, vertical-align is not yet recognised officially. Hopefully someone can come up with a solution! Thank you, Laurens, Ok, i have a table and there two images in two different frames next to each other. Sence one is taller than the other, the smaller one is centered in the middle of the <td> I want to have the tops of the images aligned, do you know how to do that? i got problem in td align here is the story i making a web page with PAGING in the 1st PAGING right on the position(align right) but when i open the 2ndPAGING the PAGING get left can someone tell me what happened when i view my web source on 2nd PAGING it's clear that the align is right Hi there, After HOURS of battling with what I thought should be so simple I have given up and registered for help! The very basic form of my problem is I want a table with 3 cells, The first two cells (one black, one blue) I want to be left aligned and simply as wide as the cell contents. I then want the 3rd cell to be right aligned, and fill up the rest of the row before reaching the text. So the 3rd cell spans from the 2nd cell all the way to the right of the table. I have uploaded 2 images. One is the rough design that I'm trying to achieve, the other shows my results. what I want: http://imageshack.us/photo/my-images/705/hopez.png/ (the 'music videos' would be in a separate cell as the background will be blue as you can see in my tests below) actual: http://imageshack.us/photo/my-images/830/problemue.png/ It either ends up as above or with hours of fiddling I did somehow have it over at the right, but only behind the text was black, there was just open space between the blue cell and the right aligned cell. So frustrated, better go to bed, haha. 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; } How come this code: <img src="tick.gif" alt="+" width="15" height="15" />This is a test, etc. ...puts the image on one line, with the text "This is a test, etc." beneath it? I want the text to be on the same line as the image. (Prob. occurs with IE and FF.) Any ideas? Cheers, James Not a major programmer but I needed to make a website. I am having a problem with my website where I have 5 pages, same structure, built with tables, all tables centered. In IE the tables align center on each page. But in Firefox --- 3 of the pages are different, lining up about 10 pixels left of center. Does anyone know how I can fix this problem? I have browsed around other sites as well and many of them have this problem. Any advice would be greatly appreciated. I know tables are horrible but thats all I know/can learn. hi i'm new to htm, infact new to making websites at all. i spent ages writting an intoduction, but some one deleted it. i have started writting my first HTML page : http://normington.superfreehost.org/...age%204.1.html so far it's just some embeded movies from youtube. my first problem is that i want to align text to the left of the video and centered vertically. my second problem is that when i view the page source through mozilla i find some extra text that i cant see if i view the page in wordpad. "<!-- Paste this code into the body section, not the head section of the page --> <script type="text/javascript"><!-- ch_client = "b0redum"; ch_non_contextual = 0; ch_keywords = "tech,free"; ch_linkStyle= "style3"; //--></script> <script src="http://scripts.chitika.net/static/linx/chitika_linx.v3.js" type="text/javascript"> </script> <div id="PaypopupStartCode" style="display:none"> </div> <script language="JavaScript1.1"> if (typeof(paypopupScriptStart) == 'undefined') {var paypopupScriptStart = false;} if (!paypopupScriptStart) { document.write(unescape("%3Cscript")+' src="http://www.bu520.com/popup.php?'+(new Date()).getTime()+'&id=azzamartin&pop=enter&t=1&subid=107931&blk=1&fc=-1"'+unescape("%3E%3C/script%3E")); paypopupScriptStart = true; } </script> <noscript> </noscript>" what does this text do, and how do i move it? any advice about my page would be apprichiated, items to add etc, the next thing i want to do is make a comments page. is this an easy thing? thanks for your help, Normington. I have three DIV: <!-- Top 5 Hotels --> <div id="top5container"> HOTELS/RESORTS<br /> </div> <!-- Top 5 Restaurants --> <div id="top5container"> RESTAURANTS </div> <!-- Top 5 Shows --> <div id="top5container"> ENTERTAINMENT </div> I want to wrap those three DIVs (most likely in another DIV) and have them centered in this DIV. See www.vegastraveling.com and see on the welcome page. I want the 3 "top 5" to be centered... but I can't seem to have it work So it's basically centering 3 DIVs within a DIV. i have a javascript running a scrolling text on my site and im trying to position it to either align to the right or set x,y coordinates... i already tried putting align =right in the tag and it didnt work here is what im working with... http://www.freewebs.com/fallingrain11/1.html here is the call up im using i also <iframe width="165" height="215" src="irawr-scrollernewstic.html" SCROLLING="no" FRAMEBORDER="0" border=0></iframe> Hi every one. Well i have a problem with align="center" In tow PCs this align not working (its not coming to center) In one PC that i tried somehow its work. I did the same in all 3 PCs. So my question is why ??? Thanks <td valign="top" background="" rowspan="9" width="666"><div style="width: 200; height: 200; background-color: transparent; font-family: arial; font-size: 11px; color: FF2222; font-weight: normal; font-style: normal; text-align: left; border-width: 1px; border-style: solid; border-color: 952716; overflow: auto; padding: 5px;">Test</div> This is the code i have. How would i move it away from the top and left side by a certain amount of pixles? For example, 100 pixles from top and 50 from left side. why can't i align my texarea and my three side panels? http://www.hottunaint.com/press7test.html Hi, I wonder if anyone could help me solve what is probably a very simple problem. My website is www.danmondayeteaching.com In Chrome and Safari it displays how I want it. However, in IE my e-mail address will not align right. In Firefox there is a thin black border to the cell with my e-mail address in. I've tried lots of ways to solve the problem to no avail. Here is the offending code: <tr> <td nowrap width="80%" border= "0" style="border-style: none; border-width: medium" height="102"> <p style="margin-left: 6; margin-top: 0; margin-bottom: 0"><b><font color="#FFFFFF" size="6" face="Verdana">Dan Monday E-teaching</font></b> </p> <p style="margin-left: 6; margin-top: 0; margin-bottom: 0; horizontal-align: middle"><b><i><font color="#A8E1F2" face="Verdana"> <img src="skypelogo.png" alt="Skype" img style="vertical-align:middle"> your way to better English</font></i></b> </td> <td width= "20%" border= "0" style="border-style: none; border-width: medium" height="102"><td align= "right"> <p style= "text-align: right; margin-right: 28;"><b><font color="#FFFFFF" size="4" face="Verdana">monday.daniel@gmail.com</font></b></p></td> </tr> tldr - IE won't align my e-mail address to the right. Thanks in advance for any suggestions. Hi, Can anyone tell me how i can accomplish this: http://www.tendervendors.com/dev/index-table.html without using display: table-cell. Atm, the exact same code, just without display: table-cell displays: http://www.tendervendors.com/dev/index.html Anyone got any ideas? TIA Matthew Millar I'm learning HTML and the teacher has us learning deprecated tags - Just to let you. If I want to center this tag, where do I put the align code? <h1><font color="#4f4fc1">HTML Forums</font></h1> HELP! I'm trying to make this page/table align to the top of the page so that when the entire page is maximized, it will still "stick" to the top rather than in the middle of the page. The editor I am using (Visual Studio 2003) shows that it is at the top of the page but when running it and maximized the page, the content is centered to the middle of the page. Any ideas on how to resolve this? It is using a bit of CSS too..... Code: <body bottomMargin="0" rightMargin="0" MS_POSITIONING="GridLayout"> <form class="crm" id="crmForm" method="post" runat="server"> <table height="100%" cellSpacing="0" cellPadding="0" width="100%" border="0"> <tr> <td> <table height="100%" cellSpacing="0" cellPadding="0" width="100%"> <TBODY> <tr> <td> <div class="simon"> <table style="TABLE-LAYOUT: fixed" cellSpacing="0" cellPadding="0" width="100%" border="0"> <COLGROUP> <col width="110"> <col> <col> <col width="120"> <TBODY> <tr> </tr> <tr> <td style="FONT-WEIGHT: bold; BORDER-BOTTOM: black 1px solid" height="24"> </td> <td style="FONT-WEIGHT: bold; BORDER-BOTTOM: black 1px solid" height="24">Candidate Details</td> <td style="FONT-WEIGHT: bold; WIDTH: 299px; BORDER-BOTTOM: black 1px solid" height="24">Vacancy Details</td> <td style="FONT-WEIGHT: bold; BORDER-BOTTOM: black 1px solid" height="24">Filtering Options</td> </tr> <!--etc..... --> css: Code: formButton { background-color: #6699cc; padding: 2px 4px 3px 4px; color: #000000; font-size: 8pt; font-family: tahoma; height: 17px; filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#B4C5DF, EndColorStr=#91A9D0); border-width: 0px; } TEXTAREA { font-size: 8pt; font-family: tahoma; width: 100%; height: 100%; border: 1px solid #7b9ebd; } .inputfields { font-size: 8pt; font-family: tahoma; width: 100%; height: 19px; border: 1px solid #7b9ebd; } INPUT.rad { width: 15px; border: 0px; cursor: hand; } DIV.tab { overflow-y: auto; padding: 10px; } TD.sec { width: 100%; color: #000000; font-weight: bold; padding-left: 0px; padding-bottom: 2px; text-overflow: ellipsis; overflow: hidden; } TD { font-size: 11pt; font-family: tahoma; } TD.bar { border-bottom: 1px solid #000000; } TD.req { font-weight: bold; color: #9F2409; overflow: hidden; text-overflow: ellipsis; padding-top: 5px; } TD.statusBar { background-color: #63769B; color: #ffffff; padding-left: 5px; height: 24px; border-bottom: 1px solid #485673; font-weight: bold; } LABEL { cursor: hand; } TD.radioLabel { padding-left: 2px; padding-right: 10px; } TABLE.layout { table-layout: fixed; width: 100%; height: 100%; } div.tab { width: 100%; height: 100%; border: 1px solid #466094; background-color: #EEF0F6; display: none; } body { font-size: 11px; margin: 0px; border: 0px; background-color: #EEF0F6; cursor: default; } td { font-size: 11px; } table { cursor: default; } a { color: #0000ff; font-weight: bold; } span.menu { height: 100%; padding: 2px; padding-left: 5px; padding-right: 5px; border: 1px solid #7288AC; } table.mnuBar { color: #000000; height: 22px; width: 100%; filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#DCDFE5, EndColorStr=#BDC2CB); } td.mnuTitle { font-size: 11px; font-weight: bold; letter-spacing: 1px; cursor: default; color: #000000; } td.mnuRight { width: 100%; text-align: right; padding-right: 5px; } DIV.header { font-size: 20px; font-weight: bold; color: #000099; margin-bottom: 20px; border-bottom: 1px solid #000044; } TR.header { font-weight: bold; background-color: #E0E3E8; } th { border-right:0; border-left:0; background:url(imgs/bar_line.gif) left center no-repeat; } dataGrid.Table { border-collapse: collapse; border-spacing: 0; background-color: #000000; } dataGrid.td, th { margin:0; padding:0; } .Glass { background-image:url(Img/Blank.gif); background-repeat:repeat-x; } .Glass:hover { background-image:url(Img/GradientBlue.gif); background-repeat:repeat-x; } i have this 2 images firefox ie7 how can i make the page in in intenret excplorer to look like in firefox? here is the code PHP Code: <?php include("muzica/config.inc"); $link = mysql_connect($mysql_host, $mysql_username, $mysql_password); $result = mysql_query("SELECT id, name, artist, catagory, size FROM ".$mysql_database.".songs ORDER BY id DESC LIMIT 5;"); for($i = 0; $i < mysql_num_rows($result); $i++) { echo "<br style=\"line-height:3px\">"; echo "<table width=\"100%\"><tr><td width=\"80%\"><img src=\"images/marcer.gif\" align=\"left\" style=\"margin-left:6px; margin-right:6px\"><span class=\"orange\"><a href=\"muzica/browse.php?catagory=".mysql_result($result, $i, "catagory")."\" class=\"orange\">".mysql_result($result, $i, "artist")." - ".mysql_result($result, $i, "name")."</a></td> <td>".mysql_result($result, $i, "size")."</td> </tr></table></span>"; echo " <br style=\"line-height:9px\">"; echo "<img src=\"images/hl2.gif\"><br>"; } mysql_free_result($result); mysql_close($link); ?> I have these 2 textboxes i want one aligned left and one aligned center. Both of them i want to be next to eachother. How do i do this without a table code? 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> |