Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS

Moderador: web

 
Mais de 50 postagens
Mais de 50 postagens
Tópico Autor
Mensagens: 57

dificuldade no alinhamento das imagens

14-06-2010 12:54

Boa tarde, não sei se poderão me ajudar, mas não custa nada tentar.

Utilizo Joomla como Gerenciador de sites, criei um modulo para ele com um efeito javascript http://www.ajaxdaddy.com/demo-interface-fisheye.html
este efeito cria um menu estilo o mac, só que quando instalei o modulo o arquivo ficou assim http://www.lsmservice.com.br/index.php? ... &Itemid=57; neste arquivo tem duas divs o javascript fala com as duas para aplicar o efeito só que as imagens ficaram na horizontal e o efeito na vertical.

Segue o codigo css. (o que estiver comentado não foi necessario pois o joomla recebe instruções de posicionamento user1,user2 etc para alinhar o modulo ao texto, por isso retirei o position: absolute)

<style type="text/css"> .dock { /*position: absolute;*/ height: 50px; text-align: center; /*top:0;*/ /*width: 1000px;*/ } .dock-container { /*position: absolute;*/ height: 50px; padding-left: 20px; /*top:0;*/ } a.dock-item { display: block; height: 50px; color: #000; /*position: absolute;*/ /*top: 0px;*/ text-align: center; text-decoration: none; font: bold 12px Arial, Helvetica, sans-serif; } .dock-item img { border: none; margin: 5px 10px 0px; width: 100%; } .dock-item span { display: none; padding-left: 20px; } </style>

0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17236
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

dificuldade no alinhamento das imagens

14-06-2010 13:46

Tem o link para que eu teste o script?
0
Criar site grátis Wix
Hospedagem de sites Hostgator
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum
:rock:
 
Mais de 50 postagens
Mais de 50 postagens
Tópico Autor
Mensagens: 57

dificuldade no alinhamento das imagens

14-06-2010 14:19

Meu caro! :clap: obrigado pela rápida resposta, segue o link, se puder me ajudar estarei muito agradecido, esse modulo é para a versão 1.5 do Joomla.

http://www.lsmservice.com.br/e_mkt/menumac.zip
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17236
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

dificuldade no alinhamento das imagens

14-06-2010 14:41

Não testei o script porque não tenho o Joomla, mas, dei uma olhada aqui na div que fica posicionada antes do início do script no seu site, e notei que ela tem uma class chamada clearfix. No seu CSS, ela tem o display:block;

O que deve estar acontecendo, é que a class do script MAC, faz os elementos ficarem verticalmente, mas, a class do seu CSS está fazendo os elementos do menu perderem a posição.

Uma idéia que dou é fazer um teste, se possível retirando os elementos do CSS do seu site, e verificando o posicionamento do script.
0
Criar site grátis Wix
Hospedagem de sites Hostgator
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum
:rock:
 
Mais de 50 postagens
Mais de 50 postagens
Tópico Autor
Mensagens: 57

dificuldade no alinhamento das imagens

14-06-2010 15:43

Ok, Obrigado pela dica, só que este modulo será posteriormente instalado em outro website, preciso criar um css onde não sofra interferencia de outras paginas e que não precise alterar o codigo do template, o objetivo do modulo é reaproveitar o codigo para trabalhos posteriores, peguei alguns modulos de jquery que funcionam no joomla
e não há conflitos no css, e instalei em outros templates e funcionou bem, preciso de que meu codigo css não sofra interferencia, será que se eu mudar a class para id irá funcionar? Isso era uma coisa que eu não compreendo como o codigo css direcionado a um id ou class especifico pode alterar outra class ou id? por que algumas configurações feitas no div pai reflete no div filho?

Segue um codigo css de outro modulo que funciona para ver se consegue me ajudar.

.Thickbox, .Thickbox * { margin: 0; padding: 0; } /* ----------------------------------------------------------------------------------------------------------------*/ /* ---------->>> thickbox specific link and font settings <<<------------------------------------------------------*/ /* ----------------------------------------------------------------------------------------------------------------*/ #TB_window { font: 12px Arial, Helvetica, sans-serif; color: #333333; } #TB_secondLine { font: 10px Arial, Helvetica, sans-serif; color:#666666; } #TB_window a:link {color: #666666;} #TB_window a:visited {color: #666666;} #TB_window a:hover {color: #000;} #TB_window a:active {color: #666666;} #TB_window a:focus{color: #666666;} /* ----------------------------------------------------------------------------------------------------------------*/ /* ---------->>> thickbox settings <<<-----------------------------------------------------------------------------*/ /* ----------------------------------------------------------------------------------------------------------------*/ #TB_overlay { position: absolute; z-index:200; top: 0px; left: 0px; background-color:#000; filter:alpha(opacity=60); -moz-opacity: 0.6; opacity: 0.6; } #TB_window { position: absolute; background: #ffffff; z-index: 202; color:#000000; display:none; border: 4px solid #525252; text-align:left; } #TB_window img { display:block; margin: 15px 0 0 15px; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; border-top: 1px solid #666; border-left: 1px solid #666; -ms-interpolation-mode: bicubic; } #TB_window img#TB_Image { margin-right: 15px; float: right; } #TB_additional_images { display: block; width: 75px; float: left; padding: 0px; margin-top: 15px; margin-left: 15px; } #TB_additional_images img.TB_Thumbnail_Image { margin: 0px 0px 15px 0px } #TB_Header{ background: #cccccc; height: 16px; width: 95%; padding: 4px; margin: 6px auto 0px auto; } #TB_caption{ height:25px; padding:7px 30px 10px 25px; float:left; } .TB_Selected img{ border:2px solid #FFCC66 !important; } #TB_closeWindow{ height:25px; padding:11px 25px 10px 0; float:right; } #TB_closeAjaxWindow{ padding:5px 10px 7px 0; margin-bottom:1px; text-align:right; float:right; } #TB_Header #TB_TopCloseAjaxWindow{ padding: 0px; margin: 0px; display: block; text-align:right; float:right; } #TB_ajaxWindowTitle{ float:left; padding:7px 0 5px 10px; margin-bottom:1px; } #TB_title{ background-color:#e8e8e8; height:27px; } #TB_ajaxContent{ clear:both; padding:2px 15px 15px 15px; overflow:auto; text-align:left; line-height:1.4em; } #TB_ajaxContent p{ padding:5px 0px 5px 0px; } #TB_load{ position: absolute; display:none; height:100px; width:100px; z-index:201; } #TB_HideSelect{ z-index:199; position:absolute; top: 0; left: 0; background-color:#fff; border:none; filter:alpha(opacity=0); -moz-opacity: 0; opacity: 0; } #TB_iframeContent{ clear:both; border:none; margin-bottom:-1px; margin-top:1px; _margin-bottom:1px; }

0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17236
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

dificuldade no alinhamento das imagens

14-06-2010 15:50

Sim, geralmente o conflito é usar o mesmo nome de class. Você pode alterar o nome da class ou usar o id.
0
Criar site grátis Wix
Hospedagem de sites Hostgator
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum
:rock:

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado