1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

CSS - meter 2 imagens juntas

Discussão em 'Web Development' iniciada por songoku, 5 de Novembro de 2007. (Respostas: 23; Visualizações: 3109)

  1. songoku

    songoku Power Member

    Estou a tentar meter 2 imagens juntas mas ficam sempre com uma falha no meio não sei porquê. Pus o border com 0px mas mesmo assim não dá. Ajuda?
     
  2. K0mA

    K0mA Power Member

    Mete margin: 0; padding: 0;
     
  3. songoku

    songoku Power Member

    tks já resolvi o problema, mas agora tenho outro...
    Quando vejo no opera ou ff a página aparece bem, mas quando vejo no IE (acho que só acontece com a versão 6, pelo menos quem tem a versão 7 consegui ver bem) aparece sempre uma linha entre cada div portanto fica tudo mal.

    Deixo aqui o site, experimentem ver no IE e noutro browser para perceberem o que estou a tentar dizer:
    http://www.arqstab.clok.info/

    O que queria, era saber o que devo fazer apara no IE aparecer correctamente.

    ps: nao liguem ao site que é a minha primeira vez :D
     
  4. songoku

    songoku Power Member

    então pessoal ?
     
  5. K0mA

    K0mA Power Member

    Esquece o IE6...
     
  6. songoku

    songoku Power Member

    Eu esqueço, mas a maior parte das pessoas (infelizmente) não.
     
  7. Kayvlim

    Kayvlim Undefined Moderator
    Staff Member

    Isso não tem a ver com o problema da transparência do PNG? É que notei que a imagem é PNG, e o problema que tens no IE6 é o fundo dele não ficar transparente.

    Acho que até aqui no Techzone tinham chegado a usar um hack qualquer para isso dar, mas não sei bem.
     
  8. songoku

    songoku Power Member

    Hmm nao faço ideia... Há algum formato, em vez de png, que possa usar para que fique transparente?
     
  9. Só um pormenor: O PNG (Portable Network Graphic) suporta transparência sem problema nenhum. O IE é que não interpreta o formato devidamente.

    Usa JPEG para isso. Mas deixa dizer-te que, se percebi bem e se o que tu queres fazer é transparência, que estás a trabalhar mal:
    http://www.arqstab.clok.info/Images/header_horiz2.png
    é bastante evidente que não estás a usar transparência nenhuma por isso é até no meu browser Safari o teu site fica mal.
     
  10. hYpe

    hYpe [email protected] Member

    :imwithst: Não trabalhas neste meio pois não?

    http://www.twinhelix.com/css/iepngfix/

    Aí está ele :)
     
  11. K0mA

    K0mA Power Member

    Não.
     
  12. RicardoMoreira

    RicardoMoreira Power Member

    Não entendo é porquê tanta imagem no site quando podia perfeitamente ser texto. Refiro-me obviamente ao menu e ao copyright por exemplo.
     
  13. songoku

    songoku Power Member

    É só por enquanto. Todo o texto que está em imagens passará a texto mesmo, excepto o logo.
     
  14. songoku

    songoku Power Member

    Já consegui resolver os problemas que tinha e entretanto andei a estudar php, mas hoje decidi voltar a fazer o site do inicio desta vez com menos imagens e com o codigo menos confuso que foi de onde surgiram os problemas da outra vez.
    Mas agora que estou a fazer com mais calma deparo-me com um problema semelhante e já estive a ver tudo o que pudesse ser e não encontro nada...

    Por que raio no IE6 me aparece um esapaço entre os 2 divs buttonsep?
    Código:
    body{
    	background: #414140 url(images/bg.png);
        color: white; 
    }
    div#container{
    	border: solid 1px white;
    	width: 798px;
    	height:	598px;
    	margin-left: auto;
    	margin-right: auto;
    	margin-top: 10%;
    }
    div#header{
    	width: 798px;
    	height: 128px;
    	background: url(images/header_bg.png) repeat-x;
    	text-align: left;
    	border-bottom: solid 1px white;
    }
    div#menu{
        width: 127px;
        height: 424px;
    	background: url(images/button_bg.png) repeat-x;
    	float: left;
    	border-right: solid 1px white;
    }
    div#pagactual{
    	width: 116px;
    	height: 35px;
    	border: solid 1px #848280;
    	margin: 9px auto;
    }
    div#buttonsep{
    	width: 117px;
    	height: 2px;
    	background: url(images/button_sep.png) repeat-x;
    	margin: 0px auto;
    	padding: 0;
    }
    div#content{
    	width: 670px;
        height: 424px;
    	background: url(images/content_bg.png) repeat-x;
    	float: right;
    }
    div#copyright{
        width:798px;
        height:44px;
    	background: url(images/copyright_bg.png) repeat-x;
    	float: left;
    	border-top: solid 1px white;
    }
    
    Código:
    <body>
    <div id="container"> 
      <div id="header">
      <img src="images/logo.png" alt="logo" style="border-right: white 1px solid;"/><img src="images/header.png" alt="header"/></div>
      <div id="menu">
      <div id="pagactual"></div>
      <div id="buttonsep"></div>
      <div id="buttonsep"></div>
      </div>
      <div id="content"></div>
      <div id="copyright"></div>
    </div>
    </body>
    
    Podem ver do lado esquerdo o problema dos separadores aqui:
    http://www.song0ku.clok.info/
     
  15. hYpe

    hYpe [email protected] Member

    Experimenta por-lhes um 'float: left;'.
     
  16. songoku

    songoku Power Member

    Também já tinha tentado e apenas os coloca colados ao lado esquerdo, continuando separados :(
     
  17. hYpe

    hYpe [email protected] Member

    Então poe o float tambem na div q ta por cima "pagactual"..

    Assim deve dar..
     
  18. songoku

    songoku Power Member

    assim certo?

    Código:
    div#pagactual{
    	width: 116px;
    	height: 35px;
    	border: solid 1px #848280;
    	margin: 9px auto;
    	float: left;
    }
    div#buttonsep{
    	width: 117px;
    	height: 2px;
    	background: url(images/button_sep.png) repeat-x;
    	margin: auto;
    	float: left;
    }
    também não funcionou :(

    edit: ficou assim http://www.song0ku.clok.info/
     
    Última edição: 30 de Novembro de 2007
  19. Hostx

    Hostx Power Member

    Onde arranjaste o template?

    É muito fixe.
     
  20. songoku

    songoku Power Member

    Fiz no photoshop. :)
     

Partilhar esta Página