I have a carousel here and visually it looks fine, but on the sides where you can click to go forward a slide or back a slide, when you put the mouse over that part it gets darker. Well, it get’s darker the entire height of the webpage, and not just within the bounds of where it should be. It was working properly and I’m not sure what I could have changed to cause this effect. Any ideas? I still want the controls, I just want them to be within the bounds of the main page, not in the footer and navigation bar.
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">
<div class="container-fluid">
<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>
<a class="navbar-brand"><img id="logo" src="/Images/SC2_MyLink_Logo.png" alt="SC2 Logo"/></a>
</div>
<ul id="navposition" class="nav navbar-nav">
<li class="individualbtnposition"><a href="/">Home</a></li>
<li class="dropdown individualbtnposition">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Our Company<span class="caret"></span></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="dropdown individualbtnposition">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Employee Services<span class="caret"></span></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="dropdown individualbtnposition">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Support Services<span class="caret"></span></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="search" class="navbar-form navbar-right">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
</div>
</nav>
<link type="text/css" href="/css/HomePageStyleSheet.css" rel="stylesheet" />
<div id="homepagemain">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<div>
<div id="corporateeventsimage1" class="item">
<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 id="corporateeventsimage2" class="item">
<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 id="corporatestoreimage1" class="item">
<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 id="corporatestoreimage2" class="item">
<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 id="corporatenewsimage1" class="item">
<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 id="corporatenewsimage2" class="item">
<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>
<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;
font-family: 'Oswald', sans-serif;
}
.navbar{
height: 135px;
}
.navbar-header a {
height: 120px;
width: auto;
padding-top: 3px;
}
#logo {
height: 120px;
width: auto;
}
#navposition {
width: 50%;
margin-top: 5.5%;
}
.individualbtnposition {
margin-right: 8%;
font-size: large;
}
.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;
}
#search {
margin-top: 6%;
}