Google chrome not showing all markup code (ASP.NET MVC VS2017) - html

I am developing an ASP.NET MVC web application using visual studio community 2017.
I've been working for a few days with the html and everything work fine until yesterday that after adding some html code to the layout.cshtml file for some reason google chrome (neither IE) will show the elements.
The weird thing is that when I use the"show source code" option I can see that code but if I use the "developer tools" chrome won't show it.
The code is a regular navbar, with no css style yet, and I've rebuild several times the solution with no success.
<nav>
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
</ul>
</nav>
Any idea what is going wrong?
EDIT: The whole .cshtml code
<!DOCTYPE html>
<html lang="es-es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - website title</title>
#Styles.Render("~/Content/css")
</head>
<body>
<header>
<div class="collapsed-menu-container">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div class="header-title">
<span class="header-title-span">website title</span>
<p class="header-subtitle">text</p>
</div>
<div class="shopping-bag">
<object data='~/Assets/Icons/shopping-bag.svg' type='image/svg+xml' width='20' height='20' />
</div>
</header>
<nav>
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
</ul>
</nav>
<div>
#RenderBody()
</div>
<footer>
</footer>
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
</body>
</html>

Related

Highlight only the selected item

I'm doing a drop-down list where, when I hover over a specific element, I should highlight only the selected one, unfortunately the whole list is highlighted in my mind, I know the problem is that in one li there is also a new list to make a drop down menu, Unfortunately, I can not deal with it. It's actual result jsfiddle code
<div class="nav">
<ul>
<li class="parent">
<a class="parent_click">Driving</a>
<ul class="sub_list">
<li class="test">
<a class="sub_click">Type of Car</a>
<ul class="sub_sub_list">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ul>
</li>
<li class="test">
<a class="sub_click">Tracks</a>
<ul class="sub_sub_list">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ul>
</li>
<li class="teset">Type of driving</li>
</ul>
</li>
</ul>
</div>
</div>
My CSS:
.sub_list, .sub_sub_list {display:none;}
li:hover{
background-color:red;
}
My JS
$(".sub_list").slideUp();
$(".parent_click").click(function() {
$(".parent_click").not(this).next().slideUp()
$(this).closest(".parent").find(".sub_list").slideToggle();
return false;
});
$(".sub_click").click(function() {
var elem = $(this).next()
$(".sub_sub_list").not(elem).slideUp();
$(this).closest(".test").find(".sub_sub_list").slideToggle();
});

Try using anchor for hover instead of li. It will be simplest and easiest solution. While you can play with code if you want complicated solution...
See below snippet.
$(".sub_list").slideUp();
$(".parent_click").click(function() {
$(".parent_click").not(this).next().slideUp()
$(this).closest(".parent").find(".sub_list").slideToggle();
return false;
});
$(".sub_click").click(function() {
var elem = $(this).next()
$(".sub_sub_list").not(elem).slideUp();
$(this).closest(".test").find(".sub_sub_list").slideToggle();
});
.sub_list, .sub_sub_list {display:none;}
a:hover{
background-color:red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8"/>
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<title>Hello, world!</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="nav">
<ul>
<li class="parent">
<a class="parent_click">Driving</a>
<ul class="sub_list">
<li class="test">
<a class="sub_click">Type of Car</a>
<ul class="sub_sub_list">
<li><a>List 1</a></li>
<li><a>List 2</a></li>
<li><a>List 3</a></li>
</ul>
</li>
<li class="test">
<a class="sub_click">Tracks</a>
<ul class="sub_sub_list">
<li><a>List 1</a></li>
<li><a>List 2</a></li>
<li><a>List 3</a></li>
</ul>
</li>
<li class="teset"><a>Type of driving</a></li>
</ul>
</li>
</ul>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"
></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>

How to center text vertically within bootstrap container

I'm trying to center text vertically within a div bootstrap container. This is my sample HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.vcenter {
display: inline-block;
vertical-align: middle;
float:none;
}
</style>
</head>
<body>
<div class="container">
<nav class="navbar navbar-default vcenter ">
<ul class="list-inline vcenter" >
<li class="menuFont">Menu 1</li>
<li class="menuFont ">Menu 2</li>
<li class="menuFont ">Menu 3</li>
<li class="menuFont ">Menu 4</li>
<li class="menuFont ">Menu 5</li>
<li class="menuFont ">Menu 6</li>
<li class="menuFont ">Menu 7</li>
</ul>
</nav>
</div>
</body>
</html>
I would like the menu text centered vertically within the container, but they are hugging the top. How would I do this?
I worked on this last night and this is what I came up with:
My goal using Bootstrap, was to have a series of menu links running horizontally across the page. For some reason, doubtless due to my ignorance, this proved rather difficult. I did come up with a solution. At least this seems to work, OK. HOWEVER, in order to make the horizontal menu items appear vertically centered within the container, I had to add margin-top: 3px to the class view. This feels kind of fake to me, but whatever works works, I guess. Any comments are appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TEST</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script>
<style>
.view {
margin-left: auto;
margin-right: auto;
overflow: hidden;
margin-top: 3px;
}
</style>
</head>
<body>
<div class="container">
<div class="Jumbotron">
<h1 class="text-primary text-center">Using Bookstreap.js</h1>
<hr>
</div>
<nav class="navbar navbar-default view ">
<div class="container-fluid view">
<div class="row">
<div class="col-lg-10 col-lg-offset-10 view" >
<ul class="list-inline view" >
<li class="view">Menu 1</li>
<li class="view">Menu 1</li>
<li class="view">Menu 2</li></li>
<li class="view">Menu 3</li>
<li class="view">Menu 4</li>
<li class="view">Menu 5</li>
<li class="view">Menu 6</li>
</ul>
</div>
</div>
</div>
</nav>
<div>

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
{
display: inline-block;
vertical-align: middle;
float:none;
}
</style>
</head>
<body>
<div class="container">
<nav class="navbar navbar-default vcenter " >
<div class="container-fluid vcenter">
<div class="col-lg-5 col-lg-offset-5" >
<ul class="list-inline vcenter" >
<div>
<li class="menuFont">Menu 1</li>
<li class="menuFont ">Menu 2</li>
<li class="menuFont ">Menu 3</li>
<li class="menuFont ">Menu 4</li>
<li class="menuFont ">Menu 5</li>
<li class="menuFont ">Menu 6</li>
<li class="menuFont ">Menu 7</li>
<div>
</ul>
</div>
</div>
</nav>
</div>
</body>
</html>

