[SOLUCIONADO] Será la etiqueta span?

Mtf006 · #1 (**permalink**) 01/08/2014, 13:51

Hola muchachos tengo una duda.

Tengo botones asi:

<li><a href="#!/page_inicio"><span></span><strong>Inicio</strong></a></li>
<li><a href="#!/page_foto"><span></span><strong>Foto</strong></a></li>
<li><a href="#!/page_sala"><span></span><strong>Sala</strong></a></li>
<li><a href="#!/page_video"><span></span><strong>Video</strong></a></li>

Pero el cliente quiere que al cargar la pagina lo primero que se carge es Video.
Entonces la primera carga es Video. pero el primer boton INICIO no carga.
Tengo que ir a Foto y luego pinchar Inicio solo asi se visualiza.

Lo tengo ordenado de esta forma, que me parece es lo logico o al menos me funciona.

<li id="page_video">
</li>

<li id="page_inicio">
</li>
<li id="page_sala">
</li>

<li id="page_foto">
</li>

y ademas, la carga del contenido de cada seccion va asi, pero el botón VIDEO no se desplega completamente, esto va dentro de un jquerry scroll ( no se, pero creo que no tiene que ver con los jquerry y js que tiene la pagina ya que la pagina funciona bien, solo ese detalle. PD: todos los Jquerry que uso estan con la funcion de no conflict.)

<img src="images/bg_content.gif" alt="" class="bg_cont">
<div class="box"><div>
<h2 class="marg_bot1"> <a class="list-group-item"><i class="fa fa-camera"></i> Video</a>

Algun erudito

que ayude a esta mortal autodidacta!
Gracias!!!!!

caricatos · #2 (**permalink**) 01/08/2014, 19:09

Hola:

Por el código que muestras, muy poco te podría ayudar... al menos en html, veo unos tags span (creo que deberías editar el título) absurdos...

Y si el contenido lo cargas dinámicamente, los enlaces deberían funcionar (de todos modos supongo que los cancelas)... y jQuery es unsubforo de javascript...

Antes de seguir especulando, te recomiendo que expliques mejor el problema.

Saludos

Rafael · #3 (**permalink**) 02/08/2014, 13:17

La etiqueta spam... ¿marca el contenido como correo basura?

Ya, en serio. Reitero lo dicho por Caricatos... No se entendió de qué estás hablando. Pon el link a tu página de trabajo o algo así.

Mtf006 · #4 (**permalink**) 04/08/2014, 12:37

Hola. Ok.
No me traten mal.. jajaj… soy autodidacta como les conté, asi que si hay cosas mal explicadas intentaré explicarlo mejor.
Adjunto Codigo del sitio.

Gracias

Primera parte

<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">

<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700|Oswald' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css'>
<style type="text/css">
<script type="text/javascript" src="js/jquery-1.6.js" ></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/cufon-replace.js"></script>
<script type="text/javascript" src="js/Bebas_400.font.js"></script>
<script type="text/javascript" src="js/bg.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script type="text/javascript" src="js/content_switch.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script type="text/javascript" src="js/forms.js"></script>
<script type="text/javascript" src="js/cScroll.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.11.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>

<script type="text/javascript"> Cufon.now(); </script>
<script>
$(window).load(function() {
$('.spinner').fadeOut();
$('body').css({overflow:'inherit'})
})

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-2196019-1']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

</script>

<script type="text/javascript" src="lib/jquery-1.10.1.min.js"></script>

<script type="text/javascript" src="lib/jquery.mousewheel-3.0.6.pack.js"></script>

<script type="text/javascript" src="source/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css?v=2.1.5" media="screen" />

<link rel="stylesheet" type="text/css" href="source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
<script type="text/javascript" src="source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>

<link rel="stylesheet" type="text/css" href="source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
<script type="text/javascript" src="source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>

<script type="text/javascript" src="source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>

<script v="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function() {

jQuery('.fancybox').fancybox();

jQuery(".fancybox-effects-a").fancybox({
helpers: {
title : {
type : 'outside'
},
overlay : {
speedOut : 0
}
}
});

jQuery(".fancybox-effects-b").fancybox({
openEffect : 'none',
closeEffect : 'none',

helpers : {
title : {
type : 'over'
}
}
});

jQuery(".fancybox-effects-c").fancybox({
wrapCSS : 'fancybox-custom',
closeClick : true,

openEffect : 'none',

helpers : {
title : {
type : 'inside'
},
overlay : {
css : {
'background' : 'rgba(238,238,238,0.85)'
}
}
}
});

