CSS - Problema con estructura de la web

Problema con estructura de la web

Publicado por Lucas (4 intervenciones) el 27/10/2017 20:59:34

Buen dia comunidad, antes que nada les comento que soy nuevo en este foro pero lo vengo siguiendo desde hace un tiempo, y si estoy posteando un lugar equivocado desde ya mis disculpas. Les queria pedir su ayuda, estoy tratando de agregar un script en una web, es de un motor de busqueda de vuelos y reservas de hoteles. Bueno resulta que cuando coloco el codigo script del buscador se "desconfigura" el header y el footer de la pagina, ¿a que se puede deber esto? Estuve viendo la hoja de estilos css y el maquetado paraciera estar bien hecho, ya que si quito el script del buscador la pagina se ve bien. A continuacion adjunto unas imagenes para que se comprenda, y el codigo del buscador, muchisimas gracias!

Codigo:

<script>(function(){

  var d = document, s = d.getElementsByTagName('script')[0], js = d.getElementById('olap-jssdk');

  if (js) return;

  js = d.createElement('SCRIPT');

  js.id = 'olap-jssdk';

  js.src = '//plus.ola.com.ar/embed.js?tok=caac0d1fcdcdf69fb3da989507';

  s.parentNode.insertBefore(js, s);

}())</script>

<div id="olap-search" data-olap-layout="1" data-olap-width="320" data-olap-url="mi-pagina-web" data-olap-tabs="5" data-olap-fore-color="FFFFFF" data-olap-button-color="E77841"></div>

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 8

Val: 160

Problema con estructura de la web

Publicado por Lopez (38 intervenciones) el 30/10/2017 16:22:28

Hola Lucas,

Bueno, seria ideal nos compartieras la estructura de tu documento,
pues posiblemente radique en donde esta siendo insertado tu div #olap-search.

Saludos!

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Problema con estructura de la web

Publicado por Lucas (4 intervenciones) el 31/10/2017 00:19:49

Por supuesto! Adjunto el codigo de mi hoja css. Muchas gracias!

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

html, body {margin: 0; padding: 0;}

