Hola, tengo un problema con mi menú de navegación. He de decir que soy novata y autodidacta, y que voy creando la página a partir de una plantilla y de recursos por lo que seguramente tendré liada alguna. Espero que alguien me desenrede.
La primera pestaña "fotografia" funciona perfectamente, la segunda "videos" también, pero al pasar a la tercera la imagen de encabezado se encaja al final de la pestaña "videos" y no continua fluida la navegación. ¿A qué puede deberse?
Este es el código:
<div id="container"> <ul id="myTab1" class="nav nav-tabs"> <li class="active"><a href="#home1" data-toggle="tab">Fotografía de bodas</a></li> <li> <a href="#pane2" data-toggle="tab">VIDEO DE BODAS</a> </li> <li> <a href="#pane3" data-toggle="tab">MATERNIDAD</a> </li> <li> <a href="#pane4" data-toggle="tab">BEBÉS</a> </li> <li> <a href="#pane5" data-toggle="tab">Familia</a> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Extras <span class="caret"></span> <ul class="dropdown-menu"> <li> <a href="#pane6" data-toggle="tab">Otros</a> </li> </ul> </a> <li> <a href="#pane7" data-toggle="tab">Diseño</a> </li> <li> <a href="#pane8" data-toggle="tab">Productos</a> </li> </li></ul></div> <div id="myTabContent1" class="tab-content"> <div class="tab-pane fade in active" id="home1"> <img src="img/boda.png" alt="boda"> <h3>Bodas</h3> <p align="justify">A la hora de inmortalizar unos instantes tan especiales como los de vuestra boda, tratamos de tener el máximo contacto con vosotros, con el fin de conocernos mejor, organizarnos y perfilar todo tipo de detalles. </p> <p align="justify">Por eso, en primer lugar, y después de una reunión previa dónde hayamos pactado bien todos los detalles, haríamos una <b>PREBODA</b>. Ésta consiste en un reportaje distendido, previo a la boda y con ropa de calle para que vayáis perdiendo el miedo a la cámara y os sintáis cómodos con nosotros. De esta forma, ese día de nervios, vuestras fotos reflejarán a la perfección la magia de tan esperado momento. Además, será una gran oportunidad de conocer cual será el estilo del reportaje “definitivo”. Lo verdaderamente importante es que este día sea el que siempre habéis soñado y que podáis disfrutar de un recuerdo maravilloso el resto de vuestras vidas.<br> <br>Por nuestra parte, trabajaremos duro para que sintáis que mereció la pena. <br> <br>Todos los reportajes incluyen: Preboda + Reportaje (Preparativos de la novia, preparativos del novio, ceremonia, celebración, corte de tarta y baile nupcial) <!-- Highlights - jumbotron --> <h3 align="center">PACKS</h3> <div class="col-lg-4"><h3 align="center">“Boda básica”</h3> <p class="text-justify">Contendrá 150 fotos de la boda y 20 fotos de la preboda totalmente retocadas y en formato JPG con una resolución para su correcta impresión en papel en tamaño 10x15. Incluye 20 fotos impresas en tamaños a elegir hasta 20x30 y 2 pósters de 50x70cm. Existe además la posibilidad de adquirir aparte el pendrive con las fotos en alta calidad.</p> </div> </p> <div class="col-lg-4"><h3 align="center">“Boda álbum + archivos” </h3> <p class="text-justify">Boda + Álbum digital 30x40 o 35x35 (60 páginas) + Archivos procesados y en Alta Calidad </p> </div> <div class="col-lg-4"><h3 align="center">“Boda completa”</h3> <p align="justify">Boda + Álbum digital 30x40 o 35x35 (60 páginas) + dos álbumes pequeños para padres + Archivos procesados y en Alta Calidad. </p> </div> <p align="justify"> </p></div> <br> <br> <div class="tab-pane fade" id="pane2"> <img src="img/preboda.png" alt="videodeboda"> <h3>Video de Bodas</h3> <p align="justify">Hay varios paquetes </p> <p align="justify">Pos detalles, haríamos una <b>PREBODA</b>. do maravilloso el resto de vuestras vidas.<br> <br>Por nuestra parte, trabajaremos duro para que sintáis que mereció la pena. <br> <br>Todos los reportajes incluyen: Preboda + Reportaje (Preparativos de la novia, preparativos del novio, ceremonia, celebración, corte de tarta y baile nupcial) <!-- Highlights - jumbotron --> <h3 align="center">PACKS</h3> <div class="col-lg-4"><h3><p align="center">“Mi gran dia” </p></h3> <p class="text-justify">Dos operadores de cámara cubrirán desde las casas de los novios hasta el baile nupcial. La boda en una película de alta definición de entre 20 y 30 minutos aproximadamente, ideal para aquellos que quieran captar todos los detalles ya que cuatro ojos ven más que dos. Video diferente, con estilo cinematográifo, sonido, emociones, impresiones, entrevistas a los invitados y un toque especial, moderno, romántico y artístico. </p></div> </p> <div class="col-lg-4"><h3><p align="center">Video “Different” barra libre con “videocall” </p></h3> <p class="text-justify">El video más loco y divertido, con los mejores momentos de tus invitados durante la barra libre y sus dedicatorias más alocadas, caracterizados con pelucas, gafas y objetos variopintos. (Duración aproximada 2 horas). </p> </div> <div class="col-lg-4"><h3><p align="center">“Video-invitación” </p></h3> <p align="justify">Para los que quieran anunciar su gran día de una forma original y novedosa. </p> <p align="center"><h3>“Video Preboda o Postboda”</h3> <p align="justify">DESCRIBIR ggjhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh </p> </p></div> < </p></article></div> <div class="tab-pane fade" id="pane3"> <img src="img/embarazadas.png" alt="embarazadas"> <p>FUNCIONA O QUE </p> </div> <div class="tab-pane fade" id="pane5"> <p> foto de damilia </p> </div> <br><br><br><br><h3><div><em class="fa fa-home color"></em> Pregunta</div></h3><p>Si tienes más preguntas no dudes en consultar nuestra sección <a href="preguntas.html">preguntas frecuentes</a>.</p></div>
Respuestas
No entiendo bien a que te referís cuando decís que la imagen del encabezado se encaja al final de la pestaña videos.
Interpreto que tenes una imagen que ocupa todo el ancho de la pantalla con un alto X, y que debajo tenes 3 pestañas, es así ?
Si estas utilizando bootstrap ten encuenta ésto:
La estructura del sistema de grillas debe respetar lo siguiente:
<div class="container">
<div class="row">
<div class="col-md-4">
<!--
al definir un nuevo row dentro de una columna, tenes que imaginar que esa columna representa todo el ancho disponible,
por lo que internamente tenes 12 columnas más par usar
-->
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-8"></div>
</div>
</div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
</div>
@MrXXX0323
12 enero 2016, 18:54
Como el comentario anterior mencionó sigue esa estructura, usa .row para separar las filas y evitar problemas en la posición. Con respecto a tu problema con la tercera pestaña no entiendo bien como es que deseas que funcione si podrías explicar un poco más podríamos ayudarte. Saludos.
@lmar_copl
12 enero 2016, 23:18