So I had this nav bar working but I am following the advice of people much more experienced than I am and going through all of the errors I am getting when validating my code. One such error is in regards to an <a> tag that is getting duplicated at run time because of a bit of asp.net code that gets ran. However, if I delete the <a> tag in the html, it makes the home button on the nav bar sit higher than all the other buttons. Nothing I do seems to get it to move back down and into the correct place. Can anyone help me with why this is? I’ve included all of the rendered HTML. The <a> tag I’m talking about is on line 29.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link type="text/css" href="css/LayoutStyleSheet.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HomePage - My ASP.NET Application</title>
<link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.css" />
</head>
<body id="layoutBody">
<nav class="navbar navbar-inverse navbar-static-top marginBottom-0">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div id="spacerDiv">
<a class="navbar-left"><img id="logo" src="/Images/SC2_MyLink_Logo.png" alt="Browser does not support image."/></a>
</div>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul id="navigationbar" class="nav navbar-nav">
<li id="homebutton" class="dropdown"><a href="/">Home</a></li>
<li class="menubuttons dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Our Company<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="/OurCompany">Our History</a></li>
<li><a href="/OurCompany/Facilities">Facilities</a></li>
</ul>
</li>
<li class="menubuttons dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Employee Services<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Forms</a>
<ul class="dropdown-menu">
<li><a href="/FormsHandlers/HRForms">HR Forms</a></li>
<li><a href="/FormsHandlers/CorporateForms">Corporate Forms</a></li>
<li><a href="/FormsHandlers/EmployeeBenefitsForms">Employee Benefits</a></li>
<li><a href="/FormsHandlers/AccidentForms">Accident Forms</a></li>
<li><a href="/FormsHandlers/PayrollForms">Payroll Forms</a></li>
</ul>
</li>
<li><a href="#">Pay Stubs</a></li>
<li><a href="/FormsHandlers/FAQ">FAQ</a></li>
</ul>
</li>
<li class=" menubuttons dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Support Services<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">ISS Support</a></li>
<li><a href="#">Purchase Requests</a></li>
<li><a href="#">Maint. Support</a></li>
</ul>
</li>
</ul>
<form id="searchbar" method="get">
<input type="text" id="search" placeholder="Search..." maxlength="50" autocomplete="off" onmousedown="active();" onblur="inactive();">
<input type="submit" id="searchbutton" value="Go!"/>
</form>
</div><!-- /.navbar-collapse -->
</nav>
<link type="text/css" href="css/HomePageStyleSheet.css" rel="stylesheet" />
<div align="center">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div>
<div class="item"; style="display: inline-block" width="45%" >
<img style="margin-bottom: 0.5em; margin-right: 5%; width: 600px; height:350px" src="//images.contentful.com/6yl0vo95lmum/6rCGntQ9jOWCOYWsSMgAGI/f7167dc317093de9d6611bb81f1746fb/ESOP.png" alt="" />
</div>
<div class="item"; style= "display: inline-block" width="50%">
<img style=" margin-bottom: 0.5em; margin-right: 5%; width: 600px; height: 350px" src="//images.contentful.com/6yl0vo95lmum/5gvh2SQdr206SOsSiAYaSs/82803f28ba31fac6989051937a778faf/ESOP2.png" alt="" />
</div>
</div>
</div>
<div class="item">
<a href="https://www.asbaces.com/newaces/(S(ujn24e2mcpp1kzkc4ivg0kzh))/storefront.aspx">
<div>
<div class="item"; style="display: inline-block" width="45%" >
<img style=" margin-bottom: 0.5em; margin-right: 5%; width: 600px; height: 350px" src="//images.contentful.com/6yl0vo95lmum/14SKiCgkGUEUuge0iksg8K/d1fae222eecb58133a6db9d512baf3cc/Store1.png" alt="" />
</div>
<div class="item"; style="display: inline-block" width="50%">
<img style=" margin-bottom: 0.5em; margin-right: 5%; width: 600px; height: 350px" src="//images.contentful.com/6yl0vo95lmum/28U0FE2u0MKs4UmYMCWs4S/c498e7bfaf763d23cba3d0a4afc392d7/Store2.png" alt="" />
</div>
</div>
</a>
</div>
<div class="item">
<a href="/Home/NewsLetter">
<div>
<div class="item"; style="display: inline-block" width="45%" >
<img style="margin-bottom: 0.5em; margin-right: 5%; width: 600px; height:350px" src="//images.contentful.com/6yl0vo95lmum/5v9ERXN1q86iueOGQKySia/70f073f8b2878522029f3e7b934879f6/news.png" alt="" />
</div>
<div class="item"; style="display: inline-block" width="50%">
<img style=" margin-bottom: 0.5em; margin-right: 5%; width: 600px; height: 350px" src="//images.contentful.com/6yl0vo95lmum/4A1MxhIOVaqQI60KIIiGsI/a25dc7b6ee0e7b336d16836e45fb00c9/news2.png" alt="" />
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
<script type="text/javascript" src="/bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>`
<div class="form-group">
<div class="row">
<div class="col-md-8">
<div id="datetimepicker12"></div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker12').datetimepicker({
inline: true,
sideBySide: true
});
});
</script>
</div>
<hr/>
<footer>
<p style="float: right; margin-right: 10px;">© 2017 - SC2 MyLink</p>
<div style="margin-left: 215px;">
<!-- start sw-rss-feed code -->
<script type="text/javascript">
<!--
rssfeed_url = new Array();
rssfeed_url[0] = "http://www.rssweather.com/zipcode/61601/rss.php";
rssfeed_frame_width = "270";
rssfeed_frame_height = "200";
rssfeed_scroll = "on";
rssfeed_scroll_step = "6";
rssfeed_scroll_bar = "off";
rssfeed_target = "_blank";
rssfeed_font_size = "12";
rssfeed_font_face = "";
rssfeed_border = "on";
rssfeed_css_url = "https://feed.surfing-waves.com/css/style3a.css";
rssfeed_title = "on";
rssfeed_title_name = "Peoria, IL Weather";
rssfeed_title_bgcolor = "#3366ff";
rssfeed_title_color = "#fff";
rssfeed_title_bgimage = "";
rssfeed_footer = "on";
rssfeed_footer_name = "http://www.rssweather.com/";
rssfeed_footer_bgcolor = "#fff";
rssfeed_footer_color = "#fff";
rssfeed_footer_bgimage = "";
rssfeed_item_title_length = "50";
rssfeed_item_title_color = "#fff";
rssfeed_item_bgcolor = "#fff";
rssfeed_item_bgimage = "";
rssfeed_item_border_bottom = "on";
rssfeed_item_source_icon = "off";
rssfeed_item_date = "off";
rssfeed_item_description = "on";
rssfeed_item_description_length = "120";
rssfeed_item_description_color = "#fff";
rssfeed_item_description_link_color = "#fff";
rssfeed_item_description_tag = "on";
rssfeed_no_items = "0";
rssfeed_cache = "b8c8039956605711f322fb17a47ffbaf";
//-->
</script>
<script type="text/javascript" src="//feed.surfing-waves.com/js/rss-feed.js"></script>
<!-- start sw-rss-feed code -->
<script type="text/javascript">
<!--
rssfeed_url = new Array();
rssfeed_url[0] = "http://www.nasdaq.com/aspxcontent/NasdaqRSS.aspx?data=quotes&symbol=CAT";
rssfeed_url[1] = "http://www.nasdaq.com/aspxcontent/NasdaqRSS.aspx?data=quotes&symbol=KMTUY";
rssfeed_url[2] = "http://www.nasdaq.com/aspxcontent/NasdaqRSS.aspx?data=quotes&symbol=MMTOF";
rssfeed_url[3] = "http://www.nasdaq.com/aspxcontent/NasdaqRSS.aspx?data=quotes&symbol=DE";
rssfeed_frame_width = "280";
rssfeed_frame_height = "200";
rssfeed_scroll = "on";
rssfeed_scroll_step = "6";
rssfeed_scroll_bar = "off";
rssfeed_target = "_blank";
rssfeed_font_size = "12";
rssfeed_font_face = "";
rssfeed_border = "on";
rssfeed_css_url = "https://feed.surfing-waves.com/css/style3a.css";
rssfeed_title = "on";
rssfeed_title_name = "Stock Prices";
rssfeed_title_bgcolor = "#3366ff";
rssfeed_title_color = "#fff";
rssfeed_title_bgimage = "";
rssfeed_footer = "off";
rssfeed_footer_name = "rss feed";
rssfeed_footer_bgcolor = "#fff";
rssfeed_footer_color = "#333";
rssfeed_footer_bgimage = "";
rssfeed_item_title_length = "50";
rssfeed_item_title_color = "#666";
rssfeed_item_bgcolor = "#fff";
rssfeed_item_bgimage = "";
rssfeed_item_border_bottom = "on";
rssfeed_item_source_icon = "off";
rssfeed_item_date = "off";
rssfeed_item_description = "on";
rssfeed_item_description_length = "120";
rssfeed_item_description_color = "#666";
rssfeed_item_description_link_color = "#333";
rssfeed_item_description_tag = "on";
rssfeed_no_items = "0";
rssfeed_cache = "55ca4c5d06e1ebc6dafb55c1177c93b1";
//-->
</script>
<script type="text/javascript" src="//feed.surfing-waves.com/js/rss-feed.js"></script>
<!-- start sw-rss-feed code -->
<script type="text/javascript">
<!--
rssfeed_url = new Array();
rssfeed_url[0] = "http://www.pjstar.com/news?template=rss&mime=xml";
rssfeed_frame_width = "280";
rssfeed_frame_height = "200";
rssfeed_scroll = "on";
rssfeed_scroll_step = "6";
rssfeed_scroll_bar = "off";
rssfeed_target = "_blank";
rssfeed_font_size = "12";
rssfeed_font_face = "";
rssfeed_border = "on";
rssfeed_css_url = "https://feed.surfing-waves.com/css/style3a.css";
rssfeed_title = "on";
rssfeed_title_name = "Local News";
rssfeed_title_bgcolor = "#3366ff";
rssfeed_title_color = "#fff";
rssfeed_title_bgimage = "";
rssfeed_footer = "on";
rssfeed_footer_name = "http://www.pjstar.com/";
rssfeed_footer_bgcolor = "#fff";
rssfeed_footer_color = "#333";
rssfeed_footer_bgimage = "";
rssfeed_item_title_length = "50";
rssfeed_item_title_color = "#666";
rssfeed_item_bgcolor = "#fff";
rssfeed_item_bgimage = "";
rssfeed_item_border_bottom = "on";
rssfeed_item_source_icon = "off";
rssfeed_item_date = "off";
rssfeed_item_description = "on";
rssfeed_item_description_length = "120";
rssfeed_item_description_color = "#666";
rssfeed_item_description_link_color = "#333";
rssfeed_item_description_tag = "on";
rssfeed_no_items = "0";
rssfeed_cache = "2d81be508f9c768cdf708edfbdde744b";
//-->
</script>
<script type="text/javascript" src="//feed.surfing-waves.com/js/rss-feed.js"></script>
<!-- start sw-rss-feed code -->
<script type="text/javascript">
<!--
rssfeed_url = new Array();
rssfeed_url[0] = "https://www.cbsnews.com/latest/rss/main";
rssfeed_frame_width = "280";
rssfeed_frame_height = "200";
rssfeed_scroll = "on";
rssfeed_scroll_step = "6";
rssfeed_scroll_bar = "off";
rssfeed_target = "_blank";
rssfeed_font_size = "12";
rssfeed_font_face = "";
rssfeed_border = "on";
rssfeed_css_url = "https://feed.surfing-waves.com/css/style3a.css";
rssfeed_title = "on";
rssfeed_title_name = "U.S. News";
rssfeed_title_bgcolor = "#3366ff";
rssfeed_title_color = "#fff";
rssfeed_title_bgimage = "";
rssfeed_footer = "on";
rssfeed_footer_name = "https://www.cbsnews.com/";
rssfeed_footer_bgcolor = "#fff";
rssfeed_footer_color = "#333";
rssfeed_footer_bgimage = "";
rssfeed_item_title_length = "50";
rssfeed_item_title_color = "#666";
rssfeed_item_bgcolor = "#fff";
rssfeed_item_bgimage = "";
rssfeed_item_border_bottom = "on";
rssfeed_item_source_icon = "off";
rssfeed_item_date = "off";
rssfeed_item_description = "on";
rssfeed_item_description_length = "120";
rssfeed_item_description_color = "#666";
rssfeed_item_description_link_color = "#333";
rssfeed_item_description_tag = "on";
rssfeed_no_items = "0";
rssfeed_cache = "cb56ca3efc16103b3d691e5c24f6dfbd";
//-->
</script>
<script type="text/javascript" src="//feed.surfing-waves.com/js/rss-feed.js"></script>
<!-- The link below helps keep this service FREE, and helps other people find the SW widget. Please be cool and keep it! Thanks. -->
<div class="rssfeeds"><a href="http://www.surfing-waves.com/feed.htm" target="_blank" style="position: relative; color: #ccc; font-size: 10px">feedwidget </a> <a href="http://www.surfing-waves.com" target="_blank" style="color: #ccc; font-size: 10px">Surfing Waves</a>
</div>
<!-- end sw-rss-feed code -->
</div>
</footer>
<script src="/lib/jquery/dist/jquery.js"></script>
<script src="/lib/bootstrap/dist/js/bootstrap.js"></script>
<script type="text/javascript">
function active() {
var search = document.getElementById('search');
if (search.value == "") {
search.value = "";
search.placeholder = "Search...";
}
}
function inactive() {
var search = document.getElementById('search');
if (search.value == "Search...") {
search.value = "Search...";
search.placeholder = "";
}
}
</script>
<script>
$(document).ready(function() {
$('.dropdown-submenu>a').on("click",
function(e) {
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
</body>
</html>
CSS:
#layoutBody {
background: #353c3e;
color: white;
margin: 0%;
padding: 0%;
font-family: 'Oswald', sans-serif;
}
#homebutton {
margin-top: 11.5%;
margin-right: 3%;
padding-right: 0%;
}
#navigationbar {
height: 12em;
width: 60%;
}
.marginBottom-0 {
margin-bottom: 0;
}
.menubuttons {
margin-top: 15%;
padding: 0;
margin-left: 12%;
margin-right: 0;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu > a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #cccccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
border-left-color: #555;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
#searchbar {
float: right;
margin-top: 10%;
}
#logo {
position: relative;
height: 10em;
width: auto;
padding: 0;
margin-top: 15px;
}
#spacerDiv {
height: 8em;
width: 22em;
}