Ir para conteúdo

Arquivado

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

jonathanrn

Como deixar as imagens juntas de um background (fatiado)

Recommended Posts

<!doctype html>

<html>

<head>

<title>teste</title>

 

<style type="text/css">

 

#foto1{

margin:-4px 25% 0% 25%; position:relative;

}

 

#foto2{

margin:-4px 25% 0% 25%;

 

position:relative;

}

 

 

 

#foto3{

margin:-4px 25% 0% 25%;

position:relative;

}

 

#foto4{

margin:-4px 25% 0% 25%;

position:relative;

}

 

 

 

</style>

 

</head>

 

<body bgcolor="white">

 

<DIV id="foto1">

<img src="https://lh4.googleusercontent.com/-UzYqjj6Ispg/VJBRD70cabI/AAAAAAAAAAw/2j96EVKPJsM/w600-h300-no/01.png" alt="background" />

 

</DIV>

 

<DIV id="foto2">

<img src="https://lh3.googleusercontent.com/-sc2NzCzPsuA/VJBT31UrOgI/AAAAAAAAABY/h076CMXU0YE/s600/02.png" alt="background" />

<div style="position: absolute; top: 23px; left: 246px; color: black; width: 340px; font-size: 16px;">        nova Faria Lima, na capital paulista, traz         peculiaridades que atraem tanto os olhares leigos quanto os mais apurados. Nos últimos anos,<br />a região viu erguerem-se ali marcos da arquitetura, como o Pátio Malzoni e o Infinity Tower, entre outros empreendimentos corporativos. </div>

 

 

<div style="position: absolute; top: 20px; left: 249px; color: #f5bb00; width: 28px; font-size: 38px;">A</div>

 

 

 

 

 

 

 

<div style="position: absolute; top: 136px; left: 246px; color: black; width: 341px; font-size: 16px;">

        Neste último semestre de 2014, mais um edifício comercial de alto padrão veio integrar-se à tão disputada paisagem urbana prometendo atrair

</div>

 

 

<div style="position: absolute; top: 191px; left: 302px; color: black; width: 286px; font-size: 16px;">

atenções — o Vera Cruz II, o primeiro da região a obter a pré-certificação LEED Platinum.

</div>

 

 

<div style="position: absolute; top: 248px; left: 302px; color: black; width: 286px; font-size: 16px;">

     O projeto leva a assinatura de Roberto Collaço, do escritório Collaço e Monteiro Arquitetos Associados, para quem a obra </div>

 

 

 

 

 

 

 

 

 

 

 

</DIV>

 

<DIV id="foto3">

<img src="https://lh3.googleusercontent.com/-4zXjrY8kZhA/VJBT2T6ZVOI/AAAAAAAAABM/Tm56lUBDbWc/s600/03.png" alt="background" />

<div style="position: absolute; top: 2px; left: 302px; color: black; width: 271px; font-size: 16px;">

“cria espaços visuais com esculturas, jardins e fontes, onde a vegetação e a água estão ligadas à avenida Faria Lima e às ruas Atílio Inocentti e Elvira Ferraz, </div>

 

 

<div style="position: absolute; top: 73px; left: 34px; color: black; width: 542px; font-size: 16px;">

permitindo ao usuário e ao transeunte utilizar os espaços e se beneficiar da amplitude visual e da paisagem”. </div>

 

 

<div style="position: absolute; top: 115px; left: 33px; color: black; width: 542px; font-size: 16px;">

    Segundo o arquiteto, o Vera Cruz II “teve uma concepção diferenciada em relação aos edifícios vizinhos, com sua fachada composta de vidro e cobre patinado — materiais nobres que conferem uma composição dinâmica”. </div>

 

 

<div style="position: absolute; top: 174px; left: 33px; color: black; width: 534px; font-size: 16px;">

    A GlassecViracon processou e forneceu quase 12 mil metros quadrados de insulados low-e neutros e laminados low-e prata para o empreendimento. Sobre o papel dos vidros especificados, Collaço afirma que teve “extrema importância” para o resultado final. </div>

 

 

<div style="position: absolute; top: 248px; left: 34px; color: black; width: 534px; font-size: 16px;">

    A GlassecViracon processou e forneceu quase 12 mil metros quadrados de insulados low-e neutros e laminados low-e prata para o empreendimento. Sobre o papel dos vidros especificados, Collaço afirma que teve “extrema importância” para o resultado final. </div>

</DIV>

 

<DIV id="foto4">

<img src="https://lh3.googleusercontent.com/-GFBe38rk4l0/VJBT2ZDRClI/AAAAAAAAABQ/obLczQC8ClQ/s600/04.png" alt="background" />

<div style="position: absolute; top: 1px; left: 34px; color: black;">para o resultado final.

 

</div>

 

 

<div style="position: absolute; top: 24px; left: 34px; color: black; width: 496px;">  “A qualidade e a composição do vidro utilizado atenderam ao LEED e as condições de conforto ambiental das unidades. O caixilho, composto com vidro insulado e CCM em cobre patinado, traduz uma concepção com linguagem moderna”, conclui Collaço.

 

</div>

 

 

<div style="position: absolute; top: 100px; left: 34px; color: black; width: 496px;">    Com onze pavimentos corporativos e quatro destinados à garagem no subsolo, o Vera Cruz II tem pouco

mais de 38 mil metros quadrados de área construída. O empreendimento contou com a consultoria de

Igor Alvim, da QMD, e a RFM respondeu pela construção.

 

</div>

</DIV>

 

 

 

</body>

</html>

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá jonathanrn,

 

O seu código já está juntando as quatro imagens que formam um único background. Não vejo problema nenhum que você relatou.

 

Uma dica é não usar este tipo de plano de fundo cortado. Utilize uma imagem inteira, sem cortá-la. Fica mais bonito e mais moderno. Para ajeitar o texto use CSS com suas maravilhosas propriedades. :grin:

 

Essas imagens cortadas caíram em desuso perto de 2008 (se não antes), juntamente com os gifs brancos que eram usados para separar conteúdo... ;)

 

Qualquer dúvida é só perguntar! :thumbsup:

 

Atenciosamente,

Pedro HSB

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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