Foros del Web » Creando para Internet » CSS »

Problema con divs

 Estas en el tema de Problema con divs en el foro de CSS en Foros del Web. Buenas tardes, tengo una página web con un menú y distintas secciones. Cada una se visualiza según la opción del menú que se elige. En ...
  #1 (permalink)  
Antiguo 22/02/2018, 08:50
 
Fecha de Ingreso: enero-2011
Ubicación: Zaragoza
Mensajes: 98
Antigüedad: 14 años
Puntos: 1
Problema con divs
Buenas tardes, tengo una página web con un menú y distintas secciones. Cada una se visualiza según la opción del menú que se elige. En pantallas grandes se ven bien pero, en pantallas pequeñas, los divs se me montan. El principio de uno con el final del otro. Tengo puesto en todos los container, 100vh. ¿Qué puedo hacer? Gracias
  #2 (permalink)  
Antiguo 22/02/2018, 09:04
Avatar de DragonX
Colaborador
  
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.433
Antigüedad: 22 años, 7 meses
Puntos: 177
Respuesta: Problema con divs
podras postear la url de ejemplo asi vemos que esta pasando?
Slds
Carlos.-
__________________
Desarrollos dosLotos
Calendario Maya, Meditación, Osho
  #3 (permalink)  
Antiguo 22/02/2018, 14:26
Avatar de g3kdigital  
Fecha de Ingreso: noviembre-2013
Ubicación: En mi apartamento en bogotá
Mensajes: 208
Antigüedad: 11 años, 1 mes
Puntos: 39
Respuesta: Problema con divs
No debería de suceder, por lo tanto el error debe ser en el código que usas y sin verlo es dificil ayudarte.
__________________
Puedes ser el tipo de persona que se amarga por lo inevitable o aceptar el reto de superarse siempre e ir a la par con el progreso.

WEB: G3K.co | codepen.io/g3kdigital
  #4 (permalink)  
Antiguo 27/02/2018, 08:08
 
Fecha de Ingreso: enero-2011
Ubicación: Zaragoza
Mensajes: 98
Antigüedad: 14 años
Puntos: 1
Respuesta: Problema con divs
Os pongo el código

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/bootstrap-grid.min.css"/>
<script src="js/smooth-scroll.min.js"></script>
<script>
smoothScroll.init({
selector: '[data-scroll]', // Selector for links (must be a class, ID, data attribute, or element tag)
selectorHeader: null, // Selector for fixed headers (must be a valid CSS selector) [optional]
speed: 1500, // Integer. How fast to complete the scroll in milliseconds
easing: 'easeInOutCubic', // Easing pattern to use
offset: 0, // Integer. How far to offset the scrolling anchor location in pixels
callback: function ( anchor, toggle ) {} // Function to run after scrolling
});
</script>
<script>
$(document).ready(function(){
$(".nav-link").click(function () {
$('.navbar-toggler').click();
});
});

</script>
<title>Turibamba</title>

<style>
html, body{
height: 100vh;
}

.slider-inicio{
background:url("imagenes/fondo1.jpg");
height: 100vh;
background-size: cover;
background-position: center;
}
.fondo-galeria1{
background:url("imagenes/back5.jpg");
height: 100vh;
background-size: cover;
background-position: center;
}
</style>
</head>
<body>
<!-- Menú -->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top">
<a data-scroll class="navbar-brand" href="#inicio">
<img src="imagenes/logo.png" width="30px" height="30px" class="d-inline-block align-top" alt="Turibamba Ocio"/>Turibamba</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto text-center">
<li class="nav-item active">
<a data-scroll class="nav-link" href="#inicio">Inicio</span></a>
</li>
<li class="nav-item">
<a data-scroll class="nav-link" href="#cumpleaños">Cumpleaños</a>
</li>
<li class="nav-item">
<a data-scroll class="nav-link" href="#animaciones">Animaciones</a>
</li>
<li class="nav-item">
<a data-scroll class="nav-link" href="#despedidas">Despedidas</a>
</li>
<li class="nav-item">
<a data-scroll class="nav-link" href="#nosotras">Nosotras y el parque</a>
</li>
<li class="nav-item">
<a data-scroll class="nav-link" href="#galeria">Galería</a>
</li>
<li class="nav-item">
<a data-scroll class="nav-link" href="#tarifas">Tarifas</a>
</li>
<li class="nav-item">
<a data-scroll class="nav-link" href="#contacto">Contacto</a>
</li>
</ul>
</div>
</nav>
<!-- Fin menú -->
<!-- Inicio -->
<div class="container-fluid slider-inicio d-flex justify-content-center align-items-center" id="inicio">
<div class="row flex-column">
<div class="col-12 d-flex justify-content-center align-items-center pb-5"><img class="img-fluid" src="imagenes/turibamba.png"/></div>
<h4 class="font-weight-bold d-flex justify-content-center pt-5">C/ Batalla de Arápiles, 24 (La Almozara)</h4>
</div>
</div>
<!-- Fin del Inicio-->

