Ir para conteúdo

POWERED BY:

Arquivado

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

myzinha

site em html/css se adaptar em varias resoluções

Por , em Desenvolvimento frontend

Recommended Posts

myzinha    0

myzinha
Postado

olá pessoal tudo beleza???

eu preciso de ajuda no meu site eu estava fazendo meu site no photoshop e usava tabelas para apresentar normal acho q vcs sabem como fazer mas apresentava varios erros de incompatibilidade entao eu dei uma lida nos artigos de Tableless e gostei muito pq você usa html como se deve usar e css para aplicar os efeitos no seu site entao foi o que fiz ou pelo menos tentei fazer meu site é simples tem topo, corpo e rodapé uso divs para cada parte para os textos uso paragrafo, H's, span etc axo que esta correto meu css é externo, bom enfim vamos a duvida.

Quando fazia esse site eu testava nos brawser ie, fox,moz e netscape a resolução de minha tela é 1280X1024. Nessas condiçoes meu site só fica correto no ie nos demais o rodapé fica com um espaço em branco embaixo parece que o rodapé subiu pra cima mas ele esta onde é para estar só não queria que esse espaço ficasse.

1° como posso arruma-lo?

veja o css:

/* CSS Document */
*{
margin:0px;
padding:0px;

}

body{
	font-family:"sans-serif",Helvetica,Arial;
	color:#798893;
	font-size:12px;
	background: url(images/fundo.jpg) no-repeat center center;
    text-align:center; /* hack para o IE para não dar erro na centralização do site*/
	}
.container{
	height:100%;
	width:100%;
	margin:0 auto;         
    text-align:left;/*"remédio" para o hack do IE */ 
}

.box{
    width:980px;
	margin-left:9%;
	margin-top:1%;

	}
.box span.bordatopo{
	display:block;
	height:30px;
}
	
.box span.bordatopo{
    background: url(images/bordatopo.png) no-repeat center top;

	
}

.conteudo{
	background: #8AA4BB; 
    width:980px;
	margin-top:-5px;	
}
.conteudo a{
text-decoration:none;
color:#ffffff;
cursor:pointer;
}

	
.flash{
	margin-left:9%; 
	background-color:#2d6aa9; 
	height:310px; 
	width:980px;
	opacity:.50;
	filter:alpha(opacity=50);
	position:relative;
	}
	
h2{
	color:#ffffff;
	margin-left:60%;;
	font-family: Helvetica;
	font-size: 18px;
}
/*----titulos dos aparelhos principais----------------------------------------------*/	
.title{
	color:#25a7cc;
	font-family:"sans-serif";
	font-size: 12px;
}
	
.title h1.pixel{
	margin-top:2%;
	margin-left:16%;
	position:absolute;
}

.title h1.accent{
	margin-top:2%;
	margin-left:36%;
	position:absolute;
}
.title h1.harmony{
	margin-top:2%;
	margin-left:56%;
	position:absolute;
}
.title h1.light{
	margin-top:2%;
	margin-left:76%;
	position:absolute;
}
sup.super{
		font-size:10px;
	
}

/*----1box azul com a imagen----------------------------------------------*/	
.box2{
	width:235px;
	margin-left:8%;
	margin-top:5%;
	position:absolute;
	}
	
.box2 span.boxtopo2, .box2 span.boxbase2{
	display:block;
	height:11px;
}
	
.box2 span.boxtopo2{
    background: url(images/boxtopop.png) no-repeat center top;
	
}
.box2 span.boxbase2{
    background: url(images/boxbasep.png) no-repeat center bottom;
	
}
 
.conteudo2{
    background:#e5ebf0;
    width:205px;
	margin-top:0%;
	margin-left:14px;

	}
.conteudo2 span.image{

		height:212px;
		margin-left:-8px;
			
}
.conteudo2 b.link{
	font-size:12px;
	color:#5ba7f5;
	margin-left:35%;
	position: relative;
}
/*----2box azul com a imagen--------------------------------------------------*/
.box3{
	width:235px;
	margin-left:30%;
	margin-top:5%;
	position:absolute;
	

	}
	
.box3 span.boxtopo3, .box3 span.boxbase3{
	display:block;
	height:11px;
}
	
.box3 span.boxtopo3{
    background: url(images/boxtopop.png) no-repeat center top;
	
}
.box3 span.boxbase3{
    background: url(images/boxbasep.png) no-repeat center bottom;
	
}

