Navbar depopulated and distorted

Question

Navbar depopulated and distorted

Navigation

#1 by (0 votes)

2

Good morning!

More than an error I have a query with navbar (although they also occur with other situations). I'm starting a project but just happened to me that I do not understand why it happens:

My code of default.Master is like this:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Default.master.cs" Inherits="GamblingWeb.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999xhtml>
<head runat="server">
<meta charset ="utf-8" />
<meta name ="viewport" content ="width=device-width, inital scale =1" />
<title>Mundialito Cash</title>
<!---jQuery minifield Script-->
<script src="Scripts/jquery-3.3.1.min.js"></script>
<!---Bootstrap Minifield Script-->
<script src="Scripts/bootstrap.min.js"></script>
<!---CSS Minified -->
<link type ="text/css" rel ="stylesheet" href="Content/bootstrap.css" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<style type="text/css">
    .navtop {
        font-size: medium;
        text-align: center;
        background: #FF0000;
    }
    .firma {
        font-size: xx-small;
        text-align: center;
        background: #F78181;
    }
</style>
</head>
<body>
<nav class ="navbar navbar-expand-md fixed-top">
   <div classs ="container">
       <p class="navtop">Holis</p>
   </div>
 </nav>
<nav class ="navbar navbar-expand-md  fixed-bottom">
    <div class="container">
        <p class="firma"> Gambling Site  <br> Copyright © 2018 Analisis de Sistemas I<br> IMR</p>
    </div>
</nav>

<form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder ID="cphDefault" runat="server">
        </asp:ContentPlaceHolder>
    </div>
</form>
</body>
</html>

Add a webform with master page and I have absolutely nothing in this aspx at the moment:

<%@ Page Title="" Language="C#" MasterPageFile="~/Default.Master"  AutoEventWireup="true" CodeBehind="LogIn.aspx.cs"    Inherits="GamblingWeb.LogIn" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cphDefault" runat="server">
</asp:Content>

and check with the design to see everything well: but when you run it in the browser it ends up looking like this:

my question is, why are these situations occurring and how to correct them? I know it is not complicated but I am still learning and I can not find a reason why it is given or how to correct it, so far the only solution I have found is to erase and do everything again and it works as it should, but I know it is not A) Yes.

Thanks for your help!

css bootstrap asp.net

asked by Israel Morales 21.05.2018 в 16:04

source

1 answer

how can I position the cursor pointer in front of the text in the following script problems with javascript objects

score 0 · Accepted Answer

The problem you have is basically the definition of an unnecessary <div class="container"></div> within your "header" and "footer" plus you assume that since you placed navbar-expand-md the child elements of this nav will inherit the width:100% of the father. This is not true since we are talking about a <p> element as a child which has width own.

Solution: Delete the <div class="container></div>" of header and footer and also place in your predefined styles like .navtop and .firma the property of width:100% thus adjust to the total width you have the father of these elements (in this case the father is the <navbar> itself)

I leave an example with your code to which I made the mentioned arrangements and you can see it working as you wish:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999xhtml>
<head runat="server">
<meta charset ="utf-8" />
<meta name ="viewport" content ="width=device-width, inital scale =1" />
<title>Mundialito Cash</title>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<style type="text/css">
    .navtop {
        font-size: medium;
        text-align: center;
        background: #FF0000;
        width:100%;
    }
    .firma {
        font-size: xx-small;
        text-align: center;
        background: #F78181;
        width:100%;
    }
</style>
</head>
<body>
<nav class ="navbar navbar-expand-md fixed-top">
       <p class="navtop">Holis</p>
 </nav>
<nav class ="navbar navbar-expand-md fixed-bottom">
        <p class="firma"> Gambling Site  <br> Copyright © 2018 Analisis de Sistemas I<br> IMR</p>
</nav>

<form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder ID="cphDefault" runat="server">
        </asp:ContentPlaceHolder>
    </div>
</form>
</body>
</html>

Observation: It is not common to see more than one <div class"container"></div> element since one is enough to "format" the website and fulfills the "wrapper" function of all the other elements present .

I hope it helps. Greetings!