jQuery(".fancybox-effects-d").fancybox({
padding: 0,

openEffect : 'elastic',
openSpeed : 150,

closeEffect : 'elastic',
closeSpeed : 150,

closeClick : true,

helpers : {
overlay : null
}
});

jQuery('.fancybox-buttons').fancybox({
openEffect : 'none',
closeEffect : 'none',

prevEffect : 'none',
nextEffect : 'none',

closeBtn : false,

helpers : {
title : {
type : 'inside'
},
buttons : {}
},

afterLoad : function() {
this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
}
});

jQuery('.fancybox-thumbs').fancybox({
prevEffect : 'none',
nextEffect : 'none',

closeBtn : false,
arrows : false,
nextClick : true,

helpers : {
thumbs : {
width : 50,
height : 50
}
}
});

jQuery('.fancybox-media')
.attr('rel', 'media-gallery')
.fancybox({
openEffect : 'none',
closeEffect : 'none',
prevEffect : 'none',
nextEffect : 'none',

arrows : false,
helpers : {
media : {},
buttons : {}
}
});

jQuery("#fancybox-manual-a").click(function() {
jQuery.fancybox.open('1_b.jpg');
});

jQuery("#fancybox-manual-b").click(function() {
jQuery.fancybox.open({
href : 'iframe.html',
type : 'iframe',
padding : 5
});
});

jQuery("#fancybox-manual-c").click(function() {
jQuery.fancybox.open([
{
href : '1_b.jpg',
title : 'My title'
}, {
href : '2_b.jpg',
title : '2nd title'
}, {
href : '3_b.jpg'
}
], {
helpers : {
thumbs : {
width: 75,
height: 50
}
}
});
});

});

</script>

</head>

<script type="text/javascript" src="html5lightbox/html5lightbox/jquery.js"></script>
<script type="text/javascript" src="html5lightbox/html5lightbox/html5lightbox.js"></script>

Mtf006 · #5 (**permalink**) 04/08/2014, 12:42

<body onLoad="MM_preloadImages('images/icon_facebook_B.jpg','images/icon_twitter.jpg','images/icon_instagram.jpg','images/icon_facebook_a.gif')">
<div class="spinner"></div>
<div id="bg"><img src="images/bg2.gif" alt=""></div>
<div class="extra">
<div class="wrapper">
<header>
<h1><a href="index.html" id="logo"> </a></h1>
<nav class="menu">
<ul id="menu">
<li><a href="#!/page_inicio"><span></span><strong>Inicio</strong></a></li>
<li><a href="#!/page_foto"><span></span><strong>Foto</strong></a></li>
<li><a href="#!/page_sala"><span></span><strong>Sala</strong></a></li>
<li><a href="#!/page_video"><span></span><strong>Video</strong></a></li>></li>

</div>

</div>
</ul>
</nav>

</header>

<div class="main">

<article id="content">
<ul>
<li id="page_video">
<img src="images/bg_content.gif" alt="" class="bg_cont">
<div class="box"><div>
<h2 class="marg_bot1"> <a class="list-group-item"><i class="fa fa-camera"></i> Video </a>
</h2>

<div class="relative">
<div class="col1center">
<div class="scroll">
<strong class="color1"> </strong><br>

<div class="image_tn"><br>
<br>
<iframe width="560" height="315" src="//www.youtube.com/embed/P78?rel=0" frameborder="0" allowfullscreen></iframe> <br><br>
<a href="http://www.youtube.com/embed/Yn?rel=0" data-thumbnail="images/cap_video/2.jpg" class="html5lightbox" data-group="set1" title="
"><img src="images/cap_video/2.jpg" alt="">    </a><a href="http://www.youtube.com/embed/OIx?rel=0" data-thumbnail="images/cap_video/0.jpg" class="html5lightbox" data-group="set1" title="- y ucciones"><img src="images/cap_video/0.jpg" alt="">   </a><a href="http://www.youtube.com/embed/_lUds?rel=0" data-thumbnail="images/cap_video/3.jpg" class="html5lightbox" data-group="set1" title="Sonido Joe nes"><img src="images/cap_video/3.jpg" alt="">   </a><a href="http://www.youtube.com/embed/Cik?rel=0" data-thumbnail="images/cap_video/6.jpg" class="html5lightbox" data-group="set1" title=" Ruiz"><img src="images/cap_video/6.jpg" alt="">    </a><a href="http://www.youtube.com/embed/LT1Q?rel=0" data-thumbnail="images/cap_video/7.jpg" class="html5lightbox" data-group="set1" title="-Lcciones"><img src="images/cap_video/7.jpg" alt="">  
</a><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>