<!-- Inicio de cumpleaños -->
<div class="container-fluid" style="padding-top: 80px; height: 100vh; overflow: auto;" id="cumpleaños">
<div class="container">
<div class="row flex-column">
<div class="col-12 d-flex justify-content-center pb-3">
<h1>Cumpleaños</h1>
</div>
</div>
<div class="card-deck">
<div class="card">
<img class="card-img-top" src="imagenes/Slide-1.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<a class="btn btn-primary" href="#" role="button">Link</a>
</div>
</div>
<div class="card">
<img class="card-img-top" src="imagenes/Slide-2.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<a class="btn btn-primary" href="#" role="button">Link</a>
</div>
</div>
<div class="card">
<img class="card-img-top" src="imagenes/Slide-3.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<a class="btn btn-primary" href="#" role="button">Link</a>
</div>
</div>
</div>
</div>
</div>
<!-- Fin de cumpleaños -->

<!-- Inicio Jumbotron Animaciones-->
<div class="container-fluid" style="padding-top: 80px; height: 100vh; overflow: auto;" id="animaciones">
<div class="row flex-column">
<div class="col-12 d-flex justify-content-center pb-3">
<h1>Animaciones</h1>
</div>
</div>
<div class="jumbotron rounded-0">
<div class="container">
<h1 class="display-3">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<div class="d-flex justify-content-between align-items-center">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div>
</div>
</div>
</div>
<!-- Fin Jumbotron animaciones -->

<!-- Inicio Jumbotron despedidas-->
<div class="container-fluid" style="padding-top: 80px; height: 100vh; overflow: auto;" id="despedidas">
<div class="row flex-column">
<div class="col-12 d-flex justify-content-center pb-3">
<h1>Despedidas</h1>
</div>
</div>
<div class="jumbotron mt-5 rounded-0">
<div class="container">
<h1 class="display-3">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<div class="d-flex justify-content-between align-items-center">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div>
</div>
</div>
</div>
<!-- Fin Jumbotron despedidas-->

<!-- Inicio de la galería-->
<div class="container-fluid fondo-galeria1" style="padding-top: 80px; height: 100vh; overflow: auto;" id="galeria">
<div class="row flex-column">
<div class="col-12 d-flex justify-content-center pb-3">
<h1>Galería</h1>
</div>
</div>
<div class="container">
<div id="carouselExampleIndicators" class="carousel slide pt-1" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100 h-100" src="imagenes/Slide-1.jpg" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h5>Primera foto</h5>
<p>Esta es la primera foto del carrusel</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100 h-100" src="imagenes/Slide-2.jpg" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h5>Segunda foto</h5>
<p>Esta es la segunda foto del carrusel</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100 h-100" src="imagenes/Slide-3.jpg" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h5>Tercera foto</h5>
<p>Esta es la tercera foto del carrusel</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<!-- Fin de la galería -->
Os pongo un trozo porque no me deja más. Espero os valga. Gracias.
  #5 (permalink)  
Antiguo 27/02/2018, 11:39
Avatar de Rafael
Modegráfico
  
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años, 9 meses
Puntos: 1826
Respuesta: Problema con divs
No creo que nadie revise el código así.

Pon lo relevante en un jsfiddle.net o un codepen.io
  #6 (permalink)  
Antiguo 28/02/2018, 03:18
 
Fecha de Ingreso: enero-2011
Ubicación: Zaragoza
Mensajes: 98
Antigüedad: 14 años
Puntos: 1
Respuesta: Problema con divs
Os pongo lo más relevante del código.
Código CSS: 
Ver original
  1. <style>
  2. html, body{
  3. height: 100vh;
  4. }
  5.  
  6. .slider-inicio{
  7. background:url("imagenes/fondo1.jpg");
  8. height: 100vh;
  9. background-size: cover;
  10. background-position: center;
  11. }
  12. .fondo-galeria1{
  13. background:url("imagenes/back5.jpg");
  14. height: 100vh;
  15. background-size: cover;
  16. background-position: center;
  17. }
  18. </style>
