Sobre el slideshow
Soy Manuel; he realizado mi página web en photoshop, html5 y por último en css3, pero en ésta última parte no me aparecen los botones de slideshow para visualizar la imágenes, podrías revisar la parte del código de css del slideshow para ver dónde he cometido el error.
1 respuesta
Claro, pero necesito que me des ese código para verlo :P Pásame tanto el HTML como el CSS para localizar posibles errores.
Si has seguido un tutorial por internet para programar el slideshow en CSS, me facilitaría el trabajo si me haces llegar el link también. A veces los tutoriales se saltan pasos o son erróneos.
Te informo que el CSS es complementario al HTML (y photoshop solo es un programa, no un lenguaje). Esto significa que el HTML no cambia el diseño si no programas un CSS, y el CSS no puede funcionar sin HTML.
Si lo que no aparece son los botones para cambiar de imagen, pueden ser distintos errores (por si quieres controlarlo por ti mismo en vez de compartir código)
1. [HTML] No hay imagen de botón o la URL de la imagen (img src) es incorrecta. Siempre recomiendo usar direcciones relativas en vez de absolutas, para asegurar que vas al sitio adecuado.
2. [CSS] La clase a la que hace referencia el botón no coloca el botón en el sitio adecuado (pad, length, margin) o en la capa adecuada (z-index)
3. [HTML-CSS] La clase no está bien referenciada en el HTML, con un nombre incorrecto o en un elemento que no soporta las características de la clase CSS. Por ejemplo, si pones una clase con un contenido como "text-align: center" en un objeto de HTML <img>, se ignorará la orden, puesto que no hay elemento texto.
4. [Javascript] Si el slideshow es prefabricado (no hecho al 100% por ti) y usa archivos previamente descargados, es posible que necesites referenciar tales archivos en la cabecera (<head>) del HTML, pero esto es algo que en el mismo tutorial de donde lo hubieras sacado te lo deben indicar, ya que no tienes por qué conocer el código de los archivos externos
En cualquier caso si no encuentras el error, puedo ayudarte con ello, ya te digo, en principio me basta con que me pases el código HTML que hace referencia al slideshow (y si hay algo en la cabecera también), y todas las clases CSS que utilices en él
El tutorial para realizar la página que estoy realizando es el siguiente:
Te voy a pasar el vídeo de slideshow para ir al grano, aunque como puedes ver en enlace son 9 vídeos por si los quieres ver.
Esta parte es la que he realizado en html:
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Negocios Por Internet">
<meta name="keyword" content="Emprendedores en RED, Multinivel, Negocios por Internet">
<link rel="stylesheet" type="text/css" href="css/estilos.css"/>
<script src"http://code.jquery.com/jquery-latest.min.js"></script>
<script src"js/slides.min.jquery.js"></script>
<script>
$(function(){
$("#slideshow").slides();
});
</script>
<title>Emprendedores en RED</title>
</style>
</head>
<body>
<header>
<div id="subheader">
<div id="logotipo"><p><a href="">Emprendedores en RED</a></p></div>
<nav>
<ul>
<li><a href="#">INICIO</a></li>
<li><a href="#">¿QUIÉN ES MANUEL RUIZ?</a></li>
<li><a href="#">MULTINIVEL</a></li>
<li><a href="#">VÍDEOS</a></li>
<li><a href="#">CONTACTO</a></li>
</ul>
</nav>
</div>
</header>
<section id="wrap">
<section id="main">
<section id="slideshow">
<div class="slides_container">
<div><a href="#"><img src="Imagenes de internet/slideshow/publicidad 1.jpg"/></a></div>
<div><a href="#"><img src="Imagenes de internet/slideshow/publicidad 2.jpg"/></a></div>
<div><a href="#"><img src="Imagenes de internet/slideshow/publicidad 3.jpg"/></a></div>
</div>
</section>
Esta parte es la que he realizado en css3:
/*Slideshow*/
#slideshow {
width:920px;
height:260px;
float:left;
background:#000;
border:solid 20px #fff;
margin-bottom:10px;
overflow:hidden;
float:left;
}
#slideshow .pagination {
margin:26px auto;
width:100px;
}
#slideshow .pagination li {
float:left;
margin:0px 5px;
list-style:none;
}
#slideshow img {
width:920px;
height:260px;
overflow:hidden;
float:left;
}
#slideshow .pagination li a {
display:block;
width:12px;
height:0px;
padding-top:12px;
background:#fff;
float:left;
overflow:hidden;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
#slideshow .pagination li.current a {
background:#4b0303;
}
Muchas gracias por todo.
Me parece que "Todoexpertos" anula los links, por si son fraudulentos, así que no puedo ver ni el video ni el tutorial.
De entrada veo dos cosas que no cuadran. Una, imagino que es solo porque no me has incluido ese fragmento de CSS, pero no veo que exista la clase "slides_container" que especificas en el HTML.
No veo mucho orden en el código, parece que hay muchas referencias externas y al mismo tiempo código dentro del HTML que tendría que estar por separado. Quizás eso te ha hecho confundirte en algún paso. No encuentro en el HTML el botón para cambiar a las distintas imágenes. El CSS tiene las clases adecuadas, pero éstas deben ser llamadas en el HTML...
A ver si eso te ayuda o te dice algo nuevo, en cualquier caso no cierro la pregunta, sigo a disposición para ver si encontramos el error
Me puedes indicar la clase de "slides_container" de html dónde la puedo poder en css.y las clase de html en css. Muchas gracias por tu respuestas, todo esto me confunde muchísimo ya que no se nada de programación. Espero que me puedas ayudar.
Por cierto el videos es de youtube y se denomina curso de diseño web 9, a ver si así lo puedes visualizar. Un asludo
Claro. Piensa que programar nunca es para gente que no conoce nada. Por eso te da tantos problemas. A veces un código que te dan puede tener un error, y si no conoces el lenguaje es imposible que lo veas..
La clase, que imagino que incluirás en el archivo "estilos.css" de la carpeta "css" de tu hosting (o PC), debe seguir la estructura de las demás clases. Cada clase inicia con una almohadilla, un punto o con una palabra clave de HTML, te explico la diferencia:
1. #Clase: indica que esa clase podrá ser llamada en todos los casos en los que, en un argumento de clase, el HTML diga "clase" (lo que está tras la almohadilla), ya sea bajo un elemento HTML o bajo un argumento del mismo.
2. .Clase: indica que la clase será usada cuando, en un elemento (que bajo tu responsabilidad debe ser compatible con las órdenes de CSS como te comenté en el primer mensaje) indiques el argumento "class", por ejemplo: <div class="clase">
3. a: No se puede personalizar el nombre de la clase. Esto indica, en este caso, que todos los elementos <a> (links) que no indiquen lo contrario en su código, seguirán los parámetros que siguen
La clase "slides_container" parece una clase que ya deberías tenerla (que el tutorial tiene que habértela dado) ya que en principio no conoces las características del slideshow, que es lo que configura el elemento principal, y que quizás sea el motivo de que no tengas los botones de control de imágenes. Si tienes más archivos CSS en algún lado (si tienes archivos descargados, buscalo también) localizalo. Te recomiendo "Notepad++" que es un programa gratuito y muy bueno y cómodo para programar y no dejarte errores en el código, como corchetes abiertos o palabras que no existan, ya que colorea las etiquetas y cada nivel de paréntesis para guiarte. Además te permite buscar etiquetas concretas o textos que conozcas, como "slides_container"
No tenemos aún mucho para encontrar el problema, y sin saber programación puede que vayamos lentos, ya que no es lo mismo que yo vea todo el código y pueda localizar lo que falta, a que tu ojees el código y no sepas exactamente qué buscar.. Pero para eso estamos =) trastea un poco con lo que te he dicho a ver si sacas algo más en claro, y me cuentas =)
Un saludo!
PD: Si te corre prisa, es mejor, si tienes un amigo que sepa del tema, cercano a ti, que ambos miréis el código, que cuatro ojos ven más que dos =)
Por desgracia no conozco a nadie, tu estarías dispuesto a ayudarme a realizarlo si te paso todo lo que he realizado hasta ahora y te pagaría, pero antes he de decirme sobre cuánto me saldría todo. Un saludo
No lo siento... yo aquí trabajo voluntariamente como experto, tratando de resolver pequeñas dudas. No tengo tiempo suficiente para ayudarte con tu proyecto, y te agradezco la oferta en estos tiempos de crisis, aunque desde luego estoy a disposición de resolver dudas. Ponme en favoritos y así siempre me puedes abrir una pregunta para ello =)
Mi recomendación si de verdad no consigues avanzar, es que empieces usando un CMS. Un CMS o Content Manager System, es un tipo de webs que son prefabricadas, pero totalmente customizables, pudiendo añadir el código que quieras. En este caso, para añadir un slideshow, encontrarás diversos complementos que te harán la tarea sin complicaciones de código.
Es más fácil empezar a usar código teniendo la web estructurada, que hacerla de cero sin saber programar. De esa manera poco a poco te sentirás cómodo con el código y sabrás lo que tocas.
Uno de los CMS más comunes es Joomla. Es el que te recomiendo. Hay otros como Blogger, Wordpress o DNN, pero son más complejos para modificar.
No sé el objetivo de tu web, pero quizás es la mejor solución. Ya digo, siempre puedes preguntarme lo que necesites, basta con que me añadas como favorito en tus expertos, y así siempre me encuentras.
Si te convence la propuesta cierra la pregunta y trastea con calma con el CMS, y lo que necesites (dudas para la instalación en web del CMS, u otro tipo de dudas) ya sabes donde encontrarme =)