.conteudo3{
	
    background:#e5ebf0;
    width:205px;
	margin-left:14px;
	
}
.conteudo3 span.image2{

		height:212px;
		margin-left:-8px;
	
}
.conteudo3 b.link{
	font-size:12px;
	color:#5ba7f5;
	margin-left:42%;
}
/*----4box azul com a imagen--------------------------------------------------*/
.box4{
	width:235px;
	margin-left:52%;
	margin-top:5%;
	position:absolute;
	}
	
.box4 span.boxtopo4, .box4 span.boxbase4{
	display:block;
	height:11px;
}
	
.box4 span.boxtopo4{
    background: url(images/boxtopop.png) no-repeat center top;
	
}
.box4 span.boxbase4{
    background: url(images/boxbasep.png) no-repeat center bottom;
	
}

.conteudo4{
	
    background:#e5ebf0;
    width:205px;
	margin-left:14px;
	
}
.conteudo4 span.image3{

		height:212px;
		margin-left:4%;
	
}
.conteudo4 b.link{
	font-size:12px;
	color:#5ba7f5;
	margin-left:42%;
}

/*----5box azul com a imagen--------------------------------------------------*/
.box5{
	width:234px;
	margin-left:74%;
	margin-top:5%;
	position:absolute;
	}
	
.box5 span.boxtopo5, .box5 span.boxbase5{
	display:block;
	height:11px;
}
	
.box5 span.boxtopo5{
    background: url(images/boxtopop.png) no-repeat center top;
	
}
.box5 span.boxbase5{
    background: url(images/boxbasep.png) no-repeat center bottom;
	
}

.conteudo5{
    background:#e5ebf0;
    width:205px;
	margin-left:13px;
	
}
.conteudo5 span.image4{

		height:212px;
		margin-left:5%;
	
}
.conteudo5 b.link{
	font-size:12px;
	color:#5ba7f5;
	margin-left:42%;
	position:relative;
}


b.link a{
	text-decoration:none;
	margin-left:-2%;
	color:#5ba7f5;
	position:relative;
  }

/*---divisoes---------------------------------------------------*/
span.div1{
	    width:33px; 
	    height:326px;
		margin-left:28%;
	    margin-top:2%;
	    position:absolute;
}

span.div2{
	    width:33px; 
	    height:326px;
		margin-left:49%;
	    margin-top:2%;
	    position:absolute;
}
span.div3{
	    width:33px; 
	    height:326px;
		margin-left:71%;
	    margin-top:2%;
	    position:absolute;
}

	
/*------rodapé------------------------------------------------------------*/
.base{
	margin-top:30%;
	display: block;
    background-color:#b9bfbe;
	height:100px;
	padding-bottom:5px;
	width:100%;
	opacity:.70;
	filter:alpha(opacity=70);
	position: relative;
    }
	
.base span.div{
	color:#666;
	margin-left:8%;
	font-size:12px;
	position:relative;
}
/*-----logo effcom endereço calllaser------------------------------------------------------------------*/
.base span.end{
	color:#333;
	margin-left:5%;
	position:relative;
	}
	
.base span.effcom{
	margin-left:88%;
	position:relative;
}
.base span.makpubli{
	color:#000;
	font-family:"Arial";
	font-size:7px;
	margin-left:88%;
}

e o html


<html>
<head>
<title>Call Laser Locações</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<link href="style1.css" rel="stylesheet" type="text/css">
</head>
<body>
<br><br><div class="container">
<!-- --topo----------------------------------------------------------------------------------------------->
<div class="box"><!-- abre box azul com menu-->
<span class="bordatopo"></span>
<div class="conteudo">
  <h2><a href="index.html" target="" >Home</a> | <a href="quemsomos.html" target="" >Quem somos</a> | <a href="serviços" target="" >Serviços</a> | <a href="contatos" target="">Contato</a></h2><br></div>
</div><!-- fecha box azul com menu-->

<div class="flash"><!-- abre o banner-->
o flash vai aqui
</div><!-- fecha o banner-->
<!-- --------------conteudo----------------------------------------------------------------------------------->

<div class="title"><!-- titulos -->
<h1 class="pixel">PIXEL<sup class="super">CO2</sup></h1><h1 class="accent">ACCENT<sup class="super">XL</sup></h1>
<h1 class="harmony">HARMONY<sup class="super">XL</sup></h1><h1 class="light">LIGHT SHEER</h1>
</div><!-- fecha o titulo-->

