Ir para conteúdo

POWERED BY:

Arquivado

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

ThinkBrunus

alinhamento de layers

Por , em Desenvolvimento frontend

Recommended Posts

ThinkBrunus    0

ThinkBrunus
Postado

Boas!

Já aqui coloquei um tópico sobre este assunto e tenho pesquisado e estudado sobre css, e mesmo assim não estou a conseguir resolver o problema...

O problema é no alinhamento da layer, visto q no firefox ela fica na posição certa e no IE fica um pouco desviado....mas ainda pior é qdo minimizo a janela a layers fica todar fora do contexto em qualquer um dos browsers.

 

o site está em http://vibeltaxis.pt.vu

 

Aqui fica o código css:

 

body{margin:0px;position:relative;}#divGeral{position:static;}#DivBandeiras{position:absolute;margin:0px;_margin:0px;padding:0px;_padding:0px;left:920px;top:20px;z-index:1;}#divTexto {position:absolute;padding:10px 50px 50px 20px;float:left;left:371px;top:182px;width:519px;z-index:1;}
Agradeço qualquer dica, pois já nem sei para onde me voltar...

 

Cumprimentos

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

ThinkBrunus, no outro tópico eu lhe passei uma lista de links: http://forum.imasters.com.br/index.php?s=&...st&p=857038

Dentro desta lista tem um link em especial que trata de como construir layout's: http://forum.imasters.com.br/index.php?showtopic=219987

 

Como já disse no outro tópico, não é recomendado trabalhar com frames, como você está fazendo.

Estude o link sobre como construir layout's e depois trabalhe o background com poucas imagens, pois no link que você passou existem muitas imagens, isso torna o carregamento do site lento.

 

Fica ai a dica, se seguires o material de layout, depois fica fácil colocar as imagens de fundo.

 

Qualquer dúvida, por favor, volte a postar.

 

[]'s http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

ThinkBrunus    0

ThinkBrunus
Postado

Boas Gio!

 

eu fiz este layout no ilustrator e depois exportei para html, ficando por defeito arrumado por tabelas.

Eu aqui não estou a utilizar frames, mas sim layers/divs, são duas, uma nas para as bandeiras e outra para o texto.

 

Não sei se já viu o site mas ele maximizado fica certinho, mas ao clicar na janela para ficar mais pequena, as layers deslocam-se não ficando no lugar que é desejado ficar....se pudesse dar uma vista de olhos agradecia, mas atenção eu não estou a trabalhar com frames.

 

http://vibeltaxis.pt.vu/

 

Vou deixar o código para darem uma vista de olhos:

 

