The div that shows "User: Anonymous" does not appear where I want, I can not get the div (inside a header) with id="divLogin" to appear at the top right in Chrome, however in Edge if.
In Chrome as you can see it appears under the nav even though I specified display: inline-block . It's like I do not get the styles right.
The HTML code of the header is included as a common header like this:
<%@include file="/parciales/header.jsp"%>
In other jsp files, but I do not think this is my problem but rather a css problem .
My files are:
- HTML : header.jsp
- CSS : cssLayout.css
This is my code:
body {
margin: 0px;
padding: 7px;
padding-top: 60px;
font-size: 14px;
}
**header {
background-color: #f5f5f5;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
display: table;
height: 50px;
left: 0px;
position: fixed;
right: 0px;
top: 0px;
width: 100%;
}
header>#divLogin {
display: inline-block;
position: absolute;
right: 4px;
top: 17px;
}
** header>.menu>ul {
display: inline-block;
margin: 0px;
padding: 0px;
list-style: none;
vertical-align: middle;
}
header>.menu>ul>li {
display: inline-block;
heght: 50px;
text-align: left;
}
header>.menu>ul>li>a {
color: #727272;
cursor: pointer;
display: block;
line-height: 50px;
padding-left: 15px;
padding-right: 15px;
text-decoration: none;
vertical-align: middle;
}
header>.menu>ul>li>a:hover {
background-color: #A83939;
color: white;
}
.divAlertaCorrecto {
background-color: blue;
color: white;
margin: 4px;
padding: 7px;
}
.divAlertaError {
background-color: red;
color: white;
padding: 7px;
margin: 4px;
}<header>
<nav class="menu">
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Registrar datos en el sistema</a></li>
<li><a href="#">Ver los datos registrados</a></li>
</ul>
</nav>
<div id="divLogin">
<b>Usuario: </b>
<%=request.getSession().getAttribute("correoElectronico")!=null ?
request.getSession().getAttribute("correoElectronico") : "Anónimo"%>--
</div>
</header>Chrome looks bad:
But Edge looks good:
