merazgasalim
-
Posts
7 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by merazgasalim
-
-
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>
-
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)
-
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
refer to w3s for more informations
-
Add this to your style
p { margin: 0; }
and the space will disappear
-
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> -
Help
in HTML/XHTML
On 2/23/2019 at 5:36 AM, Abigail2119 said:<div class="column">
<main2><img src="links/gd.jpg" width="450px" style="width:450px" height="250px" alt=""/></main2></div><div class="column"><main><img src="links/bennyposter.jpg" width="450px" height="250px" alt=""/></main></div>
<div class="column"><main3><img src="links/cheer_dance.jpg" width="450px" height="250px" alt=""/></main3></div></div>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).
Adding div side by side
in HTML/XHTML
Posted
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