HTML - Content Boxes Not Centering
The CSS for this part is
Code: .homebox { background-color: #000000; width:200px; float: left ; border: 1px solid #00ff00; border-radius: 8px; -moz-border-radius: 8px; -khtml-border-radius: 8px; -webkit-border-radius: 8px; margin: 5px; padding: 10px; } .homebox h3 { color: #ffffff; margin: 5px; font-size: 18px; font-weight: bold; } .homebox p { padding:0px; margin:5px; font-size:11px; font-weight:bold; color:#ffffff; } .homebox img { position: relative; bottom: 0; The HTML is HTML Code: <div class="homebox"> <h3>Forums</h3><img src="./images/forum.png" width="32px" height="32px"/> <p>Interact and chat with other members. Relax and sitback</p></div> <div class="homebox"> <h3>Wiki</h3><img src="./images/wiki.png" width="32px" height="32px" /> <p>Learn about various things such as my scripts and such.</p></div> <div class="homebox"> <h3>Blog</h3><img src="./images/blog.png" width="32px" height="32px" /> <p>Read updates about my site and my random life.</p></div> And no matter what they either stack on top of eachother or are all the way to the left. Similar TutorialsI have a page that is not being centered on the background in both IE 6&7 but looks perfect in FF. I am not sure what is wrong because the template I used is vaild Here is the page http://www.mesquitechristmas.com/wea...Z119&icao=KHQZ I have been banging my head all day an maybe just need another pair of eyes. -Thanks Please help me with the following. This is not a problem in Firefox; only in IE. I am having trouble centering one DIV with a DIV to the left of the centered DIV. The DIV that is blue I would like centered according to the browser width and the red DIV I would like the same vertically as the blue DIV only left justified. In Firefox this works correctly the way I would expect. In IE the left justified div appears "pushes" the DIV ( in blue ) that I want centered further to the right; making it un-centered. thanks for any assistance. Code: <div width="100%"> <div align = "left" style="width:200px;float:left;background-color:#ff0000;"> <p style="font-size: 8pt;">This needs to be left justified........</p> <p style="font-size: 8pt;">This needs to be left justified........</p> <p style="font-size: 8pt;">This needs to be left justified........</p> </div> <div align="center" style="background-color:#00ff00;"> <div style="width: 500px;background-color:#0000ff;"> <p style="font-size: 8pt;">this needs to be centered.................................................................................. </p> <p style="font-size: 8pt;">this needs to be centered.................................................................................. </p> <p style="font-size: 8pt;">this needs to be centered.................................................................................. </p> <p style="font-size: 8pt;">this needs to be centered </p> </div> </div> I believe the problem is that the fact that the pictures are using an absolute position. Not sure though. I have tried about 4 or 5 different thing to fix this to no avail. I will copy in the code for you to see. I do not have this running on a server for everyone to load but it is not much code. Any help would be greatly appreciated. Thansk, Dano HTML Code: <html> <head> <title>Official Site of Premier Security Group, Inc.</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> .centerContainer { margin: 0 auto; } body { background-image:url(images/bkgd2.png) } #Table_01 { position:absolute; left:0px; top:0px; width:800px; height:1200px; } #PSindex-01 { position:absolute; left:0px; top:0px; width:800px; height:69px; } #PSindex-02 { position:absolute; left:0px; top:69px; width:20px; height:174px; } #PSindex-03 { position:absolute; left:20px; top:69px; width:760px; height:174px; } #PSindex-04 { position:absolute; left:780px; top:69px; width:20px; height:174px; } #PSindex-05 { position:absolute; left:0px; top:243px; width:800px; height:13px; } #PSindex-06 { position:absolute; left:0px; top:256px; width:20px; height:35px; } #PSindex-07 { position:absolute; left:20px; top:256px; width:126px; height:35px; } #PSindex-08 { position:absolute; left:146px; top:256px; width:129px; height:35px; } #PSindex-09 { position:absolute; left:275px; top:256px; width:125px; height:35px; } #PSindex-10 { position:absolute; left:400px; top:256px; width:1px; height:944px; } #PSindex-11 { position:absolute; left:401px; top:256px; width:123px; height:35px; } #PSindex-12 { position:absolute; left:524px; top:256px; width:130px; height:35px; } #PSindex-13 { position:absolute; left:654px; top:256px; width:126px; height:35px; } #PSindex-14 { position:absolute; left:780px; top:256px; width:20px; height:35px; } #PSindex-15 { position:absolute; left:0px; top:291px; width:400px; height:909px; } #PSindex-16 { position:absolute; left:401px; top:291px; width:399px; height:909px; } </style> </head> <body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;"> <div class="centerContainer"> <div> <div id="Table_01"> <div id="PSindex-01"> <img src="images/PSindex_01.png" width="800" height="69" alt=""> </div> <div id="PSindex-02"> <img src="images/PSindex_02.png" width="20" height="174" alt=""> </div> <div id="PSindex-03"> <img src="images/PSindex_03.png" width="760" height="174" alt=""> </div> <div id="PSindex-04"> <img src="images/PSindex_04.png" width="20" height="174" alt=""> </div> <div id="PSindex-05"> <img src="images/PSindex_05.png" width="800" height="13" alt=""> </div> <div id="PSindex-06"> <img src="images/PSindex_06.png" width="20" height="35" alt=""> </div> <div id="PSindex-07"> <img src="images/PSindex_07.png" width="126" height="35" alt=""> </div> <div id="PSindex-08"> <img src="images/PSindex_08.png" width="129" height="35" alt=""> </div> <div id="PSindex-09"> <img src="images/PSindex_09.png" width="125" height="35" alt=""> </div> <div id="PSindex-10"> <img src="images/PSindex_10.png" width="1" height="944" alt=""> </div> <div id="PSindex-11"> <img src="images/PSindex_11.png" width="123" height="35" alt=""> </div> <div id="PSindex-12"> <img src="images/PSindex_12.png" width="130" height="35" alt=""> </div> <div id="PSindex-13"> <img src="images/PSindex_13.png" width="126" height="35" alt=""> </div> <div id="PSindex-14"> <img src="images/PSindex_14.png" width="20" height="35" alt=""> </div> <div id="PSindex-15"> <img src="images/PSindex_15.png" width="400" height="909" alt=""> </div> <div id="PSindex-16"> <img src="images/PSindex_16.png" width="399" height="909" alt=""> </div> </div> </div> </div> </body> </html> Hello, I'm working on a site, but have run into a problem I'm not sure how to deal with. The contents of the footer area of the page are centered within a Div as you can see at the url: http://www.mylessinclair.com/testsite/ However, I think it might be easier on the eye if the links and content were centered underneath the main content panel. I'm trying to avoid the use of tables in achieving this, so I'm thinking that I need two Divs side by side for the footer. One 150px wide as in the side bar above it, marked up as float left - and then just center the footer contents in the other Div ? Am I on the right track here, or is it a bit more complicated? Hope someone can advise. Many thanks, Myles Hi, Im trying to make my footer content align correctly to the main content when a window resizes. The apdivs don't seem to want to move at all even with a relative position etc. I have tried everything but just cant get it to work can someone help please? http://pjm.co.uk.uksite4.yourwebserv...splay&PageID=5 Also some one commented before on the amount of css and JS pages. These will al be stripped out as its an Open sources system im using! Thansk alot Joe 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! 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! 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/ 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> 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 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. 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. 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? 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 have a form on my website. Is there anyway that I can have the box filled with the email address and grayed out, un-editable? Regards, Josh Here 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. Hey there, not sure if this is the right place to post this but here goes. (Did look to make sure but wasn't a 100% positive) Anyway, I'm pretty familiar with the basics of html. I can read it and understand what most of it says. My first question is, do you think frames would be a good idea here ??I don't work them often so I'm not too familiar with them but I do understand how they work. I was thinking just two side by side or would I need to do one on top & two side by side. Nothing would alter above the main image so it's why I didn't think it was necessary. But again, not an expert. Second question. On this on this page is more complicated. I know about drop down boxes but what I was thinking of have it has it is now except the dark purple not show until you click on the letter you want. (I know that sounds like a normal drop down box but I'm not sure how else to explain it) Just wondering if that was possible to do without it being too difficult. <3 thanks a lot everyone. I appreciate all help. Lilly Hi All, I have come across a scenario where user enters credit card number. So I need to display user typing text (card number) as "*" in the text box. So I went and coded as password field since password box always mask user inputs. <input type="password" name="f1" value=""> But on hitting submit button, Mozilla firefox browser shows a pop up if I need to remember the password or not. My client dont want to display this pop-up. Can anyone pls tell me how to create a text box (not password box) to show user input as "*" so that it looks like as password box. Thanks in advance. |