tengo este css
para aplicar estilo a un topnav:
.topnav .login-container {
float: right;
}
.topnav label{
padding: 6px;
margin-top: 8px;
margin-right: 16px;
font-size: 17px;
border: none;
width: 120px;
height: 30px;
color: white;
float: right;
}
.topnav label {
padding: 6px;
margin-top: 8px;
margin-right: 12px;
font-size: 15px;
border: none;
width: 240px;
height: 30px;
}
.topnav button {
float: right;
padding: 6px 8px;
margin-top: 8px;
margin-right: 14px;
background-color: #f44336;
color: white;
font-size: 17px;
border: none;
cursor: pointer;
height: 30px;
}
.topnav .login-container button:hover {
background-color: #f44336;
}
@media screen and (max-width: 600px) {
.topnav .login-container {
float: none;
}
.topnav a, .topnav label, .topnav .login-container button {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
}
.topnav input[type=text] {
border: 1px solid #ccc;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" type="text/css" href="css/botones.css">
<link rel="stylesheet" type="text/css" href="css/imagen.css">
<link rel="stylesheet" type="text/css" href="css/menu.css">
<link rel="stylesheet" type="text/css" href="css/login/login.css">
<link rel="stylesheet" type="text/css" href="css/login/loginNav.css">
</head>
<body>
<div class="topnav">
<a href="#">Home</a>
<div class="login-container">
<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Login</button>
</div>
</div>
<div id="id01" class="modal">
<form class="modal-content animate" onsubmit="return control()" method="POST" action="indexLogin">
<div class="imgcontainer">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Cerrar modal">×</span>
<img src="imagenes/00.png" alt="imagen" class="avatar">
</div>
<div class="container">
<label for="uname"><b>Usuario:</b></label>
<input type="text" id="uname" placeholder="Ingrese usuario..." name="uname" onkeypress="return soloLetras(event)"/>
<label for="psw"><b>Password:</b></label>
<input type="password" id="psw" placeholder="Ingrese contraseña..." name="psw" onkeypress="return soloLetras(event)"/>
<button type="submit">Iniciar sesión</button>
</div>
</form>
</div>
<center><img class="img" src="imagenes/00.png"/></center>
<center><p>Bienvenida/a, por favor presione el botón para ver la lista de parejas o de precios.</p></center>
<center>
<form method="POST" action="listaParejasSinLogin">
<button name="btnListaParejas" style="width: 150px">Parejas</button>
<button name="btnListaPrecios" style="width: 150px">Precios</button>
</form>
</center>
<script>
function control(){
if(document.getElementById('uname').value == null ||
document.getElementById('uname').value == ""){
alert('El campo no puede estar vacío.');
document.getElementById('uname').focus();
return false;
}
else if(document.getElementById('psw').value == null ||
document.getElementById('psw').value == ""){
alert('El campo no puede estar vacío');
document.getElementById('psw').focus();
return false;
}
return true;
}
</script>
</body>
</html>
Y se ve así en el index:
Pero, en la página siguiente se desconfigura:
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/botones.css">
<link rel="stylesheet" type="text/css" href="css/imagen.css">
<link rel="stylesheet" type="text/css" href="css/menu.css">
<link rel="stylesheet" type="text/css" href="css/login/login.css">
<link rel="stylesheet" type="text/css" href="css/login/loginNav.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Lista Parejas</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"
</head>
<body>
<div class="topnav">
<a href="#">Home</a>
<div class="login-container">
<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Login</button>
</div>
</div>
<br>
<br>
<br>
<div class="w3-container">
<ul class="w3-ul w3-card-4">
<c:forEach items="${lista}" var="P">
<li class="w3-bar">
<div class="w3-bar-item">
<span class="w3-large">${P.nombreCompleto1} - ${P.nombreCompleto2}</span>
</div>
</li>
</c:forEach>
</ul>
</div>
</body>
</html>