HTML:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title>Vibeltaxis</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8" ><meta name="Author" content="designisflowing"><meta name="copyright" content="23/08/2007"><meta name="keywords" content="taxis, algarve, transfers, golf, tours, turismo"><meta name="description" content="Empresas de transporte sediada no Algarve"><link rel="STYLESHEET" type="text/css" href="vibel.css"> </head><body><!-- ImageReady Slices (exporting vibeltaxis.ai) --><div id="divGeral"><div id="DivBandeiras">  <table border="0">	<tr>	  <td><div align="center"><img src="images/bandeiras/flag_por.jpg" alt="" width="25" height="16"></div></td>	  <td><div align="center"><img src="images/bandeiras/flag_en.jpg" alt="" width="25" height="16"></div></td>	  <td><div align="center"><img src="images/bandeiras/flag_ger.jpg" alt="" width="25" height="16"></div></td>	</tr>  </table></div><div id="divTexto">  <h1>Bem vindo!</h1>  <p>Sedeada desde 1995 no sudoeste algarvio, esta é uma empresa  de transportes que tem como objectivo prestar um bom serviço focando a <strong><em>Segurança</em></strong> e o <strong><em>Conforto</em></strong>.<br>	<br>  Com veículos até <strong>seis  lugares</strong> é ideal para golfistas. Mas também, parafamílias com crianças, utilizando em cada caso a solução  indicada para o transporte das crianças em segurança: <strong>baby seat</strong>, <strong>car seat</strong> e<strong> booster</strong>.<br><br>  Com uma óptima relação Preço/Qualidade, a Vibeltaxis oferece um variado número de serviços assim como<strong>: TRANSFERS DE / PARA AEROPORTO, GOLF, TRANSFERS</strong>,<strong> TOURS/VISITAS GUIADAS </strong>e serviço de <strong>TAXI.</strong><br>  <br>  Obrigado pela sua preferência e até breve.</p>  </div><table width="1019" height="603" border="0" cellpadding="0" cellspacing="0" align="center">	<tr>		<td rowspan="33">			<img src="images/index_01.png" width="1" height="602" alt=""></td>		<td colspan="2" rowspan="5" align="left" valign="top"><img src="images/index_02.png" width="72" height="184" alt=""></td><td colspan="2" align="left" valign="top">			<img src="images/index_03.png" width="145" height="69" alt=""></td>		<td colspan="3" rowspan="2" align="left" valign="top">			<img src="images/index_04.png" width="105" height="117" alt=""></td>		<td colspan="2" rowspan="2" align="left" valign="top">			<img src="images/index_05.png" width="109" height="117" alt=""></td>		<td colspan="4" rowspan="2" align="left" valign="top">			<img src="images/index_06.png" width="157" height="117" alt=""></td>		<td colspan="4" rowspan="2" align="left" valign="top"><img src="images/index_07.png" width="172" height="117" alt=""></td>		<td colspan="3" rowspan="3" align="left" valign="top">			<img src="images/index_08.png" width="176" height="118" alt=""></td>		<td rowspan="3" align="left" valign="top">			<div><img src="images/index_09.png" width="80" height="118" alt=""></div></td>		<td rowspan="33">			<img src="images/index_10.png" width="1" height="602" alt=""></td>		<td>			<img src="images/spacer.gif" width="1" height="69" alt=""></td>	</tr>	<tr>		<td colspan="2" rowspan="2" align="left" valign="top">			<img src="images/index_11.png" width="145" height="49" alt=""></td>		<td>			<img src="images/spacer.gif" width="1" height="48" alt=""></td>	</tr>	<tr>		<td colspan="4" rowspan="4" align="left" valign="top">			<img src="images/index_12.png" width="141" height="72" alt=""></td>		<td colspan="4" rowspan="5" align="left" valign="top">			<img src="images/index_13.png" width="187" height="73" alt=""></td>		<td colspan="5" rowspan="5" align="left" valign="top">			<img src="images/index_14.png" width="215" height="73" alt=""></td>		<td>			<img src="images/spacer.gif" width="1" height="1" alt=""></td>	</tr>	<tr>		<td colspan="2" align="left" valign="top">			<img src="images/index_15.png" width="145" height="65" alt=""></td>		<td colspan="2" rowspan="5" align="left" valign="top">			<img src="images/index_16.png" width="146" height="73" alt=""></td>		<td colspan="2" rowspan="5" align="left" valign="top">			<img src="images/index_17.png" width="110" height="73" alt=""></td>		<td>			<img src="images/spacer.gif" width="1" height="65" alt=""></td>	</tr>	<tr>		<td rowspan="9" align="left" valign="top">			<img src="images/index_18.png" width="26" height="95" alt=""></td>		<td rowspan="5" align="left" valign="top"><img src="images/index_19.png" width="119" height="33" alt="A empresa"></td><td>			<img src="images/spacer.gif" width="1" height="1" alt=""></td>	</tr>	<tr>		<td rowspan="8" align="left" valign="top">			<img src="images/index_20.png" width="59" height="94" alt=""></td>		<td rowspan="8" align="left" valign="top">			<img src="images/index_21.png" width="13" height="94" alt=""></td>		<td>			<img src="images/spacer.gif" width="1" height="5" alt=""></td>	</tr>	<tr>		<td colspan="2" rowspan="19" align="left" valign="top">			<img src="images/index_22.png" width="48" height="256" alt=""></td><td colspan="2" rowspan="12" align="left" valign="top">			<img src="images/index_23.png" width="93" height="139" alt=""></td>		<td>			<img src="images/spacer.gif" width="1" height="1" alt=""></td>	</tr>	<tr>		<td colspan="4" rowspan="10" align="left" valign="top">			<img src="images/index_24.png" width="187" height="136" alt=""></td>		<td colspan="5" rowspan="10" align="left" valign="top">			<img src="images/index_25.png" width="215" height="136" alt=""></td>		<td>			<img src="images/spacer.gif" width="1" height="1" alt=""></td>	</tr>	<tr>		<td colspan="2" rowspan="9" align="left" valign="top">			<img src="images/index_26.png" width="146" height="135" alt=""></td>		<td colspan="2" rowspan="3" align="left" valign="top">			<img src="images/index_27.png" width="110" height="60" alt=""></td>		<td>			<img src="images/spacer.gif" width="1" height="25" alt=""></td>	</tr>	<tr>		<td align="left" valign="top">			<img src="images/index_28.png" width="119" height="15" alt=""></td>		<td>			<img src="images/spacer.gif" width="1" height="15" alt=""></td>	</tr>	<tr>		<td rowspan="2" align="left" valign="top">			<img src="images/index_29.png" width="119" height="32" alt=""></td><td>			<img src="images/spacer.gif" width="1" height="20" alt=""></td>	</tr>	<tr>		<td colspan="2" rowspan="4" align="left" valign="top">			<img src="images/index_30.png" width="110" height="67" alt=""></td>		<td>			<img src="images/spacer.gif" width="1" height="12" alt=""></td>	</tr>	<tr>		<td align="left" valign="top">			<img src="images/index_31.png" width="119" height="15" alt=""></td>		<td>			<img src="images/spacer.gif" width="1" height="15" alt=""></td>	</tr>	<tr>		<td rowspan="7" align="left" valign="top">			<img src="images/index_32.png" width="59" height="94" alt=""></td>		<td colspan="2" rowspan="7" align="left" valign="top">			<img src="images/index_33.png" width="39" height="94" alt=""></td>		<td align="left" valign="top">			<img src="images/index_34.png" width="119" height="32" alt=""></td>		<td>			<img src="images/spacer.gif" width="1" height="32" alt=""></td>	</tr>	<tr>		<td rowspan="2" align="left" valign="top">			<img src="images/index_35.png" width="119" height="14" alt=""></td>		<td>			<img src="images/spacer.gif" width="1" height="8" alt=""></td>	</tr>	<tr>		<td colspan="2" rowspan="6" align="left" valign="top">			<img src="images/index_36.png" width="110" height="60" alt=""></td>		<td>			<img src="images/spacer.gif" width="1" height="6" alt=""></td>	</tr>	<tr>		<td rowspan="3" align="left" valign="top">			<img src="images/index_37.png" width="119" height="33" alt=""></td>		<td>			<img src="images/spacer.gif" width="1" height="2" alt=""></td>	</tr>	<tr>		<td colspan="3" rowspan="8" align="left" valign="top">			<img src="images/index_38.png" width="142" height="119" alt=""></td>		<td colspan="5" rowspan="9" align="left" valign="top">			<img src="images/index_39.png" width="183" height="120" alt=""></td>		<td colspan="2" rowspan="8" align="left" valign="top">			<img src="images/index_40.png" width="83" height="119" alt=""></td>		<td rowspan="7" align="left" valign="top">			<img src="images/index_41.png" width="140" height="118" alt=""></td>		<td>			<img src="images/spacer.gif" width="1" height="2" alt=""></td>	</tr>	<tr>		<td colspan="2" rowspan="7" align="left" valign="top">			<img src="images/index_42.png" width="93" height="117" alt=""></td>		<td>			<img src="images/spacer.gif" width="1" height="29" alt=""></td>	</tr>	<tr>		<td align="left" valign="top">			<img src="images/index_43.png" width="119" height="15" alt=""></td>		<td>			<img src="images/spacer.gif" width="1" height="15" alt=""></td>	</tr>	<tr>		<td rowspan="8" align="left" valign="top">			<img src="images/index_44.png" width="59" height="107" alt=""></td>		<td colspan="2" rowspan="8" align="left" valign="top">			<img src="images/index_45.png" width="39" height="107" alt=""></td>		<td rowspan="2" align="left" valign="top">			<img src="images/index_46.png" width="119" height="31" alt=""></td>		<td>			<img src="images/spacer.gif" width="1" height="6" alt=""></td>	</tr>	<tr>		<td colspan="2" rowspan="6" align="left" valign="top">			<img src="images/index_47.png" width="110" height="71" alt=""></td>		<td>			<img src="images/spacer.gif" width="1" height="25" alt=""></td>	</tr>	<tr>		<td align="left" valign="top">			<img src="images/index_48.png" width="119" height="15" alt=""></td>		<td>			<img src="images/spacer.gif" width="1" height="15" alt=""></td>	</tr>	<tr>		<td rowspan="4" align="left" valign="top">			<img src="images/index_49.png" width="119" height="31" alt=""></td>		<td>			<img src="images/spacer.gif" width="1" height="26" alt=""></td>	</tr>	<tr>		<td rowspan="5" align="left" valign="top">			<img src="images/index_50.png" width="140" height="75" alt=""></td>		<td>			<img src="images/spacer.gif" width="1" height="1" alt=""></td>	</tr>	<tr>		<td colspan="6" rowspan="5" align="left" valign="top">			<img src="images/index_51.png" width="250" height="76" alt=""></td>		<td rowspan="5" align="left" valign="top">			<img src="images/index_52.png" width="33" height="76" alt=""></td>		<td colspan="2" rowspan="4" align="left" valign="top">			<img src="images/index_53.png" width="83" height="74" alt=""></td>		<td>			<img src="images/spacer.gif" width="1" height="1" alt=""></td>	</tr>	<tr>		<td colspan="3" rowspan="4" align="left" valign="top"><img src="images/index_54.png" alt="" width="151" height="75" border="0"></td>		<td colspan="2" rowspan="3" align="left" valign="top">		  <img src="images/index_55.png" alt="" width="32" height="73" border="0" usemap="#Map2"></td><td>			<img src="images/spacer.gif" width="1" height="3" alt=""></td>	</tr>	<tr>		<td rowspan="3" align="left" valign="top">			<img src="images/index_56.png" width="119" height="72" alt=""></td>		<td colspan="2" rowspan="4" align="left" valign="top">			<img src="images/index_57.png" width="110" height="77" alt=""></td>		<td>			<img src="images/spacer.gif" width="1" height="30" alt=""></td>	</tr>	<tr>		<td rowspan="4" align="left" valign="top">			<img src="images/index_58.png" width="59" height="122" alt=""></td>		<td colspan="2" rowspan="4" align="left" valign="top">			<img src="images/index_59.png" width="39" height="122" alt=""></td>		<td>			<img src="images/spacer.gif" width="1" height="40" alt=""></td>	</tr>	<tr>		<td rowspan="4" align="left" valign="top">			<img src="images/index_60.png" width="1" height="83" alt=""></td>		<td colspan="3" rowspan="3" align="left" valign="top">			<img src="images/index_61.png" width="114" height="82" alt=""></td>		<td rowspan="3" align="left" valign="top">			<img src="images/index_62.png" width="140" height="82" alt=""></td>		<td>			<img src="images/spacer.gif" width="1" height="2" alt=""></td>	</tr>	<tr>		<td colspan="2" rowspan="2" align="left" valign="top">			<img src="images/index_63.png" width="163" height="80" alt=""></td>		<td colspan="5" rowspan="2" align="left" valign="top">			<img src="images/index_64.png" width="206" height="80" alt=""></td>		<td colspan="4" rowspan="3" align="left" valign="top">			<img src="images/index_65.png" width="184" height="81" alt=""></td>		<td>			<img src="images/spacer.gif" width="1" height="5" alt=""></td>	</tr>	<tr>		<td colspan="2" rowspan="2" align="left" valign="top">			<img src="images/index_66.png" width="110" height="76" alt=""></td>		<td>			<img src="images/spacer.gif" width="1" height="75" alt=""></td>	</tr>	<tr>		<td colspan="10">			<img src="images/index_67.png" width="467" height="1" alt=""></td>		<td colspan="4">			<img src="images/index_68.png" width="254" height="1" alt=""></td>		<td>			<img src="images/spacer.gif" width="1" height="1" alt=""></td>	</tr>	<tr>		<td>			<img src="images/spacer.gif" width="1" height="1" alt=""></td>		<td>			<img src="images/spacer.gif" width="59" height="1" alt=""></td>		<td>			<img src="images/spacer.gif" width="13" height="1" alt=""></td>		<td>			<img src="images/spacer.gif" width="26" height="1" alt=""></td>		<td>			<img src="images/spacer.gif" width="119" height="1" alt=""></td>		<td>			<img src="images/spacer.gif" width="44" height="1" alt=""></td>		<td>			<img src="images/spacer.gif" width="4" height="1" alt=""></td>		<td>			<img src="images/spacer.gif" width="57" height="1" alt=""></td>		<td>			<img src="images/spacer.gif" width="36" height="1" alt=""></td>		<td>			<img src="images/spacer.gif" width="73" height="1" alt=""></td>		<td>			<img src="images/spacer.gif" width="36" height="1" alt=""></td>		<td>			<img src="images/spacer.gif" width="33" height="1" alt=""></td>		<td>			<img src="images/spacer.gif" width="45" height="1" alt=""></td>		<td>			<img src="images/spacer.gif" width="43" height="1" alt=""></td>		<td>			<img src="images/spacer.gif" width="63" height="1" alt=""></td>		<td>			<img src="images/spacer.gif" width="1" height="1" alt=""></td>		<td>			<img src="images/spacer.gif" width="31" height="1" alt=""></td>		<td>			<img src="images/spacer.gif" width="77" height="1" alt=""></td>		<td>			<img src="images/spacer.gif" width="6" height="1" alt=""></td>		<td>			<img src="images/spacer.gif" width="140" height="1" alt=""></td>		<td>			<img src="images/spacer.gif" width="30" height="1" alt=""></td>		<td>			<img src="images/spacer.gif" width="80" height="1" alt=""></td>		<td>			<img src="images/spacer.gif" width="1" height="1" alt=""></td>		<td></td>	</tr></table><!-- End ImageReady Slices --></div></body></html>CSS:@charset "utf-8";/* CSS Document */body{	margin:0px;	position:relative;}#divGeral{	position:static;}#DivBandeiras{	position:absolute;	margin:0px;	padding:0px;	left:74%;	top:20px;	z-index:1;	clear:both;	float:right;}#divTexto{	position:absolute;	float:left;	left:30%;	top:29%;/*FIREFOX*/	*top:30%;	width:489px;	z-index:1;	clear:both;}H1{	font-family: Arial, sans-serif;	font-size:14px;	font-weight:bold;}p{	text-align:justify;	font-family:Times, serif;	font-size:14px;	font-weight:normal;	font-variant:normal;	line-height:18px;}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

Como assim não está usando frames? Olha o código do seu site:

<head><title>Vibeltaxis</title><meta name="description" content="Vibeltaxis"><meta name="keywords" content="vibeltaxis"></head><frameset framespacing="0" frameborder="no" border="0" rows="100%"><frame name="ptvu_main" noresize framespacing="0" frameborder="no" border="0" src="http://vibeltaxis.brunus.coresp.com"></frameset><noframes><h1 align=center>Vibeltaxis</h1></noframes></frameset>
Amigo, você leu os links que lhe passei? Por favor, leia e tente fazer.

Boas Gio!eu fiz este layout no ilustrator e depois exportei para html, ficando por defeito arrumado por tabelas. Eu aqui não estou a utilizar frames, mas sim layers/divs, são duas, uma nas para as bandeiras e outra para o texto.

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