1

Ando teniendo un problema con este código. Seguro que es algo muy simple que estoy salteando, pero ya busque bastante y no logro encontrar la respuesta. Div2 y section no están respetando los parámetros que les otorgo, yo creo que la raíz del problema pueda ser de superposición. Actualizado-

css y html

body {
background-color: lightgray;
}
.banner {
background-color: black;
color: #fff;
margin: auto;
width: 50%;
text-align: center;
font-family: monospace;
width: 700px;
height: 120px;
margin-bottom: 0px;
}
.banner img {
width: 700px;
height: 100px;
}
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial;   
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px; 
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: fixed;
background-color: black;
width: 350px;
height: auto;
color: #fff;
float: left;
}
.dropdown-content a {
float: none;
color: #fff;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
  background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.navbar .icon {
display: none;
}
@media screen and (max-width: 600px) {
.navbar a:not(:first-child) {display: none;}
.navbar a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.navbar.responsive {position: relative;}
.navbar.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.navbar.responsive a {
float: none;
display: block;
text-align: left;
}  
section {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
color: red;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
<!doctype html>
<html lang="en">
<head>
<title>Hello, world!</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/uno.min.css">
</head>
<body>
<div class="banner">Publicidad<br><img src="img/banner.jpg"></div>
<div class="navbar" id="myTopnav">
<a href="#home">Inicio</a>
<a href="#news">Noticias</a>
<div class="dropdown">
<button class="dropbtn">Iniciar sesión
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<form method="post" action="/login.phtml">
<input type="hidden" id="templateLoginDest" name="destination" value="%2F">
<table style="width: 350px;" align="center">
<tbody><tr>
<td valign="top" width="100px"><b>Usuario:</b></td>
<td valign="top"><input type="text" name="username" id="templateLoginPopupUsername" size="30"></td>
</tr>
<tr>
<td valign="top"><b>Contraseña:</b></td>
<td valign="top"><input type="password" name="password" size="30"><br><a href="/account/passwordreset.phtml" style="font-size: 8pt;">Recordar contraseña</a><br><br></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="Entrar!"></td>
</tr>
</tbody></table>
</form>
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
</div> 
</div>
<script>function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "navbar") {
        x.className += " responsive";
    } else {
        x.className = "navbar";
    }
}
</script>
<div><section>a</section></div>
<div class="div2">b</div>
</body>
</html>

3
  • Aclara tu problema específico o añade detalles adicionales para destacar con exactitud lo que necesitas. Por la forma en que está escrito, es difícil determinar exactamente lo que quieres preguntar. Visita la página Cómo preguntar para obtener ayuda sobre cómo aclarar esta pregunta. Commented el 13 nov. 2017 a las 16:11
  • Hola Matías, para poder ayudarte sé un poco más específico en tu pregunta. Qué div no está aplicando la hoja de estilo?
    – Hugo L.M
    Commented el 13 nov. 2017 a las 16:11
  • Hola, disculpen mi falta de precisión. Lo que sucede es después del script. Cuando dentro de archivo css llamo a section o .div2 ninguna de estas dos dan respuesta, excepto las de mostrarse de forma natural. O sea sin respetar los parámetros que quiero. Los fonts no responden y las img tampoco, creo que debe ser algún problema con float, como si se estuvieran chocando, con 'navbar'. Ahora reviso la página de 'Cómo preguntar' Gracias.
    – Matias
    Commented el 13 nov. 2017 a las 16:16

1 respuesta 1

1

El problema lo tienes porque te falta cerrar con corchete } uno de los @media, y por la forma en la que trabajan los archivos CSS en cascada, después de ese error el resto de sentencias no tienen efecto.

Aquí puedes encontrar más información sobre el estilo de cascada Cascada y herencia

Además, los dos @media que tienes, son iguales @media screen and (max-width: 600px), con lo cuál te recomiendo que los unas en uno sólo.

body {
background-color: lightgray;
}
.banner {
background-color: black;
color: #fff;
margin: auto;
width: 50%;
text-align: center;
font-family: monospace;
width: 700px;
height: 120px;
margin-bottom: 0px;
}
.banner img {
width: 700px;
height: 100px;
}
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial;   
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px; 
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: fixed;
background-color: black;
width: 350px;
height: auto;
color: #fff;
float: left;
}
.dropdown-content a {
float: none;
color: #fff;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
  background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.navbar .icon {
display: none;
}
@media screen and (max-width: 600px) {
.navbar a:not(:first-child) {display: none;}
.navbar a.icon {
float: right;
display: block;
}
.navbar.responsive {position: relative;}
.navbar.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
}
.navbar.responsive a {
float: none;
display: block;
text-align: left;
}  
section {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
color: red;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
<!doctype html>
<html lang="en">
<head>
<title>Hello, world!</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/uno.min.css">
</head>
<body>
<div class="banner">Publicidad<br><img src="img/banner.jpg"></div>
<div class="navbar" id="myTopnav">
<a href="#home">Inicio</a>
<a href="#news">Noticias</a>
<div class="dropdown">
<button class="dropbtn">Iniciar sesión
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<form method="post" action="/login.phtml">
<input type="hidden" id="templateLoginDest" name="destination" value="%2F">
<table style="width: 350px;" align="center">
<tbody><tr>
<td valign="top" width="100px"><b>Usuario:</b></td>
<td valign="top"><input type="text" name="username" id="templateLoginPopupUsername" size="30"></td>
</tr>
<tr>
<td valign="top"><b>Contraseña:</b></td>
<td valign="top"><input type="password" name="password" size="30"><br><a href="/account/passwordreset.phtml" style="font-size: 8pt;">Recordar contraseña</a><br><br></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="Entrar!"></td>
</tr>
</tbody></table>
</form>
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
</div> 
</div>
<script>function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "navbar") {
        x.className += " responsive";
    } else {
        x.className = "navbar";
    }
}
</script>
<div><section>a</section></div>
<div class="div2">b</div>
</body>
</html>

1
  • Gracias, no lo había notado!
    – Matias
    Commented el 13 nov. 2017 a las 20:17

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.