Jump to content

RezaRohani

Members
  • Posts

    11
  • Joined

  • Last visited

Everything posted by RezaRohani

  1. try this for #content in CSS and in HTML, place the "content" div before footer: #content { border: 2px solid white; margin-left: 85px; margin-right: 275px; }
  2. Try this Edit:(If I understood correctly you mean) : <html><head> <title></title> <style type="text/css"> .header { width: 100%; border: 1px solid Green; height: 100px; clear: both; } .footter { width: 100%; border: 1px solid Red; height: 100px; clear: both; } .side-bar { width: 200px; float: left; border: 1px solid Blue; } .content { /*padding-left:200px;*//*If you want to side bar space be empty always, uncomment this line;*/ width: auto; clear: both; border: 1px solid Orange; } </style></head><body> <div class="header"> </div> <div class="side-bar"> Side menu item.<br /> Side menu item.<br /> Side menu item.<br /> Side menu item.<br /> Side menu item.<br /> Side menu item.<br /> </div> <div class="content"> <h3>Some text.</h3> Some text. Some text. Some text. Some text.<br /> Some text. Some text. Some text.<br /> Some text. Some text. Some text. Some text. Some text.<br /> Some text. Some text. Some text.<br /> Some text. Some text. Some text. Some text. Some text.<br /> Some text. Some text. Some text.<br /> Some text. Some text. Some text. Some text. Some text.<br /> Some text. Some text. Some text.<br /> </div> <div class="footter"></div></body></html>
  3. I suggest you this code or thing linke this: <html><head> <title></title> <script type="text/javascript"> <!-- function isDigit(e) { var charCode = (e.which) ? e.which : e.keyCode if (charCode > 31 && (charCode < 49 || charCode > 52)) return false; return true; } //--> </script></head><body> <form action=""> <div> <input id="correctAnswerTxt" maxlength="1" size="1" onkeypress="return isDigit(event)" type="text" name="txtChar" /> </div> </form></body></html>
  4. The "fieldset" within the "table" before the "tr" and outside the "td" are not allowed (And so it's not logical). And the tree structure is not observed at several places. for example, "fieldset" opened inside "table" and closed outside that or "select" s are opened inside "td" and closed after that...Those that aside, your JavaScript function has some bugs (in my opinion of course...). { counter++; var theField = document.getElementById("field"); var theClone = theField.cloneNode(true); var elements = theClone.elements; // ".elements" is a "formObject" property, not for elements like fieldset. for (var el in elements) { elements[el].name += counter.toString();// When u use "element[index]", index must be a int, not an element. // So if this action be true, with this type of assignment, all elements, have same name. you want this? } theClone.id += counter.toString(); theField.form.insertBefore(theClone, this);// You have not any form in your fieldset, but call it!}
  5. I had a little time. So I just tried your menu work correctly.There was a gap between the sub menu and the main menu. "margin top" was added to remove this gap. Yess!
  6. With these changes, u can get result in all browsers, except 'IE'.But for 'IE', you must make major changes in your code. <nav> <ul> <li><a href="#">HOME</a></li> <li><a href="#">ACCESORY</a><!-- /*-------change-------*/ --> <ul> <li><a href="#">Dropdown Menu1</a></li> <li><a href="#">Dropdown Menu2</a></li> <li><a href="#">Dropdown Menu3</a></li> </ul> </li><!-- /*--------change-------*/ --> <li><a href="#">ABOUT ME</a></li> </ul> </nav> CSS: nav ul ul { margin-top: -32px;/*-----------change-----------*/ display: none; } nav ul li:hover > ul { display: block; } nav ul { background: #009933; background: linear-gradient(top, #009933 0%, #bbbbbb 100%); background: -moz-linear-gradient(top, #009933 0%, #bbbbbb 100%); background: -webkit-linear-gradient(top, #009933 0%, #bbbbbb 200%); box-shadow: 0px 0px 9px r gba(0,0,0,0,15); padding: 0 20px; border-radius: 25px; list-style: none; position: relative; display: inline-block; } nav ul:after { content: ""; clear: both; display: block; } nav ul li { float: left; } nav ul li: hover { background: #66FF66; background: linear-gradient(top, #47B247 0%, #59BA59 40%); background: -moz-linear-gradient(top, #47B247 0%, #59BA59 40%); background: -webkit-linear-gradient(top, #47B247 0%, #59BA59 40%); } nav ul li: hover a { color: #fff; } nav ul li a { display: block; padding: 25px 40px; color: #993300; text-decoration: none; } nav ul ul { background: #59BA59; border-radius: 0px; padding: 0; position: absolute; top: 100; } nav ul ul li { float: none; border-top: 1px solid #A30000; border-bottom: 1px solid #3333FF; position: relative; } nav ul ul li a { padding: 15px 40px; color: #fff; } nav ul ul li a:hover { background: #3333FF; } nav ul ul ul { position: absolute; left: 100%; top: 0; }
  7. View this: <html><head> <style type="text/css"> .main { padding: 2px; width: 760px; } .leftarea { float: left; width: 378px; padding: 1px 0px; } .rightarea { margin-left: 380px; padding: 1px 0px; } .invoice-row { padding: 4px; border: 1px solid Black; margin: 1px 0px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; background-color: LightGray; } .lable-holder { float: left; width: 110px; text-align: right; } .txt-holder { margin-left: 114px; text-align: left; } .inner-row { padding: 4px; border: 0px none; /*border: 1px solid Gray; *//*UnComment if want to have border around fildes*/ margin: 1px 0px; } input[type="text"] { width: 220px; } textarea { height: 80px; width: 220px; resize: none; } </style> <title></title></head><body> <div class="main"> <fieldset class="invoice-row"> <div class="leftarea"> <fieldset class="inner-row"> <div class="lable-holder"> <label> Company Name</label> </div> <div class="txt-holder"> <input type="text" /> </div> </fieldset> <fieldset class="inner-row"> <div class="lable-holder"> <label> Address</label> </div> <div class="txt-holder"> <textarea></textarea> </div> </fieldset> </div> <div class="rightarea"> <fieldset class="inner-row"> <div class="lable-holder"> <label> Invoice No.</label> </div> <div class="txt-holder"> <input type="text" /> </div> </fieldset> <fieldset class="inner-row"> <div class="lable-holder"> <label> Handled By</label> </div> <div class="txt-holder"> <input type="text" /> </div> </fieldset> <fieldset class="inner-row"> <div class="lable-holder"> <label> Date</label> </div> <div class="txt-holder"> <input type="text" /> </div> </fieldset> </div> </fieldset> <fieldset class="invoice-row"> <div class="leftarea"> <fieldset class="inner-row"> <div class="lable-holder"> <label> Company Name</label> </div> <div class="txt-holder"> <input type="text" /> </div> </fieldset> <fieldset class="inner-row"> <div class="lable-holder"> <label> Address</label> </div> <div class="txt-holder"> <textarea></textarea> </div> </fieldset> </div> <div class="rightarea"> <fieldset class="inner-row"> <div class="lable-holder"> <label> Invoice No.</label> </div> <div class="txt-holder"> <input type="text" /> </div> </fieldset> <fieldset class="inner-row"> <div class="lable-holder"> <label> Handled By</label> </div> <div class="txt-holder"> <input type="text" /> </div> </fieldset> <fieldset class="inner-row"> <div class="lable-holder"> <label> Date</label> </div> <div class="txt-holder"> <input type="text" /> </div> </fieldset> </div> </fieldset> </div></body></html> I hope be helpful...
  8. Try this: <!DOCTYPE html><html><head> <title>My HTML</title> <script type="text/javascript"> function fillTable() { var tbody = document.getElementById("contentTableBody");// tbody = your table body if (document.getElementById("categorySelect").selectedIndex == 1) // if "Novel" select... { tbody.innerHTML = "";//empty table body tr = tbody.insertRow(-1);// append a row (tr) in table body td = tr.insertCell(-1); td.innerHTML = "001";// append a cell (td) in new tr td = tr.insertCell(-1); td.innerHTML = "Jangan Bersedih";// append another cell in new tr tr = tbody.insertRow(-1); // and ... td = tr.insertCell(-1); td.innerHTML = "002"; td = tr.insertCell(-1); td.innerHTML = "A Thousand Splendid Suns"; } else if (document.getElementById("categorySelect").selectedIndex == 2) // if "Reference Book" select... { tbody.innerHTML = ""; tr = tbody.insertRow(-1); td = tr.insertCell(-1); td.innerHTML = "001"; td = tr.insertCell(-1); td.innerHTML = "Computer Problem Solving with C++"; } } </script></head><body onload="document.getElementById('categorySelect').selectedIndex = 0;// when page load, selesct first option of select element"> <p> Table of Contents</p> View by Category : <select id="categorySelect" onchange="fillTable();"> <option value="0">--Choose--</option> <option value="1">Novel</option> <option value="2">Reference Book</option> </select> <table border="1"> <thead> <tr> <th>Ref. No.</th> <th>Title</th> </tr> </thead> <tbody id="contentTableBody"> </tbody> </table></body></html> Simply, I add a "tbody" tag into your table and then set "id" attribute for it.Also I wrote a script in "onload" event of your "body" tag. I added the necessary explanations for better understanding of scripts. I hope be usefull....
  9. I'm not sure I understand exactly what you mean, but as I understand it, you want something like this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style type="text/css"> .fs { margin: 0px auto; width: 850px; height: 500px; background-color: #FFF5EE; } .dot-col { width: 1px; } .text-col { width: 320px; } .txt { resize: none; width: 100%; margin: 1px; padding: 2px; } </style></head><body> <fieldset class="fs"> <legend>Smiley</legend> <form accept-charset="utf-8" action="a.php" method="post" name="choose" enctype="multipart/form-data" onsubmit="return validate();"> <table style="width: 100%"> <tr> <td align="center" colspan="6"> <img src="img/laugh.gif" alt="Smiley" /> </td> </tr> <tr> <td align="center" colspan="6" style="color: #FF0000; text-decoration: blink;"> <b><?php echo $qtype2;?></b> </td> </tr> <tr> <td colspan="6"> </td> </tr> <tr> <td align="right"> Question<font color="red">*</font> </td> <td class="dot-col"> : </td> <td class="text-col" colspan="2"> <textarea name="ques1" id="ques1" rows="5" class="txt" onclick="return ques1_onclick()"></textarea> </td> <td> </td> <td class="text-col"> <div style="background-image: url(img/mic1_30.jpg); width: 30px; height: 25px;"> <input type="file" id="quest_wav1" name="quest_wav1" size="1" /> </div> <div style="background-image: url('img/img1.jpeg'); width: 30px; height: 30px; direction: ltr;"> <input type="file" id="quest_img1" name="quest_img1" size="1" /> </div> </td> </tr> <tr> <td align="right"> Page No<font color="red">*</font> </td> <td> : </td> <td class="text-col"> <input type="text" name="pno" id="pno" size="16" onkeypress="return isNumberKey(event, this.value)" class="txt" /> </td> <td align="right"> Chapter No<font color="red">*</font> </td> <td class="dot-col"> : </td> <td class="text-col"> <input type="text" name="cno" id="cno" size="16" onkeypress="return isNumberKey(event, this.value)" class="txt" /> </td> </tr> <tr> <td align="right"> Board </td> <td> : </td> <td> <input type="text" name="board_txt" id="board_txt" size="16" readonly="" value="<?php echo $boardname; ?>" class="txt" /> </td> <td align="right"> Subject </td> <td> : </td> <td> <input type="text" name="subject_txt" id="subject_txt" size="16" readonly="" value="<?php echo $subjectname; ?>" class="txt" /> </td> </tr> <tr> <td align="right"> Short Type </td> <td> : </td> <td> <select id="short_type" name="short_type" class="txt"> <option value="" selected="selected">----</option> <option value="Problem">Problem</option> <option value="Deleted">Deleted</option> </select> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td colspan="6"> </td> </tr> <tr> <td align="right"> <font color="#FF0000"><b>Note </b></font> </td> <td> <font color="#FF0000"><b>:</b></font> </td> <td> "<font color="#FF0000">*</font>" Mandatory Fields. </td> <td> <img src="img/mic1_30.jpg" alt="Upload Wave" />Upload WAVE </td> <td> </td> <td> <img src="img/img1.jpeg" alt="Upload Image" />Upload IMAGE </td> </tr> <tr> <td colspan="6"> </td> </tr> <tr> <td align="center" colspan="6"> <input type="submit" name="add" value="Add" style="background-color: #FFFF00; font: Arial, Helvetica, sans-serif; color: #FF0000" /> <input type="reset" name="clear" value="Clear" style="background-color: #FFFF00; font: Arial, Helvetica, sans-serif; color: #FF0000" /> </td> </tr> </table> </form> </fieldset></body></html> I placed your form in an HTML page. Also I removed "opacity" css property from your "select" tags to show them. Please try it. I it hop be helpfull...
  10. Yes! It's possible and is very easy. like this: <textarea name="ques1" id="ques1" cols="25" rows="5" style="resize: none; height: 16px; width: 300px;"></textarea> Do you mean this?! But it is better than "resize"property do not use. Because it prevents the scrolling and is not as well known in some browsers. Instead, you can use this code: <textarea name="ques1" id="ques1" cols="25" rows="5" style="height: 60px; width: 280px; max-height: 60px; min-height: 60px; max-width: 280px; min-width:280px;"></textarea>
×
×
  • Create New...