<br>
<br>
<br>
<br>
<br>

</div>

</div>
</div>
</div>
</div>

<li id="page_inicio">
<img src="images/bg_content.gif" alt="" class="bg_cont">
<div class="box"><div>

<h2 class="marg_bot1">y ucciones</h2>
<div class="col1">
<p>
Prouctora de eventos con gran trayectoria y servicio inolvidable. <br>
<br>
<strong class="cent">Algunos de nuestros clientes </strong> <br>

<img src= "images/image-II/jumbo.gif" alt="" /> 
<img src= "images/image-II/lider.gif" alt="" /> 
<img src= "images/image-II/isabel.gif" alt="" /> 
<br>
<br>
<br>
<br>
<br>
</br>
</p>

</div>
</div>
</div>
</li>

<li id="page_sala">
<img src="images/bg_content.gif" alt="" class="bg_cont">
<div class="box">
<div> <a href="" class="image featured"><img src="images/amplficacion-1.jpg" alt="" /></a>

<h2 class="marg_bot1"> <a class="list-group-item"><i class="fa fa-bar-chart-o"></i>  Amplificacion</a> </h2>
</h2>

<div class="col1">
<p>
Matrimonios, cumpleaños, conciertos, eventos musicales, teatrales, conferencias, etc. <br>

</div>
</div></div>
</li>

<li id="page_foto">
<img src="images/bg_content.gif" alt="" class="bg_cont">
<div class="box"><div>
<h2 class="marg_bot1"> <a class="list-group-item"><i class="fa fa-camera"></i> Galeria</a>

<div class="relative">
<div class="col1center">
<div class="scroll">

</br>
<p> <strong class="color1">Moneda</strong><br>

<a class="fancybox-thumbs" data-fancybox-group="thumb" href="fotos/galeria/la_moneda/img1.jpg"><img src=
"fotos/galeria/la_moneda/img1b.jpg" alt="" /></a>  

<a class="fancybox-thumbs" data-fancybox-group="thumb" href="fotos/galeria/la_moneda/img2.jpg"><img src=
"fotos/galeria/la_moneda/img2b.jpg" alt="" /></a>  

<a class="fancybox-thumbs" data-fancybox-group="thumb" href="fotos/galeria/la_moneda/img5.jpg"><img src=
"fotos/galeria/la_moneda/img5b.jpg" alt="" /></a>  
</p>

<p><strong class="color1">Luces</strong><br>

<a class="fancybox-thumbs" data-fancybox-group="thumb" href="fotos/galeria/c._prendo_/img1.jpg"><img src=
"fotos/galeria/c._apre._/img1b.jpg" alt="" /></a>   

<a class="fancybox-thumbs" data-fancybox-group="thumb" href="fotos/galeria/c._apre._/img5.jpg"><img src=
"fotos/galeria/c._apre._/img5b.jpg" alt="" /></a>   
</p>
<br>

</div>

</div>
</div>
</div>
</div>
</div>
</li>
</ul>

</article>
</div>
</div>

</div>
</div>
</div>

</body>
</html>

DesgraciadoGabo · #6 (**permalink**) 04/08/2014, 22:02

Brother tienes muchos errores en tu codigo, trata siempre de simplificarlo.

Con respecto a tu problema veo que tienes en el "boton" de video lo siguiente

Código:

<li><a href="#!/page_video"><span></span><strong>Video</strong></a></li>></li>

Y abajo cierras dos DIVS pero esos divs no estan dentro de tu UL y bueno es un relajo tu codigo, hice un textos respecto a los menús con <UL> y <LI> (:http://mecanizandoweb.com/noticias/nav-retando-las-tendencias-web) tal vez te sirva.

Para poder ayudarte mejor sería bueno ver la pagina donde tienes este codigo, para poder visualizar los estilos de dicho menú, sin la necesidad de que pegues todo tu codigo en el foro, lo cual hace más dificil la tarea de ayudar

Por ejemplo, tu menú viene de la siguiente forma:

Código HTML:

Ver original<li>
   <a href="#">
      <span></span>
      <strong>texto</strong>
   </a>
</li>

Lo cual esta muy mal estructurado, no metas una etiqueta dentro de tu etiqueta <A> pero te repito, muestranos el lugar donde muestres tu codigo ya trabajando, saludos

Rafael · #7 (**permalink**) 05/08/2014, 10:50

Gabo tiene los dedos llenos de razón. Todo el código está hecho mermelada.

Si lo sigues haciendo así, siempre vana a salirte problemas.

Mtf006 · #8 (**permalink**) 05/08/2014, 12:19

gracias ya me dio una idea Gabo!