HTML - Aligning Boxes
Please can someone help me with html code to align boxes in code below. Boxes are all out of line at the moment. I have read that it is best to create a table, however I am really new to html and not sure how to do that.
Thank you James HTML Code: <fieldset> <br> <div> <input type="hidden" name="sexuality" value="1"> </div> <div> <label>I'm a:</label> <select name="gender"> <option value="1" selected>man looking for a woman</option> <option value="2">woman looking for a man</option> </select> </div> <div> <br> <label>First name:</label> <input name="firstname" type="text"> </div> <div> <br> <label>D.O.B.:</label> <select name="dobday"> <option value="">Day</option> <option value="1">01</option> <option value="2">02</option> <option value="3">03</option> <option value="4">04</option> <option value="5">05</option> <option value="6">06</option> <option value="7">07</option> <option value="8">08</option> <option value="9">09</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> <option value="26">26</option> <option value="27">27</option> <option value="28">28</option> <option value="29">29</option> <option value="30">30</option> <option value="31">31</option> </select> <select name="dobmonth"> <option value="">Month</option> <option value="1">January</option> <option value="2">February</option> <option value="3">March</option> <option value="4">April</option> <option value="5">May</option> <option value="6">June</option> <option value="7">July</option> <option value="8">August</option> <option value="9">September</option> <option value="10">October</option> <option value="11">November</option> <option value="12">December</option> </select> <select name="dobyear"> <option value="">Year</option> <option value="1990">1990</option> <option value="1989">1989</option> <option value="1988">1988</option> <option value="1987">1987</option> <option value="1986">1986</option> <option value="1985">1985</option> <option value="1984">1984</option> <option value="1983">1983</option> <option value="1982">1982</option> <option value="1981">1981</option> <option value="1980">1980</option> <option value="1979">1979</option> <option value="1978">1978</option> <option value="1977">1977</option> <option value="1976">1976</option> <option value="1975">1975</option> <option value="1974">1974</option> <option value="1973">1973</option> <option value="1972">1972</option> <option value="1971">1971</option> <option value="1970">1970</option> <option value="1969">1969</option> <option value="1968">1968</option> <option value="1967">1967</option> <option value="1966">1966</option> <option value="1965">1965</option> <option value="1964">1964</option> <option value="1963">1963</option> <option value="1962">1962</option> <option value="1961">1961</option> <option value="1960">1960</option> <option value="1959">1959</option> <option value="1958">1958</option> <option value="1957">1957</option> <option value="1956">1956</option> <option value="1955">1955</option> <option value="1954">1954</option> <option value="1953">1953</option> <option value="1952">1952</option> <option value="1951">1951</option> <option value="1950">1950</option> <option value="1949">1949</option> <option value="1948">1948</option> <option value="1947">1947</option> <option value="1946">1946</option> <option value="1945">1945</option> <option value="1944">1944</option> <option value="1943">1943</option> <option value="1942">1942</option> <option value="1941">1941</option> <option value="1940">1940</option> <option value="1939">1939</option> <option value="1938">1938</option> <option value="1937">1937</option> <option value="1936">1936</option> <option value="1935">1935</option> <option value="1934">1934</option> <option value="1933">1933</option> <option value="1932">1932</option> <option value="1931">1931</option> <option value="1930">1930</option> <option value="1929">1929</option> <option value="1928">1928</option> <option value="1927">1927</option> <option value="1926">1926</option> <option value="1925">1925</option> <option value="1924">1924</option> <option value="1923">1923</option> <option value="1922">1922</option> <option value="1921">1921</option> <option value="1920">1920</option> <option value="1919">1919</option> <option value="1918">1918</option> <option value="1917">1917</option> <option value="1916">1916</option> <option value="1915">1915</option> <option value="1914">1914</option> <option value="1913">1913</option> <option value="1912">1912</option> <option value="1911">1911</option> <option value="1910">1910</option> <option value="1909">1909</option> </select> </div> <div> <br> <label>Email:</label> <input name="email" type="text"> </div> <div> <br> <label>Password:</label> <input name="password" type="password" value=""> </div> <div> Similar TutorialsHere is the page I am working on: http://pharosgroup.net/index.php?opt...=article&id=79 From Leadership Competency downward, I am trying to align those drop down boxes so that each of them are the same no matter how long or short the question is. It seems all questions that take up two lines have the boxes all the way to the right by default and its perfect just the way I want it! However I cannot get the rest to matchup correctly, any tips or help would be great! I do have Dream weaver also but cannot figure it out! I can also post the code if it will help. Hello, I ran into this problem today in my Basic XHTML class, and it was enough to stump me and the instructor: if you want to put an unordered list in the middle of a page, but you want the list items to be left-aligned so the bullets are one on top of the other...how do you do it? I started with code something like <div align="center"> <ul type="disc"> <li>Wine</li> <li>Women</li> <li>Song</li> </ul> </div> This centers the list on the page, but it also centers each list item. I tried placing a <div align="left"> around the list items, individually and collectively, but depending on the positioning it either had no effect or it nullified the center attribute completely and gave me a left-aligned list on the left edge of the page. Attempts to change the style of the <li> tag, which I haven't done in months and was never all that good at, failed. I know I can do this in ten seconds by putting the list inside a one-cell table, and with much fiddling I could probably do it with a spacer GIF...but what's the 1.0 Strict way? How would i go about aligning everything on a page so instead of starting on the very left of the page, it starts X amount of pixels away from the side? Also how can i adjust the space between each line of text? Make it a bit wider or smaller..etc I have a form i am creating for a widget to put on my website but for some reason it does not align all the way to the left instead it is off center. How do i put it to the far left? And then there is a random box that appears in the top, how do I remov this? Thank you HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <input> </head> <body> <form id="form1" action="https://app.realeflow.com//api/contactSubmit.aspx?id=35151&type=1&ar=30178" method="post" name="form1"> <script type="text/javascript">// <![CDATA[ function numbersonly(myfield, e, dec) { var key; var keychar; if (window.event) key = window.event.keyCode; else if (e) key = e.which; else return true; keychar = String.fromCharCode(key); if ((key == null) || (key == 0) || (key == 8) || (key == 9) || (key == 13) || (key == 27)) return true; else if ((("0123456789").indexOf(keychar) > -1)) return true; else if (dec && (keychar == ".")) { myfield.form.elements[dec].focus(); return false; } else return false; } // ]]></script> <div id="seller_opt" class="optin" style="PADDING-BOTTOM: 0pt; PADDING-LEFT: 0pt; WIDTH: 477px; PADDING-RIGHT: 0pt; BACKGROUND: url(http://www.ibuyhousesinsanantonio.com/wp-content/uploads/2012/01/Untitled.png) no-repeat 0pt 50%; HEIGHT: 481px; PADDING-TOP: 55px; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial"> <p class="text" style="PADDING-BOTTOM: 0pt; MARGIN: 2px; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; FONT: 13px Arial,Helvetica,sans-serif; COLOR: rgb(0,0,0); PADDING-TOP: 0pt; font-size-adjust: none; font-stretch: normal" >Name:</p> <div style="PADDING-BOTTOM: 0pt; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; PADDING-TOP: 0pt"> <input id="SellerWizard_ownerName" style="BORDER-BOTTOM: rgb(0,0,0) 1px solid; BORDER-LEFT: rgb(0,0,0) 1px solid; PADDING-BOTTOM: 2px; MARGIN: 0pt 0pt 2px; PADDING-LEFT: 2px; WIDTH: 155px; PADDING-RIGHT: 2px; FONT: 13px Arial,Helvetica,sans-serif; HEIGHT: 22px; COLOR: rgb(88,88,88); BORDER-TOP: rgb(0,0,0) 1px solid; BORDER-RIGHT: rgb(0,0,0) 1px solid; PADDING-TOP: 2px; font-size-adjust: none; font-stretch: normal" name="SellerWizard$ownerName" maxlength="100"> </div> <p class="text" style="PADDING-BOTTOM: 0pt; MARGIN: 2px; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; FONT: 13px Arial,Helvetica,sans-serif; COLOR: rgb(0,0,0); PADDING-TOP: 0pt; font-size-adjust: none; font-stretch: normal" >E-mail Address:</p> <div style="PADDING-BOTTOM: 0pt; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; PADDING-TOP: 0pt"> <input id="SellerWizard$ownerEmail" style="BORDER-BOTTOM: rgb(0,0,0) 1px solid; BORDER-LEFT: rgb(0,0,0) 1px solid; PADDING-BOTTOM: 2px; MARGIN: 0pt 0pt 2px; PADDING-LEFT: 2px; WIDTH: 155px; PADDING-RIGHT: 2px; FONT: 13px Arial,Helvetica,sans-serif; HEIGHT: 22px; COLOR: rgb(88,88,88); BORDER-TOP: rgb(0,0,0) 1px solid; BORDER-RIGHT: rgb(0,0,0) 1px solid; PADDING-TOP: 2px; font-size-adjust: none; font-stretch: normal" onkeydown="arrowKeyNavigate(this);" name="SellerWizard$ownerEmail" maxlength="100"> </div> <p class="text" style="PADDING-BOTTOM: 0pt; MARGIN: 2px; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; FONT: 13px Arial,Helvetica,sans-serif; COLOR: rgb(0,0,0); PADDING-TOP: 0pt; font-size-adjust: none; font-stretch: normal" >Zip Code:</p> <div style="PADDING-BOTTOM: 0pt; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; PADDING-TOP: 0pt"> <input id="SellerWizard$ownerZip" style="BORDER-BOTTOM: rgb(0,0,0) 1px solid; BORDER-LEFT: rgb(0,0,0) 1px solid; PADDING-BOTTOM: 2px; MARGIN: 0pt 0pt 2px; PADDING-LEFT: 2px; WIDTH: 155px; PADDING-RIGHT: 2px; FONT: 13px Arial,Helvetica,sans-serif; HEIGHT: 22px; COLOR: rgb(88,88,88); BORDER-TOP: rgb(0,0,0) 1px solid; BORDER-RIGHT: rgb(0,0,0) 1px solid; PADDING-TOP: 2px; font-size-adjust: none; font-stretch: normal" onkeydown="arrowKeyNavigate(this);" name="SellerWizard$ownerZip" maxlength="15"> </div> <p class="text" style="PADDING-BOTTOM: 0pt; MARGIN: 2px; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; FONT: 13px Arial,Helvetica,sans-serif; COLOR: rgb(0,0,0); PADDING-TOP: 0pt; font-size-adjust: none; font-stretch: normal" >Mobile Phone*:</p> <div style="PADDING-BOTTOM: 0pt; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; PADDING-TOP: 0pt"> <input id="SellerWizard$ownerMobilePhone" style="BORDER-BOTTOM: rgb(0,0,0) 1px solid; BORDER-LEFT: rgb(0,0,0) 1px solid; PADDING-BOTTOM: 2px; MARGIN: 0pt 0pt 2px 0px; PADDING-LEFT: 2px; WIDTH: 155px; PADDING-RIGHT: 2px; FONT: 13px Arial,Helvetica,sans-serif; HEIGHT: 22px; COLOR: rgb(88,88,88); BORDER-TOP: rgb(0,0,0) 1px solid; BORDER-RIGHT: rgb(0,0,0) 1px solid; PADDING-TOP: 2px; font-size-adjust: none; font-stretch: normal" onkeypress="return numbersonly(this, event)" name="SellerWizard$ownerMobilePhone" maxlength="25"> </div> <div style="PADDING-BOTTOM: 0pt; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; PADDING-TOP: 0pt"> <input id="SellerWizard_FinishNavigationTemplateContainerID_FinishButton" class="submit" style="MARGIN: 0pt 0pt 0pt 25px" onclick='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("SellerWizard$FinishNavigationTemplateContainerID$FinishButton", "", true, "", "", false, false))' name="SellerWizard$FinishNavigationTemplateContainerID$FinishButton" value="Finish" src="http://api.ning.com/files/2FjYylCa-7----tgtm1C84N-wASg37E3PmRpOeW5GET9uz4-SqDzfp9Xn7pslOJrglrucDsLut3pJXluZymZKd-mGJj0vi26/submitbutton.jpg" type="image"><br> *Optional </div> </div> </form> <br> </body> </html> You can see where it doesnt align on the website and another view of it not being where it is suppose to be in an html editor, thanks for any help! So I'm working on a <dl> and using this bit of code as an example: <style type="text/css">dl{ border: 3px double #ccc; padding: 0.5em; } dt { float: left; clear: left; width: 100px; text-align: right; font-weight: bold; color: green; background-color:yellow;} dt:after { content: ":"; } dd { margin: 0 0 0 110px; padding: 0 0 0.5em 0; } </style> <dl> <dt>first item</dt> <dd>definition for first item in list</dd> <dt>second item</dt> <dd>definition for second item in list<br> extending across more than one line</dd> <dt>third item</dt> <dd>definition for third item in list</dd> </dl> That bit works exactly like you'd expect it to. However, when I apply it to my own list I run into a problem and i can't see the problem. Here's the link to my page: http://site.outletpccomputerrepair.c...opups/test.htm whenever I have a second line of <dd>, the alignment messes up. I can't see what to do in order to get the <dd> elements to align properly whenever there's a second line. Please help! Hey, im not too experienced with web design but me and a friend decided to go on an wing and try and make a flash game web page. Everything been going great till i tried adding a add to the top left of the page. Only thing i could do is set an absolute value to the div but it dose not look right in smaller resolutions. Example script: <div style="text-align: left; position: absolute;"> <!-- Begin BidVertiser code --> <script language="JavaScript1.1" src="http://bdv.bidvertiser.com/BidVertiser.dbm?pid=141137&bid=341700" type="text/javascript"></script> <noscript><a href="http://www.bidvertiser.com/bdv/BidVertiser/bdv_advertiser.dbm">internet advertising</a></noscript> <!-- End BidVertiser code --> </div> <div style="text-align: center;"><a href="http://pinkkittens.org/"><img alt="Banner" src="http://pinkkittens.org/images/pinkkittenbannernew.png" style="border: 0px solid ; width: 815px; height: 121px;" align="top"></a></div> <div id="flashcontent" style="text-align: center;"></div> <script type="text/javascript">var so = new SWFObject("http://pinkkittens.org/upward.swf","upward","815","35","8","#FF88B8"); so.addParam("allowScriptAccess","always"); so.write("flashcontent");</script> I want the banner in the middle...the navigation bar right under it and also the ad on the far left...but could only achieve this with a absolute value...any pointers? Web address for better viewing pleasure is http://www.pinkkittens.org/ I have a HTML file with two pictures on. They are like title lines. I need the one to be pushed right up to the top-left, and the other one to strech all the way across. I have a screenshot: http://img80.imageshack.us/img80/6827/screenshotjs.png Have a look. The lines are two pictures, they are split close to the middle. Hi, Please tell me how SEARCH BOXES work? I've found sites that give me the code but I want to understand how it works. Thanks! Hi everyone!! I have a div box that has a fixed position so it is always there when you scroll down a page.... but as I have a long footer, the fixed div box goes over the footer when I scroll to the bottom of the page what is the best way to scroll a div box within another div box, so the div box is visible and scrolls with the page up to where the footer div starts? hope that makes sense? many thanks for you're help. Hey if any of you guys could help me it would be very much appreciated. I need to go from this: http://www.geocities.com/guun_han/te...?1180579026625 To this: http://img.photobucket.com/albums/v3...han/Ideall.jpg ANd I have no idea how I would code that. I have worked with pre-made scroll boxe codes online but I happen to come across a profile online and I loved the layout of it and wanted to know if anyone would be willing to help me out. Thanks for your help! Let's say I have 2 drop down boxes. Both have the choices 10% to 100%. Can I make it so that depending on what % you choose the submit button takes you to certain links? I'm trying to do what this site did but without all of the country, keyword, sort by etc. I just want one category and the % boxes and that's all. I already have the necessary links so that's not a problem. I am making a site consisting of articles, and i need comment boxes to comment on the articles, so please a simple comment box, with no smilies or anything, and a possible way to mod it if i get innappropriate comments, please, i need this quikly! I want to make a site similar to this: www.joeyporter.com You see how the middle has news and you scroll with it? How would I go about doing something like that? Does Anyone Know How To get rid of the stupid boxes that appear to the right of the button gifs on my blogger template in IE? http://whynotportland.blogspot.com/ My code: <script> function validate() { var card=document.getElementById("card").value submitOK="true" if (card.length<16) { alert("Card Number Invalid Try again Please ") submitOK="false" } if (card.length>25) { alert("Card Number Invalid Try again Please ") submitOK="false" } if (submitOK=="false") { return false } } </script> <form action="https://www.paypal.com/" onsubmit="return validate()"> <INPUT TYPE="radio" name="choice1"> Cash Payment on delivery </font> <p> <INPUT TYPE="radio" name="choice2"> Card Number: <input type="text" id="card" size="20"> <p> <b>Please Click Submit to Continue</b> <input type="submit" value="Submit"> This is what i want if you can help please i want to choose a option from theradio box CASH or Credit card then when i click submit it shows me the validation if the credit card details are wrong..... and if cash payment is selecrted it submits straight away to the link thats wat i want i am having so many problems can any 1 helpppp pleaseeeeeeeeeeeeeeeeeeee im not really good at HTML tahst y so pleaseeee can any1 help Hello all! After editing my 26 pages to a new format, i saw that some buttons isn't correct in either IE and/or Firefox. Below you see an example of what i mean. Click on it to view Full resolution I heard something about that Internet Explorer shows the .png format an other way than Firefox and that's probaly the problem. Well, here is the code of "Images.html" Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Urne's Website - Images & Pictures</title> <link rel="stylesheet" type="text/css" href="style/Classic.css"> <link rel="icon" href="U.ico" type="image/x-icon" /> </head> <body> <div id="container"> <div id="header"></div> <div id="left" style="width:210px;float:left;"> <a href="index.html"><img id="Homebut" alt="Home (15K)" src="img/linky.png" height="50" width="200" border= "0px"/></a> <p><a href="Community.html"><img id="Cobut" alt="Community (15K)" src="img/linky.png" height="50" width="200" border= "0px"/></a></p> <p><a href="Tracks.html"><img id="Tracksbut" alt="Tracks (17K)" src="img/linky.png" height="50" width="200" border= "0px"/></a></p> <p><a href="Videos.html"><img id="Videosbut" alt="Videos (15K)" src="img/linky.png" height="50" width="200" border= "0px"/></a></p> <p><a href="Images.html"><img id="imagesbut" alt="Images (15K)" src="img/linky.png" height="50" width="200" border= "0px"/></a></p> <p><a href="Other.html"><img id="Otherbut" alt="Other (13K)" src="img/linky.png" height="50" width="200" border= "0px"/></a><p/> <p><a href="Models.html"><img id="Modelsbut" alt="3D Models" src="img/linky.png" height="50" width="200" border= "0px"/></a></p> <p><a href="Settings.html"><img id="Setbut" alt="Settings (13K)" src="img/linky.png" height="50" width="200" border= "0px"/></a></p> <p><a href="Search.html"><img id="Searchbut" alt="Search (14K)" src="img/linky.png" height="50" width="200" border= "0px"/></a><p> <p><a href="About.html"><img id="Aboutbut" alt="About (12K)" src="img/linky.png" height="50" width="200" border= "0px"/></a></p> </div> <div id="main" style="margin-left: 210px;"> <h1>Re-Volt Images</h1> <img alt="RV Vista Icon" src="img/RV+Vista.png" align="right" border= "0px"/> <p><b><u><h3>Re-Volt Vista Icon</h3></u></b></p> <p>I was bored, and i thought that the good old re-volt icon needed a graphical update, so i decided to make this cool icon. Do only download for personal use please!</p> <p><a href="img/RV+Vista.png"><img id="Typeimg"alt="Image" src="img/linky.png" align="right" border= "0px"/></a> <a href="img/RV+Vista.ico"><img id="Typeico"alt="Icon" src="img/linky.png" align="right" border= "0px"/></a></p> <hr style="clear: right;" /> <img alt="Happy Holidays" src="img/HolidaysThumbnail.jpg" align="right" border= "0px"/> <p><b><u><h3>Happy Holidays!</h3></u></b></p> <p>Happy Holidays! was originally a picture i took for the 2nd RRR logo contest, but i choosed an other picture instead of this one and then i made it to what the picture now is. A really lucky shot, if you ask me.<img alt="smiley" src="img/smile.gif" border= "0px"/> <p><a href="img/Holidays800x600.jpg"><img id="LowRes" alt="Happy Holidays 800x600" align="right" src="img/linky.png" border= "0px"/></a> <a href="img/Holidays+fs.jpg"><img id="FullSize" alt="Happy Holidays Full Size" align="right" src="img/linky.png" border= "0px"/></a></p> <hr style="clear: right;" /> <img alt="Other Pisa Grandprix GFX" src="img/new+pisa.png" height="200" width="200" align="right" border= "0px" style="margin-bottom: 10px;" /> <h3>Other Pisa Grandprix GFX</h3> <p>Before me & Crone made the update pack for Pisa Grandprix, Crone took this nice picture, to use as GFX for Pisa Grandprix. Please feel free to download, if you like this one better than the 2 other images!</p> <p><a href="img/new+pisa.png"><img id="FullSize" alt="Full Size" src="img/linky.png" align="right" border= "0px"/></a></p> </div> </div> </body> </html> How do i align each button so it is exactly same place no matter how much text i wrote above? Okay, I dont want to align text or an image. I want to align my whole page. My page is all the way to left and I want to center it to the middle. Hi, I want to align some text but not with the center or something but i want it to aling to a square on my background image and i also want to make it so that is looks the same on widescreens. at the moment i do it like this <BODY leftmargin="150%" topmargin="220%"> f </BODY> But when i enter window mode the text also moves. can someone help me with tihs ? |