Zurb Foundation6 dropdown menu

I'm using zurb foundation's dropdown menu. I need the dropdown lists to display as inline-block. So far, I haven't any foundation rules that do this. I need help
<html>
<head>
<!--foundation styles-->
<style type="text/css">
.custom-menu{
display:inline-block;
}
</style>
</head>
<body>
<div class="row text-center">
<ul class="dropdown menu custom-menu" data-dropdown-menu>
<li>Item One
<ul class="menu">
<!-- I want to display the lists here as inline
block-->
<li>Item One A</li>
<!--more Links-->
</ul>
</li>
<li>Item Two</li>
</ul>
</div>
<!--foundation scripts-->
</body>
</html>

Anchors to pages not working?

Im trying to learn html and i ran into trouble,
This is the homepage:
<head>
<title>title</title>
</head>
<body>
<h1>Welcome to ....</h1>
<ul>
<li>Home</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<h2>Homepage</h2>
<p>Homepage content...</p>
</body>
The second page:
<head>
<title>Page 2</title>
</head>
<body>
<h1>Welcome to ...</h1>
<ul>
<li>Home</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<h2>Page 2</h2>
<p>Page 2 content...</p>
</body>
The Third page:
<head>
<title>Page 3</title>
</head>
<body>
<h1>Welcome to ...</h1>
<ul>
<li>Home</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<h2>Page 3</h2>
<p>Page 3 content...</p>
</body>
I saved them in one folder on my desktop but for some reason whenever I click the 2nd or 3rd page links in chrome it just tells me that the webpage is not found. Please help.

Thanks for the help everyone,
I had spaces in the file names, it got fixed when i removed them. The names must be exactly the same as the .html href links in the files.

My html bootstrap sidebar item just won't drop down

Currently trying to create a simple dropdown sidebar using bootstrap.
Below is my code in html:
<html>
<head>
<title>Sidebar</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="bootstrap.css">
<link type="text/css" rel="stylesheet" href="common.css"/>
</head>
<body>
<div class="col-sm-3">
<ul class="nav nav-sidebar">
<li class="row">Item 1
<ul class="dropdown-menu">
<li>Item 1A</li>
<li>Item 1B</li>
<li>Item 1C</li>
</ul>
</li>
<li class="row">Item 2
<ul class="dropdown-menu">
<li>Item 2A</li>
<li>Item 2B</li>
</ul>
</li>
</ul>
</div>
</body>
Here is my common.css:
.row{
background-color:#ffff99;
border:2px solid black;
}
The sidebar won't drop down when I click Item 1 or Item 2. Any idea what went wrong?

Have a look at the basic template on the Bootstrap site
http://getbootstrap.com/getting-started/#template
At the bottom of the HTML block they have referenced two javascript files which you are missing.

You need to include the jquery.js and bootstrap.js.

The dropdowns work with JavaScript, so you need to include that. Try to add bootstrap.min.js to your application by adding
<script src="bootstrap.min.js" type="text/javascript"></script>
to the head section of your page, or just before the closing </body>-tag of the page.
Additionally, you need to add jQuery, which is done the same way, but make sure you include it before the bootstrap script.

Your dropdowns work with JavaScript
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.row {
background-color: #ffff99;
border: 2px solid black;
}
</style>
</head>
<body>
<div class="col-sm-3">
<ul class="nav nav-sidebar">
<li class="row">
Item 1
<ul class="dropdown-menu">
<li>Item 1A</li>
<li>Item 1B</li>
<li>Item 1C</li>
</ul>
</li>
<li class="row">
Item 2
<ul class="dropdown-menu">
<li>Item 2A</li>
<li>Item 2B</li>
</ul>
</li>
</ul>
</div>
</body>
</html>