<div class="box2"><!-- abre o box azuis pequenos com imagens links de cada um-->
<span class="boxtopo2"></span>
<div class="conteudo2"><span class="image"><img src="images/pixel_co2_n.gif" alt=""></span><b class="link"><a href="pag1.html" target="">Ver detalhes</a></b></div>
<span class="boxbase2"></span>
</div>

<div class="box3">
<span class="boxtopo3"></span>
<div class="conteudo3"><span class="image2"><img src="images/accent_xl.gif" alt=""></span><b class="link"><a href="pag2.html" target="">Ver detalhes</a></b></div>
<span class="boxbase3"></span>
</div>

<div class="box4">
<span class="boxtopo4"></span>
<div class="conteudo4"><span class="image3"><img src="images/xeo.gif" alt=""></span><b class="link"><a href="pag3.html" target="">Ver detalhes</a></b></div>
<span class="boxbase4"></span>
</div>

<div class="box5">
<span class="boxtopo5"></span>
<div class="conteudo5"><span class="image4"><img src="images/light.gif" alt=""></span><b class="link"><a href="pag4.html" target="">Ver detalhes</a></b></div>
<span class="boxbase5"></span>
</div><!-- fecha o box azuis pequenos-->

<div class="div"><!-- abre divisoes-->
<span class="div1"><img src="images/div.gif" alt=""></span>
<span class="div2"><img src="images/div.gif" alt=""></span>
<span class="div3"><img src="images/div.gif" alt=""></span>
</div><!--fecha divisoes-->
<!-- --------------------base--------------------------------------------------------------------------- -->
<div class="base"><!-- -------------abre rodapé---------------------------------------------------------- -->
<br>
<span class="end">Rua: Benjamin Constant, 808 - Ourinhos - SP - CEP 19900-231 Fone:(14) 3322-2808 / Fone/Fax:(14) 3322-1059</span><br>
<span class="div">............................................................................................................................................................................................................................................................................................................................................</span>
<span class="effcom"><img src="images/effcom.gif" alt=""><span class="makpubli">Marketing & Publicidade</span></span>
</div>
</div>
</body>
</html>

2- como tinha dito eu fiz com base nessa resolução de tela 1280X1024 mas qd eu abri ele em outra tela witscreen o site fica msm tamanho até o rodapé fica normal sem um espaço em baixo branco só que ele passa a ter um espaço nas laterais sinistro!!!

o site fica no lugar mas surge um espaço branco do lado direito ai aparece barra de rolagem e tudo.

Como arrumo isso? Preciso que ele fique se adapte em qualquer resolução.

veja que o index.html tem uma div que recebe o conteudo todo msm assim não funcionou colocando isso...

 

 

3- falando em rodapé repare que ele esta com transparencia consegui coloca-la sem que o conteudo dessa div ficasse transparente tb só que isso só funcionou no ie como faço para que nos outros brawsers o conteudo não fique transparente tb. já tentei colocar imagem mas não consegui direito pq o ie ficava errado se não tiver soluçao e a imagem for a unica soluçao me esplique por favor a maneira correta

repito que meu css é EXTERNO prefiro para o caso de surgir possiveis erros

 

 

 

Agradeço a atençao e espero que alguem por favor me ajude com essas duvidas pq até agora não acertei um site.... :(

Compartilhar este post

Link para o post
Compartilhar em outros sites

André do Vale    76

André do Vale
Postado

Posta um link para podermos ver melhor com as imagens declaradas no HTML e CSS.

 

Artigos que podem ajudar:

http://forum.imasters.com.br/index.php?/topic/258273-min-width-e-width100-ie-e-ff/

http://forum.imasters.com.br/index.php?/topic/347842-layout-liquido/

 

Todos os artigos (ótimos por sinal): http://forum.imasters.com.br/index.php?/topic/314618-relacao-de-todos-os-artigos/

Compartilhar este post

Link para o post
Compartilhar em outros sites

myzinha    0

myzinha
Postado

Posta um link para podermos ver melhor com as imagens declaradas no HTML e CSS.

 

Artigos que podem ajudar:

http://forum.imasters.com.br/index.php?/topic/258273-min-width-e-width100-ie-e-ff/

http://forum.imasters.com.br/index.php?/topic/347842-layout-liquido/

 

Todos os artigos (ótimos por sinal): http://forum.imasters.com.br/index.php?/topic/314618-relacao-de-todos-os-artigos/

 

entao mas você fala link como pq o site não esta pindurado entao sem link...??????????

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

myzinha, poste o link do seu site, funcionando na web, vai ficar mais fácil pro pessoal tentar ajudar.

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