CSS - Problema con estructura de la web

 
Vista:
sin imagen de perfil

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:

1
2
3
4
5
6
7
8
9
10
<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>



desmaquetado1
maquetado1
script
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Lopez
Val: 160
Bronce
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

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 claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

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!


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Lopez
Val: 160
Bronce
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

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:

1
<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:

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

Cuentanos que tal resulto (añade un pantallazo).
Saludos!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

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
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar