merazgasalim

March 27, 2019

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

March 14, 2019

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>

February 24, 2019

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)

February 24, 2019

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

refer to w3s for more informations

February 24, 2019

Add this to your style

 p {
			  margin: 0;			  
   }

and the space will disappear

February 24, 2019

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>

<div class="topnav">
<a href="#">Home</a>
<a href="#" class="active">News</a>
<a href="#">Contact</a>
<a href="#">About</a>
</div>

<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>

</body>
</html>

February 24, 2019

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).

Sign In

merazgasalim

Posts

Joined

Last visited

Content Type

Profiles

Forums

Events

Posts posted by merazgasalim

Adding div side by side

Get the number of edited inputs

w3 css - max width

ask filter in css3

How to eliminate verticle space between Divs ?

TopNav and fixed SideNav scrolling problem

Help

Browse

Activity