HTML - How Best To Align Fields With Bkgd Img?
I want to develop a website that uses background images with text input fields aligned over it. I have been developing HTML for years, but until now it's all been basic stuff - I want to get more creative with this new site. I develop my pages using a text editor, but if there is a good GUI editor that can handle complex designs I'd be willing to buy it or use something like Komposer.
I have attached what I have started, so you can see what I'm attempting. BTW: This site (htmlforums.com) is one of the most creative sites I've ever seen. Nice job! Thanks! --Bob Similar Tutorialsi 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, 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! 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. <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. 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 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 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. why can't i align my texarea and my three side panels? http://www.hottunaint.com/press7test.html I am creating a small crm and would like to have the input fields look like regular text until clicked on. At that point I would like the input field to be edited....is this possible? For example... First name : James would appear like this....when clicking on James, it puts a input box so you are able to edit the field. I will be using php. hi guys, im new here, and by no means a web designer/coder. however i do dabble in some HTML to save time & money. at present, customers sign up on our website, the form sends that data to our database. (for this we use the pure360.com API) upon submission, a trigger email is sent to that customers email with a voucher, the voucher says to Ryan (ryan@email.com) etc. which is fine. however we would prefer it to be online instead of via email. so customers sign up, data is sent from pure360 form to our database then the success URL shows the voucher on screen with their data pre populated into the fields. could anybody help me with the code to do this? i have attached the basic signup form coding. thanks in advance, Ryan Hey Everyone, Can someone align these 3 tables for me. Code: <td class='maincontent' colspan='2'> <table class='maintable' cellpadding='0' cellspacing='0'> <tr> <td width='20%' valign='top' style='padding: 8px; padding-right: 0px;'> <?php include "columnmenus.php"; ?> </td> <td width='60%' valign='top'> <td width='20%' valign='top' style='padding: 8px; padding-right: 0px;'> <?php include "rightcolumnmenus.php"; ?> </td> Okay so I'm making a mock up sign in and log in page and this is what I want to happen but since it only has 2 columns, the log in page gets drag on the middle. i want it to look like this: I have a list of items and I want to display image on the right side of one list item. How can i do it? For example: <ul> <li>Coffee</li> <li>Tea</li> </ul> I want to display a rectangle figure on the right side of 'Coffee' text. I get this error message when trying to validate my page in 4.01 transitional. What html code can I use to get a vertical alignment with my tables. Error Line 18, column 79: there is no attribute "VALIGN" . ... cellspacing=10 align="center" valign="top"> Thanks I am trying to set up a form for a website, but i am having problems with the alignment the code that i have is HTML Code: <form name="charclient" action="https://forms.netsuite.com/app/site/hosting/scriptlet.nl?script=26&deploy=1&compid=1200531&h=32f337b26222d60b23c1" method="post"> <table width="375" border="0" cellpadding="0" cellspacing="0"> <tr> <td rowspan="4" width="1" height="200"><img src="images/spacer.gif" alt="space" width="1" height="1" /></td> <td height="56" colspan="3" valign="top"><img src="images/spacer.gif" height="8" width="1" /><br /> <img src="images/joinus.png" /><br />Is your charity eligible for The Heart of Gold Donation Program?<br /> <img src="images/spacer.gif" height="1" width="8" /></td></tr> <tr> <td width="160" height="40" valign="middle"><b>First Name: *</b><br /> <input type="text" name="firstname" value="" size="30" /> </td> <td width="35" rowspan="2"> </td> <td width="179" height="40" valign="middle"><b>Last Name: *</b><br /> <input type="text" name="lastname" value="" size="30" /></td> </tr> <tr> <td valign="middle" height="44"><b>Email: *</b><br /> <input type="text" name="email" value="" size="30" /></td> <td valign="middle" height="44"><b>Organization: *</b><br /> <input type="text" name="companyname" value="" size="30" /></td> </tr><tr> <td valign="middle" height="44"><b>Phone: *</b><br /> <input type="text" name="phone1" id="phone1" value="" size="3" maxlength="3" style="margin-bottom:10px; float:left; border-left:none; padding-left:4px; margin-right:0px;" onKeyUp="autoTab(this,'phone2'); buildPhoneNumber();"/> <input type="text" name="phone2" id="phone2" value="" size="3" maxlength="3" style="float:left; border-left:none; margin-right:0px; margin-left:0px;" onKeyUp="autoTab(this,'phone3'); autoTabBack(this,'phone1'); buildPhoneNumber();"/> <input type="text" name="phone3" id="phone3" value="" size="4" maxlength="4" style="float:left; border-left:none; margin-right:0px; margin-left:0px;" onKeyUp="autoTabBack(this,'phone2'); buildPhoneNumber();"/> <b>EXT: *</b> <input type="text" name="ext" id="ext" value="" size="3" maxlength="3" style="margin-bottom:5px; float:left; border-left:none; margin-left:2px;" onKeyUp="autoTabBack(this,'ext'); buildPhoneNumber();"/> <input type="hidden" name="phone" id = "fullPhoneNumber" value="" size="27" /> <td colspan="1" height="40"><br /></td> <td valign="middle" height="39"> <input name="submit" type="image" src="images/joinbutton2.jpg" alt="joinus" align="right" border="0" style="margin-right:2px; margin-bottom:6px" /></td> </tr> </table> my problem is where it says <b>EXT: *<b> <input type="text" name="ext" id="ext" value="" size="3" maxlength="3" style="margin-bottom:5px; float:left; border-left:none; margin-left:2px;" onKeyUp="autoTabBack(this,'ext'); buildPhoneNumber();"/> the website is http://www.heartofgoldprogram.com/charities/index3.php you can see there how it is when i look in the web site this is not align with the other boxes in the phone number... i can't find the solution for that to be align. if any body can help me it will be great. thanks I need 2 to go to the top like 4 is, and then 1 to go right below 2, etc. Photo below. Hi guys, I am building web for friend and I have problem with aligning my div table on my sidebar. The sidebar needs to be on top of the page and i can't get it up there here is the website: herehere and here is my html where you can see how i have set up the divs : herehere If you can help me that will be grate. I NEED HEEEEEEELP Thanks Hello Guys, I have made some page with nested div's. I made it's width to 80%. I want that to be completely aligned to center of the page. I tried with css and with html and with parent div. But some thing makes it not to work. Can you see the below code and please suggest me to get that to center. HTML Code: <style type="text/css"> .nm-left { text-align:left; vertical-align:text-top; } .nm-left .nm-video, .nm-right .nm-video-reverse, .nm-left .nm-avatar, .nm-left .nm-avatar-wrapper, .nm-left span.nm-button, .nm-left #user-form input#submit { float:left; } .nm-right { text-align:right; vertical-align:text-top; } .nm-right .nm-video, .nm-left .nm-video-reverse, .nm-right .nm-avatar, .nm-right .nm-avatar-wrapper, .nm-right span.nm-button, .nm-right #user-form input#submit { float:right; } .nm-wrapper { clear:both; font-size:14px; line-height:21px; margin:20px 0; padding:0px; } .nm-wrapper div { background-position:99% 10px; background-repeat:no-repeat; margin:0; padding:0; } .nm-wrapper div div { } .nm-wrapper div div div { overflow:hidden; } #ninjamonials .nm-wrapper div div div div { background:transparent; padding:20px;} #ninjamonials .nm-wrapper div div div div div { padding:0; } blockquote.nm-summary div, blockquote.nm-testimonial div, blockquote.nm-summary, blockquote.nm-testimonial, blockquote.nm-summary p, blockquote.nm-testimonial p { background:transparent; border:none; padding:0; margin:0; text-decoration:none; font-style:normal; } span.nm-button, #user-form input#submit { margin:5px; } #user-form { background-position:left bottom; background-repeat:repeat-x; clear:both; font-size:14px; line-height:21px; margin-top:20px; padding:5px; } .nm-testimonial, .nm-summary, .nm-author { padding-left:140px } .nm-summary { font-weight:bold; } .nm-author { display:block; font-size:12px; } .nm-name { font-weight:bold; padding-right:5px; } .nm-video, div.nm-video-reverse { margin:10px !important; } .nm-audio, .nm-author { padding:5px !important; } .nm-audio { display:block; } .nm-name { font-style:italic; } /* Oceanic Avatar-Specific CSS */ .nm-avatar { } .nm-avatar img { background-color:#F7F7F7; border:1px solid #DBDBDB; margin:10px; padding:5px; } /* Oceanic Module-Specific CSS */ .nm-module { overflow:hidden; margin: 5px; padding:4px!important; } .nm-module div.nm-avatar img { } .nm-module div.nm-avatar { } /* Blue Style */ .nm-right.nm-oceanic-blue.nm-module, .nm-right.nm-oceanic-blue .nm-module { background:#EFF8FF url(oceanic_blue_tl.png) no-repeat -10px -10px; border:1px solid #D5ECFF; -moz-border-radius:5px; -webkit-border-radius:5px; } .nm-left.nm-oceanic-blue.nm-module, .nm-left.nm-oceanic-blue .nm-module { background:#EFF8FF url(oceanic_blue_nq.png) no-repeat -10px -10px; border:1px solid #D5ECFF; -moz-border-radius:5px; -webkit-border-radius:5px; } .nm-right.nm-oceanic-blue .nm-wrapper { background:#EFF8FF url(oceanic_blue_tl.png) no-repeat; color:#666; } .nm-left.nm-oceanic-blue .nm-wrapper { background:#EFF8FF url(oceanic_blue_nq.png) no-repeat; color:#666; } .nm-oceanic-blue .nm-wrapper div { background:url(oceanic_blue_tr.png) no-repeat 100% 0; } .nm-oceanic-blue .nm-wrapper div div { background:url(oceanic_blue_bl.png) no-repeat 0 100%; } .nm-oceanic-blue .nm-wrapper div div div { background:url(oceanic_blue_br.png) no-repeat 100% 100%; } .nm-oceanic-blue #user-form { background-color:#EFF8FF; border:1px solid #D5ECFF; -moz-border-radius:5px; -webkit-border-radius:5px; } .nm-left.nm-oceanic-blue .nm-avatar-wrapper { margin:0 10px 10px 0; min-height:70px; min-width:90px; background: url(oceanic_blue_quote.png) no-repeat 10px 10px !important; } /* Green Style */ .nm-right.nm-oceanic-green.nm-module, .nm-right.nm-oceanic-green .nm-module { background:#EBF4D7 url(oceanic_green_tl.png) no-repeat -10px -10px; border:1px solid #9AC740; -moz-border-radius:5px; -webkit-border-radius:5px; } .nm-left.nm-oceanic-green.nm-module, .nm-left.nm-oceanic-green .nm-module { background:#EBF4D7 url(oceanic_green_nq.png) no-repeat -10px -10px; border:1px solid #9AC740; -moz-border-radius:5px; -webkit-border-radius:5px; } .nm-right.nm-oceanic-green .nm-wrapper { background:#EBF4D7 url(oceanic_green_tl.png) no-repeat; color:#666; } .nm-left.nm-oceanic-green .nm-wrapper { background:#EBF4D7 url(oceanic_green_nq.png) no-repeat; color:#666; } .nm-oceanic-green .nm-wrapper div { background:url(oceanic_green_tr.png) no-repeat 100% 0; } .nm-oceanic-green .nm-wrapper div div { background:url(oceanic_green_bl.png) no-repeat 0 100%; } .nm-oceanic-green .nm-wrapper div div div { background:url(oceanic_green_br.png) no-repeat 100% 100%; } .nm-oceanic-green #user-form { background-color:#EBF4D7; border:1px solid #9AC740; -moz-border-radius:5px; -webkit-border-radius:5px; } .nm-left.nm-oceanic-green .nm-avatar-wrapper { margin:0 10px 10px 0; min-height:70px; min-width:90px; background: url(oceanic_green_quote.png) no-repeat 10px 10px !important; } /* Grey Style */ .nm-right.nm-oceanic-grey.nm-module, .nm-right.nm-oceanic-grey .nm-module { background:#EFEFEF url(oceanic_grey_tl.png) no-repeat -10px -10px; border:1px solid #999; -moz-border-radius:5px; -webkit-border-radius:5px; } .nm-left.nm-oceanic-grey.nm-module, .nm-left.nm-oceanic-grey .nm-module { background:#EFEFEF url(oceanic_grey_nq.png) no-repeat -10px -10px; border:1px solid #999; -moz-border-radius:5px; -webkit-border-radius:5px; } .nm-right.nm-oceanic-grey .nm-wrapper { background:#EFEFEF url(oceanic_grey_tl.png) no-repeat; color:#666; } .nm-left.nm-oceanic-grey .nm-wrapper { background:#EFEFEF url(oceanic_grey_nq.png) no-repeat; color:#666; } .nm-oceanic-grey .nm-wrapper div { background:url(oceanic_grey_tr.png) no-repeat 100% 0; } .nm-oceanic-grey .nm-wrapper div div { background:url(oceanic_grey_bl.png) no-repeat 0 100%; } .nm-oceanic-grey .nm-wrapper div div div { background:url(./images/oceanic_grey_br.png) no-repeat 100% 100%; } .nm-oceanic-grey #user-form { background-color:#EFEFEF; border:1px solid #999; -moz-border-radius:5px; -webkit-border-radius:5px; } .nm-left.nm-oceanic-grey .nm-avatar-wrapper { margin:0 10px 10px 0; min-height:70px; min-width:90px; background: url(./images/oceanic_grey_quote.png) no-repeat 10px 10px !important; } /* White Style */ .nm-right.nm-oceanic-white.nm-module, .nm-right.nm-oceanic-white .nm-module { background:#FFF url(oceanic_white_tl.png) no-repeat -10px -10px; border:1px solid #E8E8E8; -moz-border-radius:5px; -webkit-border-radius:5px; } .nm-left.nm-oceanic-white.nm-module, .nm-left.nm-oceanic-white .nm-module { background:#FFF url(oceanic_white_nq.png) no-repeat -10px -10px; border:1px solid #E8E8E8; -moz-border-radius:5px; -webkit-border-radius:5px; } .nm-right.nm-oceanic-white .nm-wrapper { background:#FFF url(oceanic_white_tl.png) no-repeat; color:#666; border:1px solid #E8E8E8; -moz-border-radius:5px; -webkit-border-radius:5px; } .nm-left.nm-oceanic-white .nm-wrapper { background:#FFF url(oceanic_white_nq.png) no-repeat; color:#666; border:1px solid #E8E8E8; -moz-border-radius:5px; -webkit-border-radius:5px; } .nm-oceanic-white .nm-wrapper div { background:url(oceanic_white_tr.png) no-repeat 100% 0; } .nm-oceanic-white .nm-wrapper div div { background:url(oceanic_white_bl.png) no-repeat 0 100%; } .nm-oceanic-white .nm-wrapper div div div { background:url(oceanic_white_br.png) no-repeat 100% 100%; } .nm-oceanic-white #user-form { background-color:#FFF; border:1px solid #E8E8E8; -moz-border-radius:5px; -webkit-border-radius:5px; } .nm-left.nm-oceanic-white .nm-avatar-wrapper { margin:0 10px 10px 0; min-height:70px; min-width:90px; background: url(oceanic_white_quote.png) no-repeat 10px 10px !important; } .nm-audio1 {padding:5px !important; } .nm-summary1 {padding-left:140px } </style> <div id="ninjamonials" class="nm-oceanic-grey nm-left" style="width:80%"> <!--bof nm-wrapper --> <div class="nm-wrapper"> <div> <div> <div> <div class="nm-content"> <div class="nm-avatar-wrapper"> </div> <blockquote class="nm-testimonial"> <p>This is a testimonial test. This is a testimonial test. This is a testimonial test. This is a testimonial test. This is a testimonial test. This is a testimonial test. </p> <p>This is a testimonial test. This is a testimonial test. This is a testimonial test. This is a testimonial test. This is a testimonial test. This is a testimonial test. </p> </blockquote> <div class="nm-author"> <span class="nm-name">Name</span> (Website<span class="nm-title"></span> ~ <span class="nm-auth-url"><a href="http://www.google.com/">www.google.com</a></span> , <span class="nm-location">Mine</span> ) </div> <!--eof nm-author --> </div> <!--eof nm-content --> <!--eof wrapper --> </div> </div> </div> </div> <div class="nm-wrapper"> <div> <div> <div></div></div></div></div></div> Waiting for your solution. Thanks in advance! |