Jump to content

merazgasalim

Members
  • Posts

    7
  • Joined

  • Last visited

Everything posted by merazgasalim

  1. There are many solutions for positioning elements like: 1-make div display as inline-block 2-using float proprieties tell me more what do u want to do and I'll help you
  2. Try this <!DOCTYPE html> <html lang="en"> <head> <title>Average Grade</title> </head> <body> <form> Nubmer Of tests:<input type="number" id="nbr" value="0" min="0" max="3"> Math: <input type="number" id="test1" disabled> <input type="number" id="test2" disabled> <input type="number" id="test3" disabled> <output id="average"></output> <br> <input type="button" value="Calculate" id="calcBtn"> </form> <script> var testNbr = document.getElementById('nbr').value; document.getElementById('nbr').addEventListener('input', function() { testNbr = document.getElementById('nbr').value; switch(testNbr){ case '1' : document.getElementById('test1').disabled = false; document.getElementById('test2').disabled = true; document.getElementById('test3').disabled = true; document.getElementById('test2').value = 0; document.getElementById('test3').value = 0; break; case '2' : document.getElementById('test1').disabled = false; document.getElementById('test2').disabled = false; document.getElementById('test3').disabled = true; document.getElementById('test3').value = 0; break; case '3' : document.getElementById('test1').disabled = false; document.getElementById('test2').disabled = false; document.getElementById('test3').disabled = false; break; default: document.getElementById('test1').disabled = true; document.getElementById('test2').disabled = true; document.getElementById('test3').disabled = true; } }); document.getElementById('calcBtn').addEventListener('click', function() { var test1 = document.getElementById('test1').value; var test2 = document.getElementById('test2').value; var test3 = document.getElementById('test3').value; var average = document.getElementById('average'); average.value = (Number(test1)+Number(test2)+Number(test3)) / testNbr; }); </script> </body> </html>
  3. Yes you can put the width to 80%, just in in your style put the element "width: 80%; " and It will take 80% of the parent width. And also you can put the max-width: 500px; but in devices less than 500px it will be less than 500px (to avoid horizontal scroll bar)
  4. filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url(); refer to w3s for more informations
  5. Add this to your style p { margin: 0; } and the space will disappear
  6. As Ingolme said, I modified the postion to sticky with top: 0 and the gap disappears when you scroll down /* Side navigation bar */ .sdnav { display: flex; flex-direction: column; width: 200px; height: 100%; position: sticky; top: 0; overflow: auto; background-color: #f1f1f1; /* light gray */ } <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Portfolio</title> <style> * { box-sizing: border-box; } body { margin: 0; } /* Top navigation bar */ .topnav { display: flex; background-color: #777; /* gray */ } /* Top Navigation bar links */ .topnav a { padding: 14px 20px; color: white; text-decoration: none; text-align: center; } /* Change Top Navigation bar link color on hover */ .topnav a:hover:not(.active) { background-color: #ddd; /* light gray */ color: black; } /* Top Navigation bar's active link color */ .topnav a.active { background-color: #4caf50; /* green */ } /* Side navigation bar */ .sdnav { display: flex; flex-direction: column; width: 200px; height: 100%; position: sticky; top: 0; overflow: auto; background-color: #f1f1f1; /* light gray */ } /* Side navigation bar links */ .sdnav a { padding: 14px 20px; color: black; text-decoration: none; text-align: left; } /* Change Side navigation bar link color on hover */ .sdnav a:hover:not(.active) { background-color: #555; /* gray */ color: white; } /* Side Navigation bar's active link color */ .sdnav a.active { background-color: aquamarine; } .main { margin-left: 200px; padding: 10px; height: 1000px; } /* Stack the sdnav horizontally when the screen size is 768px or less */ @media screen and (max-width: 768px) { .sdnav { flex-direction: row; width: 100%; height: auto; position: relative; } .sdnav a { width: auto; text-align: center; } .main { margin-left: 0; padding: 0 16px; } } /* Stack the sdnav vertically at the center, when the screen size is 600px or less */ @media screen and (max-width: 600px) { .sdnav { flex-direction: column; } .sdnav a { width: 100%; } } /* Stack the topnav vertically when the screen size is 600px or less */ @media screen and (max-width: 600px) { .topnav { flex-direction: column; } } </style> </head> <body> <!-- Top Navigation Bar --> <div class="topnav"> <a href="#">Home</a> <a href="#" class="active">News</a> <a href="#">Contact</a> <a href="#">About</a> </div> <!-- Side Navigation Bar --> <div class="sdnav"> <a href="#">What</a> <a href="#" class="active">Where</a> <a href="#">When</a> <a href="#">How</a> </div> <div class="main"> <h1> Responsive Top Navigation Bar AND Fixed Full-height Responsive Side Navigation Bar - using <span style="color: red;">flexbox</span> </h1> <p> This example uses 3 media queries: </p> <ol> <li> The first stacks the SideNav <em>horizontally</em>, when the screen size is<strong>768px</strong> or less. </li> <li> The second stacks the SideNav <em>vertically</em>, at the center when the screen size is <strong>600px</strong> or less. </li> <li> The third stacks the TopNav <em>vertically</em>, at the center when the screen size is <strong>600px</strong> or less. </li> </ol> <h4> Try to scroll this area, and see how the sidenav sticks to the page. </h4> <h4>Resize the browser window to see the effect.</h4> <p> <strong>Note</strong>: When the page is scrolled down, a gap will be seen at the top of the sidebar. This occurs, since the SideNav is located <em>below</em> the TopNav in the markup. <br> If the SideNav is located <em>above</em> the TopNav in the markup, it would appear <em>on top of</em> the TopNav. <br> To solve this problem, keep the TopNav (and anything above it) fixed. </p> <p>Some text..</p> <p>Some text..</p> <p>Some text..</p> <p>Some text..</p> <p>Some text..</p> <p>Some text..</p> <p>Some text..</p> <p>Some text..</p> <p>Some text..</p> <p>Some text..</p> </div> </body> </html>
  7. remove <main2> and <main> tags and it will be fine. Advices: -Don't use <main> tag like this (it's supposed to be used for the main content of the page- semantic tag in html5).
×
×
  • Create New...