CSS - meter 2 imagens juntas

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?
 
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
 
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.
 
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.

Hmm nao faço ideia... Há algum formato, em vez de png, que possa usar para que fique transparente?
 
Hmm nao faço ideia... Há algum formato, em vez de png, que possa usar para que fique transparente?

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.
 
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/
 
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:
Back
Topo