Jump to content

pmingione

Members
  • Posts

    5
  • Joined

  • Last visited

Everything posted by pmingione

  1. Hi all, I am trying to create a web page that has a tabular layout but without using table elements. The problem I am having is that whenever I add text to any of the divs the layout changes. I am not sure why this is happening. Attached below is the code. It is a simplified version of the layout containing only the divs and plain text. I have color coded the divs so that each stands out. The two versions in this code are identical. The only difference is that the second one has the text added to it. Notice how the the divs shift downward when the text is added. Does any one have a solution to why this is happening? Thanks in advance for any help that you might be able to give me. PeteM <!doctype html> <html lang="en" > <head> <title>PAGE TITLE</title> <meta charset=“utf-8"/> <style> .content { margin: 0px auto; /*center the content all browsers except IE*/ text-align: center; /*center the content IE*/ width: 1212px; } body { background-color:yellow; } .table-one { display: table; width: 1212px; } .row-one { display: table-row; width: 1212px; } .column-one { display: table-cell; width: 256px; } .column-two { display: table-cell; width: 956px; } .image-one { height: 256px; width: 256px; background-color:red; } .image-two { height: 256px; width: 256px; background-color:green; } .image-three { height: 256px; width: 256px; background-color:purple; } .image-four { height: 256px; width: 256px; background-color:tan; } .image-five { height: 256px; width: 256px; background-color:maroon; float:right; } .top-middle { background-color:pink; width: 700px; height: 256px; } .bottom-right { width: 956px; height: 768px; background-color:blue; } </style> </head> <body> <div class="content"> <header> headerheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheader </header> <section class="table-one"><!--table--> <div class="row-one"><!--table row 1--> <div class="column-one"><!--table COL 1--> <div class="image-one"></div> <div class="image-two"></div> <div class="image-three"></div> <div class="image-four"></div> </div><!--END table COL 1--> <div class="column-two"><!--table COL 2--> <div class="image-five"></div> <div class="top-middle"></div> <div class="bottom-right"></div> </div><!--END table COL 2--> </div><!-- END table row 1--> </section><!--END table--> <footer> footerfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooter </footer> </div> <!-- END content --> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <div class="content"> <header> headerheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheader </header> <section class="table-one"><!--table--> <div class="row-one"><!--table row 1--> <div class="column-one"><!--table COL 1--> <div class="image-one"></div> <div class="image-two"></div> <div class="image-three"></div> <div class="image-four"></div> </div><!--END table COL 1--> <div class="column-two"><!--table COL 2--> <div class="image-five"></div> <div class="top-middle"> Welcome to My Home on the Web!<br /> <br /> I am a Multimedia Computer Programmer and Web Designer and I am currently living in New York City.<br /> <br /> Hello to all of the visitor's to this site. It is designed to be a place to view all of my current projects.<br /> <br /> Below are links to games and multimedia projects that I have recently created... </div> <div class="bottom-right"> list item 1<br /> list item 2<br /> list item 3<br /> list item 4<br /> list item 5<br /> </div> </div><!--END table COL 2--> </div><!-- END table row 1--> </section><!--END table--> <footer> footerfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooter </footer> </div> <!-- END content --> <body> </html>
  2. Thanks to all of the "GREAT MINDS" that solved my problem.
  3. Hi All,I'm sure this is a relatively simple problem. I hope someone with more javaScript knowledge than me can solve it. I need to be able to iterate with a for-loop over all of the input check-boxes in this table row to determine if any are checked. <tr id="hurricane_damage"><td valign="top" width="183"><span id="label_courses">What type of damage did your business incur as a result of Hurricane Sandy? Please check all that apply:*</span></td><td valign="top" colspan="2" width="366"><div><input id="subform_hurricane_damage_1" type="checkbox" value="Fire" name="Huricane Damage"/><span><b>Fire</b></span></div><div><input id="subform_hurricane_damage_2" type="checkbox" value="Flooding"/><span><b>Flooding</b></span></div><div><input id="subform_hurricane_damage_3" type="checkbox" value="Wind Damage"/><span><b>Wind Damage</b></span></div><div><input id="subform_hurricane_damage_4" type="checkbox" value="Inventory Loss"/><span><b>Inventory Loss</b></span></div><div><input id="subform_hurricane_damage_5" type="checkbox" value="Other" onclick="showHideOther()"/><span><b>Other</b></span></div><span id="hurricane_damage_errMsg" class="hide">Please choose at least one category.</span></td></tr> My problem is I don't know how to detect the number of check-boxes in the table row so that the for loop can terminate. (Each table row in the form will not necessarily have the same number of check boxes.)i.e.for(var i = 0; i == number_of_check_boxes; i++) Either a javaScript or a jQuery solution would be acceptable.Thanks in advance.
  4. Hi All, I've recently encountered this line of javaScript code. return (controlName.attr('type') || controlName[0].tagName).toLowerCase(); I haven't ever seen this structure before. Can anybody explain it to me. I am confused as to what the or ( || ) is doing. One of the two strings ( either controlName.attr('type') or controlName[0].tagName) is being processed by the toLowerCase() library function. But I am unsure of what the procedure is. If the object has both a type attribute and a tag name then what is actually being returned? Thanks PMingione
×
×
  • Create New...