body {font-size:100%; font-family: 'Source Sans Pro', Arial, sans-serif; color: #333; background: url('img/sky.png') no-repeat center top #fff;}

ul, ol {list-style: none; margin:0; padding:0;}

img, a img {border: none;}

img {vertical-align: middle;}

article, aside, figure, footer, header, hgroup, nav {display: block;}

h1, h2, h3, h4, h5, h6 {font-size: 1em; font-weight: normal; margin: 0; padding: 0;}

/* Estilos */

.wrap {display: block; width: 960px;  margin: 0 auto;}

.clear {display: block; clear: both;}

#main {background: #fff; padding-top: 20px;}

header.h-home {height: 192px; padding-top: 15px;}

header.h-page {height: 142px; padding-top: 15px;}

header.h-page .isologo {display: block; margin: 0 auto;}

.h-logo {float: left; margin-top: 50px;}

.h-iso {float: right;}

header nav {float: left; clear: both;}

header nav ul {position: relative; display: block; width: 960px; height: 44px;}

header nav ul li.navli {float: left; display: block; width: 132px; height: 44px; border-left: 1px solid #e06534;}

header nav ul li.big {width: 142px !important;}

header nav ul li.navli a.nava:hover, header nav ul li a.activo {background: #6600a1 !important;}

header nav ul li.navli a.nava {

	display: block; background: #e77843;

	line-height: 44px; text-decoration: none; color: #fff; font-size: 14px; text-align: center; text-transform: uppercase;}

header nav ul li.navli:first-child {border-left: none;}

.submenu-a, .submenu-r {

	position: absolute; left: 0px; bottom: -395px; border-top: 4px solid #6600a1; border-bottom: 1px solid #e77843;

	display: none; background: rgba(248,249,249,0.9); width: 960px; height: 391px; z-index: 9;}

.submenu-a li.destino, .submenu-r li.destino {display: block; float: left; width: 150px; padding: 20px; position: relative; z-index: 9;}

li.destino h2, li.destino ul, li.destino ul li, li.destino ul li a {position: relative; z-index: 9;}

li.destino h2 { padding-bottom: 8px;

	text-transform: uppercase; font-weight: bold; font-size: 13px; color: #444; border-bottom: 2px solid #444;}

li.destino:hover h2 {color: #57008a; border-bottom: 2px solid #57008a;}

li.destino ul {width: 150px;}

li.destino ul li a {

	display: block; width: 150px; height: 20px; line-height: 20px; padding-bottom: 6px; padding-top: 9px;

	color: #666; border-bottom: 1px solid #999; text-decoration: none; font-size: 13px;}

li.destino ul li a:hover {font-weight: bold;}

.america:hover .submenu-a {display: block;}

.submenu-a .active {position: absolute; top: -16px; left: 197px;}

.mundo:hover .submenu-r {display: block;}

.submenu-r .active {position: absolute; top: -16px; left: 338px;}

.slider {position: relative; z-index: 5; display: block; width: 960px; height: 395px; margin: 0 auto 20px auto; overflow: hidden; background: #fff;}

#slides li {position: relative;}

#slides li .s-info {position: absolute; bottom: 30px; left: 45px; display: block; width: 850px; height: 60px;}

.s-info {position: relative;}

.s-info h2, .s-info p {display: block; width: 660px; margin: 0; color: #fff; text-shadow: 0px 0px 4px #666;}

.s-info h2 {font-size: 35px; text-transform: uppercase;}

.s-info p {font-size: 15px;}

.s-info a {

	position: absolute; bottom: 0; right: 0; display: block; width: 158px; height: 44px; line-height: 44px;

	background: #e77843; text-align: center; color: #fff; text-decoration: none; text-transform: uppercase;}

.slidesjs-previous, .slidesjs-next {display: block; width: 35px; height: 35px; position: absolute; top: 180px; z-index: 999; cursor: pointer;}

.slidesjs-previous {background: url('img/prev.png'); left: 0px;}

.slidesjs-next {background: url('img/next.png'); right: 0px;}

.l-col, .r-col {display: block; margin-bottom: 60px;}

.l-col {float: left; width: 650px;}

.r-col {float: right; width: 300px;}

.l-col h3, .r-col h3 {font-size: 20px; font-weight: bold; color: #e77843; margin-bottom: 20px; text-transform: uppercase;}

.paquete {position: relative; display: block; width: 300px; height: 170px; float: left; background: #fff; margin: 0 20px 18px 0; border: 1px solid #ccc;}

.p-foto {position: absolute; top: 0px; left: 0px; z-index: 5;}

.p-blur {position: absolute; top: 0px; right: 0px; z-index: 7;}

.p-info {position: relative; z-index: 7; display: block; width: 165px; height: 120px; margin: 30px 0 0 130px;}

.p-info h4 {margin: 0; font-size: 14px; font-weight: bold; text-transform: uppercase; color: #333;}

.p-info p {margin: 12px 0; font-size: 12px; color: #666;}

.p-info a {

	display: block; width: 85px; height: 30px; background: #e77843;

	line-height: 30px; text-align: center; font-size: 15px; color: #fff; text-transform: uppercase; text-decoration: none;}

.breadcrumb {color: #666; display: block; margin-bottom: 10px;}

.breadcrumb a {color: #e77843; text-decoration: none;}

.breadcrumb a:hover {text-decoration: underline;}

.facebox {display: block; width: 300px; height: 300px; margin-bottom: 20px;}

.r-col form {display: block; background: #fff; border: 1px solid #ccc; padding: 10px;}

.r-col form label {display: block; font-size: 13px; margin-bottom: 14px;}

.r-col form .n-campo {display: block;  width: 264px; padding: 4px 6px; border: 1px solid #ccc; outline: none; font-size: 12px; color: #666; margin-bottom: 14px;}

.r-col form .n-submit, .submit {

	border: 0; outline: 0; display: block; width: 85px; height: 30px; background: #e77843; cursor: pointer;

	line-height: 30px; text-align: center; font-size: 15px; color: #fff; text-transform: uppercase; text-decoration: none;}

.text p, .list ul {max-width: 610px; font-size: 15px; line-height: 20px; margin: 20px 0;}

.list ul li {list-style-type: disc; list-style-position: inside; margin-bottom: 8px;}

.text form ul {display: block; width: 290px; height: 180px; float: left;}

.text form ul:first-child {margin-right: 30px;}

.text form label {display: block; font-size: 12px; color: #666; margin-bottom: 4px;}

#consulta {min-height: 145px !important; margin-bottom: 30px;}

.campo, .consulta {border: 0; outline: 0; padding: 0 6px; width: 264px; border: 1px solid #ccc; line-height: 28px; font-family: Arial, sans-serif; color: #666;}

.campo {height: 26px; margin-bottom: 12px;}

.consulta {height: 143px; resize: none;}

.capcha {display: block; clear: both; width: 610px; height: 30px;}

.capcha label, .capcha .campo {float: left;}

.capcha label {display: inline-block; width: 320px; height: 28px; line-height: 32px; margin-bottom: 0px !important; font-size: 14px;}

.capcha label strong {color: red;}

.capcha .campo {width: 80px !important;}

.capcha .submit {display: inline-block !important; float: right;}

#contacto ul li, #consulta ul li {position: relative;}

.error {position: absolute; top: 0px; right: 0px; font-size: 12px; color: #e77843;}

.send {display: block; position: relative; clear: both;}

.error-calc {position: absolute; right: 111px; bottom: -30px; font-size: 12px; color: #e77843;}

.error-calc-consulta {position: absolute; right: 111px; bottom: -10px; font-size: 12px; color: #e77843;}

.c-submit {

	float: right; border: 0; outline: 0; display: inline-block; width: 85px; height: 30px; background: #e77843; cursor: pointer;

	line-height: 30px; text-align: center; font-size: 15px; color: #fff; text-transform: uppercase; text-decoration: none;}

#consultar {margin-bottom: 0 !important;}

.ok {display: block;  clear: none; color: #6600a1; font-weight: bold; margin-bottom: 25px;}

.boton {

	border: 0; outline: 0; background: #e77843; cursor: pointer; padding: 4px 10px;

	line-height: 30px; text-align: center; font-size: 15px; color: #fff; text-transform: uppercase; text-decoration: none;}

html, body {height: 100%;}

.wrapper {min-height: 100%; height: auto !important; height: 100%;	margin: 0 auto -140px}

.footer, .push {height: 140px;}

footer {display: block; clear: both; background: #fff;}

footer .iso-foot {float: left;}

footer .cdata {float: left; margin: 10px 0 0 30px; font-size: 13px; color: #666;}

.cdata li {margin-bottom: 4px;}

.cdata li img {margin-right: 10px;}

footer .icons {float: right; display: block; width:200px; height: 70px; margin-top: 10px;}

footer .icons li {float: right; display: block; width: 120px; height: 25px; margin: 10px 20px 0 0; text-align: right;}

footer .icons li:first-child {float: right; width: 44px; height: 59px; margin: 10px 0 0 0;}

footer .copyr {display: block; height: 47px; line-height: 47px; clear: both; background: #e77843; color: #fff;}

footer .copyr p {float: left; display: block; height: 47px; line-height: 47px; margin: 0; font-size: 15px;}

footer .copyr .ppi {float: right;}

/* Fancybox */

.fancybox-wrap, .fancybox-skin, .fancybox-outer, .fancybox-inner, .fancybox-image, .fancybox-wrap iframe, .fancybox-wrap object, .fancybox-nav, .fancybox-nav span, .fancybox-tmp

{padding: 0; margin: 0; border: 0; outline: none; vertical-align: top;}

.fancybox-wrap {position: absolute; top: 0; left: 0; z-index: 8020;}

.fancybox-skin {	position: relative; display: block; text-shadow: none;}

.fancybox-opened {z-index: 8030;}

.fancybox-outer, .fancybox-inner {position: relative;}

.fancybox-inner {overflow: hidden; padding: 20px; background: #fff;}

.fancybox-type-iframe .fancybox-inner {-webkit-overflow-scrolling: touch;}

.fancybox-error {color: #444; font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; margin: 0; padding: 15px; white-space: nowrap;}

.fancybox-image, .fancybox-iframe {display: block; width: 100%; height: 100%;}

.fancybox-image {max-width: 100%; max-height: 100%;}

#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {	background-image: url('img/fancybox/fancybox_sprite.png');}

#fancybox-loading {position: fixed; top: 50%; left: 50%; margin-top: -22px; margin-left: -22px; background-position: 0 -108px; opacity: 0.8; cursor: pointer; z-index: 8060;}

#fancybox-loading div {width: 44px; height: 44px; background: url('img/fancybox/fancybox_loading.gif') center center no-repeat;}

.fancybox-close {position: absolute; top: -18px; right: -58px; width: 36px; height: 36px; cursor: pointer; z-index: 8040;}

.fancybox-nav {position: absolute; top: 0; width: 40%; height: 100%; cursor: pointer; text-decoration: none; background: transparent url('img/fancybox/blank.gif'); -webkit-tap-highlight-color: rgba(0,0,0,0); z-index: 8040;}

.fancybox-prev {left: 0;}

.fancybox-next {	right: 0;}

.fancybox-nav span {position: absolute; top: 50%; width: 36px; height: 34px; margin-top: -18px; cursor: pointer; z-index: 8040; visibility: hidden;}

.fancybox-prev span {left: 10px; background-position: 0 -36px;}

.fancybox-next span {right: 10px; background-position: 0 -72px;}

.fancybox-nav:hover span {visibility: visible;}

.fancybox-tmp {position: absolute; top: -99999px; left: -99999px; visibility: hidden; max-width: 99999px; max-height: 99999px; overflow: visible !important;}

.fancybox-lock {	overflow: hidden;}

.fancybox-overlay {position: absolute; top: 0; left: 0; overflow: hidden; display: none; z-index: 8010; background: url('img/fancybox/fancybox_overlay.png');}

.fancybox-overlay-fixed {position: fixed; bottom: 0; right: 0;}

.fancybox-lock .fancybox-overlay {overflow: auto; overflow-y: scroll;}

Valora esta respuesta

Comentar

Problema con estructura de la web

Publicado por Lucas (4 intervenciones) el 31/10/2017 00:39:52

Olvidaba colocar el codigo de la plantilla donde se encuentra el buscador.

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

<?php get_header();

add_filter('excerpt_length', 'new_excerpt_length'); ?>

<div class="slider">

	<ul id="slides">

		<?php

		    $args = array(

		        'posts_per_page' => 6,

		        'order' => ASC,

		        'category_name' => slide

);

		        $the_query = new WP_Query($args);

		            while ($the_query->have_posts()):

		                $the_query->the_post(); ?>

					<li>

						<?php

						    if ( has_post_thumbnail() ) {

						        $post_thumbnail_id = get_post_thumbnail_id();

						        $large_image = wp_get_attachment_image_src($post_thumbnail_id, 'full');

						        $w = 960; $h = 395;

						        $timthumb_url = getImg($large_image[0], $w, $h);

						        echo "<img src='$timthumb_url' width='$w' height='$h'/>";

?>

						<span class="s-info">

							<h2><?php the_title(); ?></h2>

							<p><?php echo get_post_meta($post->ID, 'resumen', true); ?></p>

							<a href="<?php the_permalink(); ?>">Más información</a>

						</span>

					</li>

		            <?php

		            endwhile;

		        wp_reset_postdata();

?>

	</ul>

</div>

<span class="wrap">

	<span class="l-col">

		<h3>Paquetes</h3>

		<?php

		    $args = array(

		        'posts_per_page' => 8,

		        'order' => ASC,

		        'category_name' => destacado

);

		        $the_query = new WP_Query($args);

		            while ($the_query->have_posts()):

		                $the_query->the_post(); ?>

					<span class="paquete">

						<?php

						    if ( has_post_thumbnail() ) {

						        $post_thumbnail_id = get_post_thumbnail_id();

						        $large_image = wp_get_attachment_image_src($post_thumbnail_id, 'full');

						        $w = 300; $h = 170;

						        $timthumb_url = getImg($large_image[0], $w, $h);

						        echo "<img class='p-foto' src='$timthumb_url' width='$w' height='$h'/>";

?>

						<img class="p-blur" src="<?php bloginfo('template_url'); ?>/img/p-blur.png">

						<span class="p-info">

							<h4>

								<?php

								    if(strlen($post->post_title)>19) {

								        $variabletitle = $post->post_title;

								        $titulomostrado = mb_substr($variabletitle,0,19,'UTF-8');

								        echo $titulomostrado."...";

								    else {

								        the_title();

?>

							</h4>

							<p><?php the_excerpt() ?></p>

							<a href="<?php the_permalink(); ?>">Ver más</a>

						</span>

					</span>

		            <?php

		            endwhile;

		        wp_reset_postdata();

?>

	</span>

	<span class="r-col">

		<h3>Compra online</h3>

<span class="facebox" style="height: 450px; margin-left: -25px;">

<div id="olap-search" data-olap-layout="1" data-olap-width="320" data-olap-url="http://dondeviajamosweb.com.ar/servicios/" data-olap-tabs="5" data-olap-fore-color="FFFFFF" data-olap-button-color="E77841"></div>

<script>(function(){

  var d = document, s = d.getElementsByTagName('script')[0], js = d.getElementById('olap-jssdk');

  if (js) return;

  js = d.createElement('SCRIPT');

  js.id = 'olap-jssdk';

  js.src = '//plus.ola.com.ar/embed.js?tok=caac0d1fcdcdf69fb3da989507bf03a7';

  s.parentNode.insertBefore(js, s);

}())</script>

</span>

		<h3>Seguinos</h3>

		<span class="facebox">

			<?php faceBox(); ?>

		</span>

        <span class="facebox" style="margin-top: -60px;">

		<h3>Newsletter</h3>

		<form>

			<label>Ingresá tu e-mail y recibí nuestro newsletter</label>

			<input type="text" class="n-campo" value="TU E-MAIL"	>

			<input type="submit" class="n-submit" value="enviar">

		</form>

		<!--newsletter-->

	</span>

</span>

<?php get_footer(); ?>

Valora esta respuesta

Comentar

Pos: 8

Val: 160

Problema con estructura de la web

Publicado por Lopez (38 intervenciones) el 31/10/2017 19:02:17

Hola Lucas,

Veo usas Wordpress, veamos si aplica:
Fijate en esta linea:

<span class="facebox" style="height: 450px; margin-left: -25px;">

Mi consejo es, no uses la etiqueta span en este tipo de funciones.

Usa en cambio, un div de esta forma:

<div class="facebox" style="height: 450px; margin: auto;">

Cuentanos que tal resulto (añade un pantallazo).
Saludos!

Valora esta respuesta

Comentar

Problema con estructura de la web

Publicado por Lucas (4 intervenciones) el 03/11/2017 16:31:37

Hola Lopez, antes que nada muchas gracias por la ayuda y pronta respuesta! Por mi parte estuve ocupado con otro proyecto por eso he demorado en responder.
Probé cambiando la etiqueta span por la etiqueta div, pero lo único que he conseguido es que el footer se vea completo (como debería) por otro lado el header sigue igual. Probé también colocando en la hoja de estilos un "clear: both" para ver si corregía algo, pero no hay caso. Alguna otra idea que pueda probar? Nuevamente muchas gracias.

Valora esta respuesta

Comentar

Efecto Css

Como agregar mas estilos en CSS sin afectar a otras etiquetas.