Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Rosana.

[Resolvido] Conflito em código CSS

Por , em Desenvolvimento frontend

Recommended Posts

Rosana.    0

Rosana.
Postado

Oi,

 

Quero colocar uma página de fotos usando o Light Box no meu site mas tem algum conflito no meu código pois quando coloco ele sozinho, funciona mas quando coloco as outras partes do css ele não funciona direito.

 

O meu código css é esse:

<style TYPE="text/css">
<!--
a:link { text-decoration: none}
a:active { text-decoration: none}
a:visited { text-decoration: none}
-->
a img {
border-width:0;
}
body{
background-image:url(picture_library/backgr.jpg);
background-attachment:fixed;
</style>

Preciso acrescentar esse:

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

Tentei modificar algumas coisas mas sempre some algo...

 

Alguém sabe por que acontece isso?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Vamos lá.

 

Veja que há um erro seu na hora de incluir o arquivo .css:

 

body{
background-image:url(picture_library/backgr.jpg);
background-attachment:fixed;
link rel="stylesheet" href="css/lightbox.css" media="screen";}

Assim não está sendo chamado o efeito. ;)

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Faça assim:

 

<style TYPE="text/css"> 
<!--
a:link { text-decoration: none}
a:active { text-decoration: none}
a:visited { text-decoration: none}
-->
a img {
border-width:0;
}
body{
background-image:url(picture_library/backgr.jpg);
background-attachment:fixed;
</style>

E depois desse código adicionei isso:

 

<link rel="stylesheet" href="css/lightbox.css" type="text/css" />

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

T.Colucci    33

T.Colucci
Postado

Ou, sendo mais direto:

<style TYPE="text/css"> 
<!--
a:link { text-decoration: none}
a:active { text-decoration: none}
a:visited { text-decoration: none}
-->
a img {
border-width:0;
}
body{
background-image:url(picture_library/backgr.jpg);
background-attachment:fixed;
</style> 
<link rel="stylesheet" href="css/lightbox.css" type="text/css" />

Compartilhar este post

Link para o post
Compartilhar em outros sites

2Flex    1

2Flex
Postado

Faça assim:

 

<style TYPE="text/css"> 
<!--
a:link { text-decoration: none}
a:active { text-decoration: none}
a:visited { text-decoration: none}
-->
a img {
border-width:0;
}
body{
background-image:url(picture_library/backgr.jpg);
background-attachment:fixed;
</style>

E depois desse código adicionei isso:

 

<link rel="stylesheet" href="css/lightbox.css" type="text/css" />

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

Só para corrigir:

body{
background-image:url(picture_library/backgr.jpg);
background-attachment:fixed;
}
Cumprimentos

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rosana.    0

Rosana.
Postado

Funcionou mas não funcionou...

 

Nessa página de teste a foto abre com borda e aparece a opção "close" embaixo.

http://www.aiprock.com/teste.html

 

Nessa outra a página aparece mas sem a opção fechar. Aparece em outra página e não sobreposta como no link anterior...

http://www.aiprock.com/teste2.html

 

Será que eu preciso acrescentar outros códigos nesse css?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Pois na segunda página você não incluiu o arquivo .js. ;)

 

Olhe como está atualmente:

 

<html> 
<head> 
	<title>Aip!</title> 
<style TYPE="text/css"> 
<!--
a:link { text-decoration: none}
a:active { text-decoration: none}
a:visited { text-decoration: none}
-->
a img {
border-width:0;
}
body{
background-image:url(picture_library/backgr.jpg);
background-attachment:fixed;
</style> 
<link rel="stylesheet" href="css/lightbox.css" type="text/css" /> 
 
</head> 
<body><br> <div style="text-align: left;">         <img style="width: 146px; height: 62px;" src="picture_library/00aip.gif"><br></div><br><div style="text-align: center;"> 
<a href="banda.html"> 
<img src="picture_library/01ban.gif"></a> 
 <a href="musica.html"><img src="picture_library/07mus.gif"></a>   <a href="shows.html"><img src="picture_library/05agen.gif"></a>   <a href="contacto.html"><img src="picture_library/08con.gif"></a>   <a href="sites.html"><img src="picture_library/06lin.gif"></a> 
 
 <a href="ativismo.html"><img src="picture_library/13ativis.gif"></a> <br></div><br><div style="text-align: center;"><span style="text-decoration: underline;"><img src="picture_library/04fot.gif"></span>    <br><br><br></div> 
<a href="images/image-1.jpg" rel="lightbox"><img src="images/image-1.jpg" style="border-style: solid; border-color: rgb(255, 255, 255);" border="1"></a> 
 
<br><br><br><br><br><br><br><br><br><br><br><br><br></body> 
</html>

Inclua o script e aproveite e coloque também um DocType.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rosana.    0

Rosana.
Postado

Fui no site http://validator.w3.org/ e para minha surpresa o meu código tem muitos erros. Até o da página mais simples!

 

Por curiosidade testei outras páginas da web, só encontrei uma sem nenhum erro. Peguei como exemplo páginas de sites grandes, desenvolvidas por profissionais da área (o que não é o meu caso).

 

Para construir eu uso o Wysiwyg, achei estranho ter tantos erros. Só o cabeçalho, style, css que eu coloco antes, o resto faço com ele.

 

Muito obrigada pela dica, Thiago! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Será bem útil para mim.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Para construir eu uso o Wysiwyg, achei estranho ter tantos erros. Só o cabeçalho, style, css que eu coloco antes, o resto faço com ele.

Estranho seria se tivesse poucos erros. :lol: Esses editores deixam o código muito poluído e feio. Bom mesmo é você digitá-los para ter um melhor controle. ;)

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rosana.    0

Rosana.
Postado

Vou voltar então a fazer como antes. Era mais trabalhoso mas mais seguro, pois eu sabia exatamente o que estava colocando. Uma vírgula errada já dava para perceber.

Pelo que percebi na pesquisa que fiz agora há pouco nos outros sites, acho que ninguém mais usa fazer manual. Pelo menos nos que vi.

Obrigada,

 

http://forum.imasters.com.br/public/style_emoticons/default/bye1.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rosana.    0

Rosana.
Postado

Com poucas fotos o Lightbox funcionou muito bem.

Quando coloco mais fotos ele abre muito embaixo, a foto fica visível em um primeiro momento só até metade, é preciso descer um pouco a página para poder ver a foto.

 

Meu teste (que deu certo):

http://www.aiprock.com/teste2.html

 

Meu teste com mais fotos (que não deu certo):

http://www.aiprock.com/fotos1.html

 

Li várias coisas, pelo que entendi devo mexer no código css mas não entendi o que e nem como mudar.

O começo do código é esse, a parte que tem a ver com posição.

#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

Obrigada,

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Se deu certo, tudo bem, mas não é o certo. Veja que há os estilos inline. Estilos inline são sempre renderizados, não importando se você definiu algo em arquivo em externo.

 

Tenta arrumar de forma mais correta. ;)

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito