Erro ao aplicar css em slide show

paulojorge3l · Dezembro 14, 2007

Olá pessoal!

Estou montando um sistema de slide show com ajuda de amigos do forun e tambem do forun Webly seguindo as dicas deles o esqueminha tá funcionando certinho mas na hora de aplicar o css o trem tá ficando tudo doido gostária que alguém me ajudase a resolver esse problema vo coloca o codigo e uma imagem de como eu imaginei o esquema pra você´s visualizarem melhor o meu problema abraço a todos.

Imagem de como deveria ser:

Link

Código que estou usando:

<html>
	   <head>
   
	   <!--#include file="conect.asp" -->
   
		   <title>S l i d e S h o w - by tmferreira</title>
				   <style><!--
			   * {
				   margin: 0;
				   padding: 0;
				   list-style: none;
				   text-decoration: none;
				   font-family: Verdana, Arial, Helvetica, Sans-Serif;
			   }
			   div#slideshow {
				   height: 250px;
				   width: 500px;
				   border: 1px solid black;
   
   
			   }
			   div#slideshow #links {
				   height: 91px;
				   width: 242px;
				   float: right;
				 ' clear: both;
				 ' width: 10%;
				   text-align: center;
				   display:inline;
				   border: 1px solid red;
   
			   }
			   
   
			 div#slideshow #links li {
				   font-size: 12px;
				   border-top: 1px solid white;
		   '		line-height: 49px;
				   display:inline;
				   height: 31px;
				   width: 80px;
   
			   }
			   div#slideshow #links li.inativo {
				   background: #EEEEEE;
				   display:inline;
				   height: 31px;
				   width: 80px;
   
			   }
			   div#slideshow #links li.ativo {
				   background: #D9D9D9;
				   display:inline;
				   height: 31px;
				   width: 80px;
   
			   }
   
   
   
   
			   div#slideshow #slides {
				   background: #BBBBBB;
		 '		 height: 100%;
					 height: 69px;
				   width: 493px;
   
   
				   color: white;
				   font-size: 14px;
			   }
			   div#slideshow #slides .visible {
				   display: block;
				   height: 69px;
				   width: 493px;
   
			   }
			   div#slideshow #slides .hidden {
				   display: none;
				   height: 69px;
				   width: 493px;
   
			   }
			   div#slideshow #slides div span {
				   display: block;
			   }
			   div#slideshow #slides .titulo{
				   font-weight: bold;
				   font-size: 16px;
				   padding: 5px 0 0 5px;
			   }
			   div#slideshow #slides .conteudo {
				   padding: 0 0 0 0;
   
			   }
		   --></style>
   
		   <script type="text/javascript">
			   var tempo;
			   var intervalo = 2000;
			   function $(campo) {
				   return document.getElementById(campo);
			   }
   
			   var $A = Array.from = function(iterable) {
				   if (!iterable) return [];
				   if (iterable.toArray) {
					   return iterable.toArray();
				   } else {
					   var results = [];
					   for (var i = 0; i < iterable.length; i++)
						   results.push(iterable[i]);
					   return results;
				   }
			   };
			   Function.prototype.bind = function() {
				   var __method = this, args = $A(arguments), object = args.shift();
				   return function() {
					   return __method.apply(object, args.concat($A(arguments)));
				   };
			   };
			   function addEvent(obj, evType, fn) { 
					   if (typeof obj == "string") {
					   if (null == (obj = document.getElementById(obj))) {
						   throw new Error("Elemento HTML não encontrado. Não foi possível adicionar o evento.");
					   }
				   }
				   if (obj.attachEvent) {
					   return obj.attachEvent(("on" + evType), fn);
				   } else if (obj.addEventListener) {
					   return obj.addEventListener(evType, fn, true);
				   } else {
					   throw new Error("Seu browser não suporta adição de eventos.");
				   }
			   }
			   function nextSlide() {
				   var divs = $('slides').getElementsByTagName('div');
				   var i;
				   for (i = 0; i < divs.length; i++) {
					   if (divs[i].className == 'visible') {
						   divs[i].className = 'hidden';
						   $('link' + (i + 1)).className = 'inativo'
						   i = (i == divs.length - 1) ? 0 : i + 1;
						   divs[i].className = 'visible';
						   $('link' + (i + 1)).className = 'ativo'
						   break;
					   }
				   }
			   }
			   function init() {
				   var as = $('links').getElementsByTagName('a');
				   var i;
				   for (i = 0; i < as.length; i++) {
					   var f = function(v) {
						   setSlide(as[v]);
					   }
					   addEvent(as[i], 'click', f.bind(this, i));
				   }
				   tempo = setInterval('nextSlide()', intervalo);
			   }
			   function setSlide(link) {
				   var divs = $('slides').getElementsByTagName('div');
				   var i;
				   for (i = 0; i < divs.length; i++) {
					   divs[i].className = 'hidden';
				   }
				   var lis = $('links').getElementsByTagName('li');
				   for (i = 0; i < lis.length; i++) {
					   lis[i].className = 'inativo';
				   }
				   link.parentNode.className = 'ativo';
				   i = parseInt(link.firstChild.data);
				   $('slide' + i).className = 'visible';
				   clearInterval(tempo);
			   }
			   addEvent(window, 'load', init);
		   </script>
   
	   </head>
	   <body>
   
	   <% connect  %>
   
   <div id="slideshow" name="slideshow">
   
   
   <div id="slides" name="slides">
   
   <%
   Dim contador
   contador = 1
   Set rs = Conn.Execute("SELECT top 3 * FROM evento order by data desc")
   If not rs.EOF Then
   Do until rs.eof 'loop
   %>
   
   <div id="slide<%=contador%>" name="slide<%=contador%>" class="visible">
   
   <img src="evento/<%=Rs("pasta")%>/img/grd/(1).jpg"  width="250px" height="160px" style="float:left; margin: 0px;  margin-right: 1px;" />
   
   <span class="conteudo">
   
   <%=Rs("nome")%>
 
   <%=Rs("data")%>
 
   
   <%
   Set rs1 = Conn.Execute("SELECT * FROM guia WHERE ide like '"&rs("idg")&"'")
   If not rs1.EOF Then
   Do until rs1.eof 'loop
   %>
   <%=Rs1("nome")%>
   <%
   rs1.MoveNext
   Loop
   Else
   End if
   %>
   
   
   </span>
   
   </div>
   
   <%
   rs.MoveNext
   contador = contador + 1
   Loop
   Else
   Response.Write(" <p>Pedimos desculpa pois ouve um problema.</p> ")
   End if
   %>
   
   </div>
   
   
   
   
   <div id="links" name="links">
   
   
   <ul>
   <%
   Dim contadora
   contadora = 1
   Set rsa = Conn.Execute("SELECT top 3 * FROM evento order by data desc")
   If not rsa.EOF Then
   Do until rsa.eof 'loop
   %>
   
   <li><img src="evento/<%=Rsa("pasta")%>/img/pqn/(1).jpg" width="80px" height="60px"/></li>
   
   <%
   rsa.MoveNext
   contadora = contadora + 1
   Loop
   Else
   Response.Write(" <p>Pedimos desculpa pois ouve um problema.</p> ")
   End if
   %>
   </ul>
   
   <ul>
   
   <%
   Dim contadorb
   contadorb = 1
   Set rsb = Conn.Execute("SELECT top 3 * FROM evento order by data desc")
   If not rsb.EOF Then
   Do until rsb.eof 'loop
   %>
   
   <li id="link<%=contadorb%>" name="link<%=contadorb%>"  class="ativo"><a  href="#"><%=contadorb%></a></li>
   
   <%
   rsb.MoveNext
   contadorb = contadorb + 1
   Loop
   Else
   Response.Write(" <p>Pedimos desculpa pois ouve um problema.</p> ")
   End if
   %>
   </ul>
   
   </div>
   
   </div>
   
   <% disconnect %>
   </body>
   </html>

