user6797937 user6797937 - 2 months ago 14
HTML Question

HTML / CSS Absolute position & inline block navigation bar

I have looked at some answers regarding similar issues, but I cannot seem to incorporate this into my own code. I understand that absolute position and inline block do not work with one another because the element is taken out of flow through absolute position.

I have been trying to make my dropdown menu in my navigation bar appear like a normal dropdown menu. Upon toying around to find a solution to this problem, relative positioning calls up the entire navigation bar down alongside the actual dropdown menu (Please run the code to see, terrible explanation). I would appreciate if someone could show me what needs to be done here, as I have spent about an hour trying to figure out what to do.

If you have an extra moment as well, I also am trying to figure out how to center the elements within this navigation bar. This is not of priority, however.

Thank you so much,

John (I have about 1 week of HTML/CSS experience)



<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

</head>


<style>

.font {
font-family: "open sans";
}

/* Initial Nav Bar */
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
left: 0;
margin-top: 0;
top: 0;
position: absolute;
}
/* Where buttons float */
li {
float: left;
}

/* Hover color */
.active {
background-image: -webkit-linear-gradient(top, black 0%, #193c5a 100%);
background-image: -o-linear-gradient(top, black 0%, #193c5a 100%);
background-image: linear-gradient(to bottom, black 0%, #193c5a 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff004400', endColorstr='#ff009900', GradientType=0);
}

li a:hover, .dropdown:hover .dropbtn {
background-image: -webkit-linear-gradient(top, black 0%, #193c5a 100%);
background-image: -o-linear-gradient(top, black 0%, #193c5a 100%);
background-image: linear-gradient(to bottom, black 0%, #193c5a 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff004400', endColorstr='#ff009900', GradientType=0);
}

.dropdown-content a:hover {
background-image: -webkit-linear-gradient(top, black 0%, #193c5a 100%);
background-image: -o-linear-gradient(top, black 0%, #193c5a 100%);
background-image: linear-gradient(to bottom, black 0%, #193c5a 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff004400', endColorstr='#ff009900', GradientType=0);
}

li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li.dropdown {
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
color: white;
}

.dropdown:hover .dropdown-content {
display: block;
}

.navbar-default {
background-image: -webkit-linear-gradient(top, #7eb0db 0%, #2a6496 100%);
background-image: -o-linear-gradient(top, #7eb0db 0%, #2a6496 100%);
background-image: linear-gradient(to bottom, #7eb0db 0%, #2a6496 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff004400', endColorstr='#ff009900', GradientType=0);
}

.wrapper-border-radius {
text-align: center;
width: 100%;
margin: 0;
padding: 0;
}

</style>


<div class="wrapper-border-radius">
<ul class="navbar-default">
<li><a class="font active" href="#">Home</a></li>

<li class="dropdown navbar-default">

<a class = "font" href="#" class="dropbtn">Classes</a>
<div class="dropdown-content navbar-default">
<a class = "font" href="physics.html">Physics</a>
<a class = "font" href="math.html">Math</a>
<a class = "font" href="humanities.html">Humanities</a>
<a class = "font" href="stem.html">STEM</a>
<a class = "font" href="STW.html">STW</a>
<a class = "font" href="spanish.html">Spanish</a>
<a class = "font" href="computerscience.html">Computer Science</a>
</div>
<li><a class = "font" class="tend" href="contactme.html">About Me</a></li>
<li><a class = "font" href="stemproject.html">STEM Project</a></li>
<li><a class = "font" class="tend"href="soccer.html">Sports</a></li>
<li><a class = "font" class="tend" href="contactme.html">Contact Me</a></li>

</ul>
</div>

</html>




Answer

Here you go hope this helps

body{margin:0;}
.font {
  font-family: "open sans";
}

/* Initial Nav Bar */
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: auto;
  left: 50%;
  margin-top: 0;
  top: 0;
  position: absolute;
  transform: translateX(-50%);
}
.navbar {
  white-space: nowrap;
}
.navbar li {
  display: inline-block;
}

/* Hover color */
.active {
  background-image: -webkit-linear-gradient(top, black  0%, #193c5a 100%);
  background-image: -o-linear-gradient(top, black  0%, #193c5a 100%);
  background-image: linear-gradient(to bottom, black 0%, #193c5a 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff004400', endColorstr='#ff009900', GradientType=0);
}

li a:hover, .dropdown:hover .dropbtn {
  background-image: -webkit-linear-gradient(top, black  0%, #193c5a 100%);
  background-image: -o-linear-gradient(top, black  0%, #193c5a 100%);
  background-image: linear-gradient(to bottom, black 0%, #193c5a 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff004400', endColorstr='#ff009900', GradientType=0);
}

.dropdown-content a:hover {
  background-image: -webkit-linear-gradient(top, black  0%, #193c5a 100%);
  background-image: -o-linear-gradient(top, black  0%, #193c5a 100%);
  background-image: linear-gradient(to bottom, black 0%, #193c5a 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff004400', endColorstr='#ff009900', GradientType=0);
}

li a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  color: white;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.navbar-default, .navbar-default-content {
    background-image: -webkit-linear-gradient(top, #7eb0db 0%, #2a6496 100%);
  background-image: -o-linear-gradient(top, #7eb0db 0%, #2a6496 100%);
  background-image: linear-gradient(to bottom, #7eb0db 0%, #2a6496 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff004400', endColorstr='#ff009900', GradientType=0);
}

.wrapper-border-radius {
  text-align: center;
  width: 100%;
  height: 50px;
  margin: 0;
  padding: 0;
   background-image: -webkit-linear-gradient(top, #7eb0db 0%, #2a6496 100%);
  background-image: -o-linear-gradient(top, #7eb0db 0%, #2a6496 100%);
  background-image: linear-gradient(to bottom, #7eb0db 0%, #2a6496 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff004400', endColorstr='#ff009900', GradientType=0);
}
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

</head>

<div class="wrapper-border-radius">
	<ul class="navbar-default navbar">
		<li><a class="font active" href="#">Home</a></li>	
		
		<li class="dropdown navbar-default">  
		    <a class = "font" href="#" class="dropbtn">Classes</a>
		    <div class="dropdown-content navbar-default-content">
					  <a class = "font" href="physics.html">Physics</a> 
					  <a class = "font" href="math.html">Math</a>
					  <a class = "font" href="humanities.html">Humanities</a>
					  <a class = "font" href="stem.html">STEM</a>
					  <a class = "font" href="STW.html">STW</a>
					  <a class = "font" href="spanish.html">Spanish</a>
					  <a class = "font" href="computerscience.html">Computer Science</a>
		    </div>	    
			    <li><a class = "font" class="tend" href="contactme.html">About Me</a></li>
			    <li><a class = "font" href="stemproject.html">STEM Project</a></li>
			    <li><a class = "font" class="tend"href="soccer.html">Sports</a></li>
				
		
	</ul>
</div>

</html>

Comments