Título: AYUDA, PROBLEMAS CON BOOTSTRAP
Publicado por: RicardoGonzalez17 en 14 Noviembre 2017, 09:03 am
Tengo días viendo tutorial de como hacer un navbar, y si ya me agarre varios códigos tal cual y como dicen en los vídeos, pero no se que esta pasando que al momento de ver la navbar en mi pagina no se ve bien, y tengo el código tal, cual, tengo jquery y bootstrap en mi proyecto, les anexo las imágenes de como se ve el navbar en mi pagina y el código
(http://imageshack.com/a/img922/5841/ywiNZC.png)
(http://imageshack.com/a/img922/1262/YJ9tXu.png)
Y EL CÓDIGO
(http://imageshack.com/a/img922/1517/TsuMr9.png)
Y ESTO ES PARA QUE VEAN COMO TENGO IMPORTADO BOOTSTRAP Y JQUERY, ¿ESTA BIEN? (http://imageshack.com/a/img923/5291/5yWu4x.png)
MOD: Imagenes adapatadas a lo permitido.
Título: Re: AYUDA, PROBLEMAS CON BOOTSTRAP
Publicado por: JulianPerez15 en 14 Noviembre 2017, 11:10 am
Hola, sino pudiste resolverlo, podrías pasar el código de estilos.css? O solo estás usando el de bootstrap? Yo todavía no lo entiendo así que los hago a mano o copio de otros lados :) HTML <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()">☰</a> </div> </div> <script>function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "navbar") { x.className += " responsive"; } else { x.className = "navbar"; } } </script> CSS .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; } .article.responsive { position: relative; } } .navbar.responsive a { float: none; display: block; text-align: left; } El único problema que no solucione con este código este de que el header después sea responsive, pero un footer ya lo toma responsive ;D Ahí esos te pueden servir de ejemplo o si tenes alguna duda posteala, yo estoy recién empezando pero no le dan mucha atención a estas cosas acá :rolleyes:
Título: Re: AYUDA, PROBLEMAS CON BOOTSTRAP
Publicado por: RicardoGonzalez17 en 15 Noviembre 2017, 02:45 am
Hola, sino pudiste resolverlo, podrías pasar el código de estilos.css? O solo estás usando el de bootstrap? Yo todavía no lo entiendo así que los hago a mano o copio de otros lados :) HTML <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()">☰</a> </div> </div> <script>function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "navbar") { x.className += " responsive"; } else { x.className = "navbar"; } } </script> CSS .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; } .article.responsive { position: relative; } } .navbar.responsive a { float: none; display: block; text-align: left; } El único problema que no solucione con este código este de que el header después sea responsive, pero un footer ya lo toma responsive ;D Ahí esos te pueden servir de ejemplo o si tenes alguna duda posteala, yo estoy recién empezando pero no le dan mucha atención a estas cosas acá :rolleyes: MUCHAS GRACIAS AMIGO, era precisamente problemas del css, gracias de verdad
|