brcontainer · Dezembro 14, 2007

você teria um link esta muito dificil pois não tenho ASP

para rodar seu código inteiro pra ver como fica o layuot

abraço

paulojorge3l · Dezembro 14, 2007

Silverfox segue o endereço para que possa ver funcionando

no IE o problema piora mais ainda :( no FF roda tudo doido igual na imagem q coloquei no link mais roda dá uma olhada e v c você pode me ajudar a resolver no FF e no IE valew

Endereço:

http://www.portal3lagoas.com.br/2008/www/slide.asp

brcontainer · Dezembro 14, 2007

você esta usando display:inline; pq ??

seria para as DIVs não quebrarem para baixo?

por causa disso a visulazição no IE6 e no FF ficam bastante diferentes

pense assim tem coisas no seu código meio confusas

quanto de conhecimento você tem de CSS?

abraço

paulojorge3l · Dezembro 15, 2007

Olá Silver tenho pouco você poderia me ajudar a arrumar o código????

brcontainer · Dezembro 15, 2007

mas você não respondeu o que perguntei

[atualizado]

seu cófigo como disse só serve no FF(e no IE7 eu acho)

no IE6 nem aparece =/

seu código tem lugares assim

<ul>
<li><img></li>
</ul>

<ul>
<li><a>link</a></li>
</ul>

por você usar float:;

o código não consegue definir altura então fica umas coisas erradas por que a altura dos ul,LI que estão com imagem

é diferente do com links

outra eu tirei o display:inline(o efeito que você quer só funciona no IE)

você não necessita dele ja esta usando float:; para não haver quebras

brcontainer · Dezembro 15, 2007

primeiramente seu código alem de muito poluido esta mal estruturado

tive de fazer varias gambiarras(não achei certo)

porem você disse que estava com urgencia

então fiz o seguinte limpei o código lancei uma ou outra gambiarra

e funcionou =/

porem preste atenção revize seu código recicle ele ou refaça

por que el esta bastante desestruturado para o resultado que você quer =/

<html><head><title>S l i d e S h o w - by tmferreira</title>
	

	

		
				<style><!--
			* {
				margin: 0;
				padding: 0;
				list-style: none;
				text-decoration: none;
				font-family: Verdana, Arial, Helvetica, Sans-Serif;
			}
		#slideshow{
			width: 493px;
			height: 160px;
			border:1px #000 solid;
			background: #BBBBBB;
		}
		#slides{
					background: #BBBBBB;
			  height: 69px;
					width: 493px;
		}
		#slides div span {
			width:200px;
					display: block;
			height:50px;
		}
		#links {
			width: 240px;
			height: 91px;
			float: right;
			text-align: center;
			border: 1px solid black;
		}
		#links ul{
				font-size: 12px;
				border-top: 1px solid white;
				width: 240px;
		}
		#links ul li{
			float:left;
		}
		.visible {
			background:#fc0;
					display: block;
			height: 59px;
					width: 493px;
		}
		.hidden {
			display: none;
		}
		.titulo{
			font-weight: bold;
			font-size: 16px;
			padding: 5px 0 0 5px;
		}
		.conteudo {
			float:right;
			padding: 0 0 0 0;
		}
		.foto{
			margin: 0px 1px 0px 0px;
			position:absolute;
			float:left;
		}
		.img{
		height: 60px;
		}
		.href {
		clear:both;
		height: 26px;
		}

			#links li.inativo {
				border:none;
				background: #EEEEEE;
		height: 26px;
				width: 75px;

			}
			#links li.ativo {
				border:none;
				background: #D9D9D9;
		height: 26px;
				width: 75px;

			}
		--></style>

		<script type="text/javascript">
			var tempo;
			var intervalo = 2000;
			function $(campo) {
				return document.getElementById(campo);
			}

			var $A = Array.from = function(iterable) {
				if (!iterable) return [];
				if (iterable.toArray) {
					return iterable.toArray();
				} else {
					var results = [];
					for (var i = 0; i < iterable.length; i++)
						results.push(iterable[i]);
					return results;
				}
			};
			Function.prototype.bind = function() {
				var __method = this, args = $A(arguments), object = args.shift();
				return function() {
					return __method.apply(object, args.concat($A(arguments)));
				};
			};
			function addEvent(obj, evType, fn) { 
					if (typeof obj == "string") {
					if (null == (obj = document.getElementById(obj))) {
						throw new Error("Elemento HTML não encontrado. Não foi possível adicionar o evento.");
					}
				}
				if (obj.attachEvent) {
					return obj.attachEvent(("on" + evType), fn);
				} else if (obj.addEventListener) {
					return obj.addEventListener(evType, fn, true);
				} else {
					throw new Error("Seu browser não suporta adição de eventos.");
				}
			}
			function nextSlide() {
				var divs = $('slides').getElementsByTagName('div');
				var i;
				for (i = 0; i < divs.length; i++) {
					if (divs[i].className == 'visible') {
						divs[i].className = 'hidden';
						$('link' + (i + 1)).className = 'inativo'
						i = (i == divs.length - 1) ? 0 : i + 1;
						divs[i].className = 'visible';
						$('link' + (i + 1)).className = 'ativo'
						break;
					}
				}
			}
			function init() {
				var as = $('links').getElementsByTagName('a');
				var i;
				for (i = 0; i < as.length; i++) {
					var f = function(v) {
						setSlide(as[v]);
					}
					addEvent(as[i], 'click', f.bind(this, i));
				}
				tempo = setInterval('nextSlide()', intervalo);
			}
			function setSlide(link) {
				var divs = $('slides').getElementsByTagName('div');
				var i;
				for (i = 0; i < divs.length; i++) {
					divs[i].className = 'hidden';
				}
				var lis = $('links').getElementsByTagName('li');
				for (i = 0; i < lis.length; i++) {
					lis[i].className = 'inativo';
				}
				link.parentNode.className = 'ativo';
				i = parseInt(link.firstChild.data);
				$('slide' + i).className = 'visible';
				clearInterval(tempo);
			}
			addEvent(window, 'load', init);
		</script></head><body>

	