Código HTML: 
Ver original
  1. <body>
  2. <!-- Menú --> 
  3. <nav class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top">
  4. <a data-scroll class="navbar-brand" href="#inicio">
  5. <img src="imagenes/logo.png" width="30px" height="30px" class="d-inline-block align-top" alt="Turibamba Ocio"/>Turibamba</a>
  6. <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  7. <span class="navbar-toggler-icon"></span>
  8. </button>
  9.  
  10. <div class="collapse navbar-collapse" id="navbarSupportedContent">
  11. <ul class="navbar-nav mr-auto text-center">
  12. <li class="nav-item active">
  13. <a data-scroll class="nav-link" href="#inicio">Inicio</span></a>
  14. </li>
  15. <li class="nav-item">
  16. <a data-scroll class="nav-link" href="#cumpleaños">Cumpleaños</a>
  17. </li>
  18. <li class="nav-item">
  19. <a data-scroll class="nav-link" href="#animaciones">Animaciones</a>
  20. </li>
  21. <li class="nav-item">
  22. <a data-scroll class="nav-link" href="#despedidas">Despedidas</a>
  23. </li>
  24. <li class="nav-item">
  25. <a data-scroll class="nav-link" href="#nosotras">Nosotras y el parque</a>
  26. </li>
  27. <li class="nav-item">
  28. <a data-scroll class="nav-link" href="#galeria">Galería</a>
  29. </li>
  30. <li class="nav-item">
  31. <a data-scroll class="nav-link" href="#tarifas">Tarifas</a>
  32. </li>
  33. <li class="nav-item">
  34. <a data-scroll class="nav-link" href="#contacto">Contacto</a>
  35. </li>
  36. </ul>
  37. </div>
  38. </nav>
  39. <!-- Fin menú -->
  40. <!-- Inicio -->
  41. <div class="container-fluid slider-inicio d-flex justify-content-center align-items-center" id="inicio">
  42. <div class="row flex-column">
  43. <div class="col-12 d-flex justify-content-center align-items-center pb-5"><img class="img-fluid" src="imagenes/turibamba.png"/></div>
  44. <h4 class="font-weight-bold d-flex justify-content-center pt-5">C/ Batalla de Arápiles, 24 (La Almozara)</h4>
  45. </div>
  46. </div>
  47. <!-- Fin del Inicio-->
  48.  
  49. <!-- Inicio de cumpleaños -->
  50. <div class="container-fluid" style="padding-top: 80px; height: 100vh; overflow: auto;" id="cumpleaños">
  51. <div class="container">
  52. <div class="card-deck">
  53. <div class="card">
  54. <img class="card-img-top" src="imagenes/Slide-1.jpg" alt="Card image cap">
  55. <div class="card-body">
  56. <h5 class="card-title">Card title</h5>
  57. <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
  58. <a class="btn btn-primary" href="#" role="button">Link</a>
  59. </div>
  60. </div>
  61. <div class="card">
  62. <img class="card-img-top" src="imagenes/Slide-2.jpg" alt="Card image cap">
  63. <div class="card-body">
  64. <h5 class="card-title">Card title</h5>
  65. <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
  66. <a class="btn btn-primary" href="#" role="button">Link</a>
  67. </div>
  68. </div>
  69. <!-- Fin de cumpleaños -->
  70.  
  71. <!-- Inicio Jumbotron Animaciones-->
  72. <div class="container-fluid" style="padding-top: 80px; height: 100vh; overflow: auto;" id="animaciones">
  73. <div class="row flex-column">
  74. <div class="col-12 d-flex justify-content-center pb-3">
  75. <h1>Animaciones</h1>
  76. </div>
  77. </div>
  78. <div class="jumbotron rounded-0">
  79. <div class="container">
  80. <h1 class="display-3">Hello, world!</h1>
  81. <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  82. <hr class="my-4">
  83. <div class="d-flex justify-content-between align-items-center">
  84. <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  85. <p class="lead">
  86. <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
  87. </p>
  88. </div>
  89. </div>
  90. </div>
  91. </div>
  92. <!-- Fin Jumbotron animaciones -->
  93.  
  94. <!-- Inicio Jumbotron despedidas-->
  95. <div class="container-fluid" style="padding-top: 80px; height: 100vh; overflow: auto;" id="despedidas">
  96. <div class="row flex-column">
  97. <div class="col-12 d-flex justify-content-center pb-3">
  98. <h1>Despedidas</h1>
  99. </div>
  100. </div>
  101. <div class="jumbotron mt-5 rounded-0">
  102. <div class="container">
  103. <h1 class="display-3">Hello, world!</h1>
  104. <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  105. <hr class="my-4">
  106. <div class="d-flex justify-content-between align-items-center">
  107. <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  108. <p class="lead">
  109. <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
  110. </p>
  111. </div>
  112. </div>
  113. </div>
  114. </div>

Ahora sí que funciona pero porque he puesto overflow auto y entonces aparecen las barras de scroll. Pero yo no quiero que aparezcan y se vea todo el contenido, uno detrás de otro sin que se superpongan.
Sólo os he puesto 3 divs pero hay más. Gracias.
  #7 (permalink)  
Antiguo 28/02/2018, 12:48
Avatar de Rafael
Modegráfico
  
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años, 9 meses
Puntos: 1826
Respuesta: Problema con divs
Usa fiddle por favor: https://jsfiddle.net/fs2w13u7/

Tu código no está funcionando.

Al usar una herramienta de estas realmente estás poniendo lo relevante y te sirve tanto para depurar como para que alguien más revise el código.

Etiquetas: divs
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 14:52.