<div id="slideshow" name="slideshow">



<div id="slides" name="slides">
<div id="slide1" name="slide1" class="hidden">
<img src="slide.asp_arquivos/1_002.jpg" class="foto" height="160" width="250">
<span class="conteudo">
João Bosco & Vinícius<br>
29/12/2007<br>
Parque de Exposições
</span>
</div>



<div id="slide2" name="slide2" class="visible">
<img src="slide.asp_arquivos/1_006.jpg" class="foto" height="160" width="250">
<span class="conteudo">
Baile do Haway<br>
12/11/2007<br>
Parque de Exposições
</span>
</div>



<div id="slide3" name="slide3" class="visible">
<img src="slide.asp_arquivos/1_004.jpg" class="foto" height="160" width="250">
<span class="conteudo">
Baile do Bixo<br>
15/10/2007<br>
Parque de Exposições
</span>
</div>
</div>




<div id="links" name="links">
<ul class="img">
<li><img src="slide.asp_arquivos/1.jpg" height="60" width="80"></li>
<li><img src="slide.asp_arquivos/1_005.jpg" height="60" width="80"></li>
<li><img src="slide.asp_arquivos/1_003.jpg" height="60" width="80"></li>
</ul>

<ul class="href">
<li id="link1" name="link1" class="inativo"><a href="#">1</a></li>
<li id="link2" name="link2" class="ativo"><a href="#">2</a></li>
<li id="link3" name="link3" class="ativo"><a href="#">3</a></li>
</ul>
</div>



</div>


</body></html>

Entrar

Arquivado

Erro ao aplicar css em slide show

Recommended Posts

paulojorge3l 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

brcontainer 16

Compartilhar este post

Link para o post

Compartilhar em outros sites

paulojorge3l 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

brcontainer 16

Compartilhar este post

Link para o post

Compartilhar em outros sites

paulojorge3l 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

brcontainer 16

Compartilhar este post

Link para o post

Compartilhar em outros sites

brcontainer 16

Compartilhar este post

Link para o post

Compartilhar em outros sites

select com varias categorias por horario

comando like (Mysql) no php

Alguém com pratica em subir site em codeigniter4 na Hostinger? Não consigo acessar o bd. Erro de Autenticação. O mesmo site funciona normal em outro servidor web.

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante