mobile

johnhey · Fevereiro 25, 2014

Bom pessoal os sites que faço são em html, php, css, até ai tudo bem.

Sempre que vou fazendo vou visualizando em quase todos os browser que conheço para ver se fica bem.

Nos produtos da linha apple ficam bem.

O cômico é no android, o site site todo desconfigurado, as vezes sai com uma parte correcta, as vezes formata o tamanho da letra as vezes não.

E o pior, em um celular simples abre perfeitamente, já em outro topo de gama, fica como mencionei.

Como configurar para abrir correctamente em tudo, existe alguma forma?

William Bruno · Fevereiro 25, 2014

Não existe fórmula mágica, e nem caminho das pedras.

Comece do básico:

-> Valide html e css

-> Esteja certo de saber trabalhar com boxmodel corretamente

-> Não use posicionamentos complicados, ou muitos elementos para resolver um efeito, pois certamente existe uma forma mais simples, lógica e fácil de conseguir, e geralmente é esta que funciona melhor.

Depois de tudo isso acima, poste aqui para visualizarmos o que vc está fazendo.

xanburzum · Fevereiro 25, 2014

com CSS @media queries, como ele exibe ?

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

johnhey · Fevereiro 26, 2014

Bom pessoal, o que fiz foi o seguinte, criei primeiro um template, somente o que estiver dentro da DIV "conteudo" que pode ser alterado e é somente esta parte que não funciona.

Espero que consigam compreender e me ajudarem, desde já agradeço pela ajugda.

meu template é:

<!DOCTYPE>
<html lang="pt-br" debug="true" style="height: 100%;">
<head>
<meta name='description' content='O novo conceito de funerais em Lisboa' />
<meta name='keywords' content='hugo cardoso, agência, lisboa, funerais, funerária, urnas, cremação, cremações, trasladação, trasladações, exumação exumações, levantamentos, ossadas, cadaveres, jazigo, potes, cinzas' />
<meta property='og:site_name' content='Hugo Cardoso Agencia Funeraria' />
<meta property='og:title' content='Agencia Funeraria Lisboa - Portugal' />
<meta charset = "UTF-8">
<link rel="shortcut icon" href="favicon.ico">
<link href="css/estilo.css" rel ="stylesheet">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- TemplateBeginEditable name="doctitle" -->
<title>Hugo Cardoso Agência Funerária em Lisboa</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<div id="topo">
	<section id="cabecalho"> 
    	<header>
			<h4>"...Um novo conceito de fazer funerais em lisboa e em todo Portugal, com respeito, honestidade e seriedade, levando até si o conforto para que possa se despedir daqueles que amamos..."</h4>
		</header>
        <section id="logocabecalho">
				  <img src="imagens/logotipo.png" width="430" height="130" alt="Logotipo">
		</section>
    </section>
</div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.latest.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>

<script>
	$a = jQuery.noConflict();
</script>

<script>
$(document).ready(function() {
    $('.slideshow ul').cycle({
		fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
	});
});

</script>
<style type="text/css" media="screen">

.slideshow1 {
    -webkit-transform: rotate(-15deg);
    -moz-transform: rotate(-15deg);
    -ms-transform: rotate(-15deg);
	-o-transform: rotate(-15deg);
    transform: rotate(-15deg);
}
</style>

</head>
<body background="imagens/flores.jpg" style="position: relative; min-height: 100%; top: 0px;">
<div id="pagina">
	<div id="menu">
        <ul id="menubar">
            <li> <a href="index.php" title="Página Inicial">  Inicio </a> </li>
            <li> <a href="somos.php" title="Quem Somos"> Quem Somos </a> </li>
            <li> <a href="#" title="Serviços Funebres"> Serviços </a> 
                    <ul class= "submenu">
                    <li> <a href="funerais.php" title="Funerais"> Funerais</a> </li>
                    <li> <a href="exumação.html" title="Exumações"> Exumação </a> </li>
                    <li> <a href="traladar.html" title="Trasladações"> Trasladação </a> </li>
                    </ul>
          </li>
          <li> <a href="#" title="Outros Serviços"> Outros Serviços </a> 
                    <ul class= "submenu">
                    <li> <a href="exposicao.html" title="Tanatopraxia"> Tanatopraxia</a> </li>
                    <li> <a href="imprensa.html" title="Tanatoestética"> Tanatoestética </a> </li>
                    <li> <a href="Florista.html" title="Florista"> Florista </a> </li>
                    <li> <a href="Publicidade.html" title="Publicidade"> Publicidade </a> </li>
                    <li> <a href="Pagelas.html" title="Pagelas"> Pagelas </a> </li>
                    <li> <a href="Catering.html" title="Catering"> Catering </a> </li>
                    <li> <a href="Condolências.html" title="Condolências"> Condolências </a> </li>
                    <li> <a href="PosFuneral.html" title="Pós Funeral"> Pós Funeral </a> </li>
                    </ul>
          </li>
            <li> <a href= "#" title="Informações"> Informações </a> 
                <ul class="submenu">
                    <li> <a href="convenio.html" title="Convênios"> Convênios </a> </li>
                    <li> <a href="equipa.html" title="Equipa"> Equipa </a> </li>
                    <li> <a href="links.html" title="Links Uteis"> Links Uteis </a> </li>
                    <li> <a href="informacao.html" title="Informações Uteis"> Informações Uteis </a> </li>
                    <li> <a href="viaturas.html" title="Viaturas"> Viaturas </a> </li>
                    <li> <a href="instalacoes.html" title="Instalações"> Instalações </a> </li>
                </ul>
        </li>
            <li> <a href="artigos.html" title="Artigos Religiosos"> Artigos Religiosos </a> </li>
            <li> <a href="contacto.html" title="Formulário de Contacto"> Contactos </a> </li>
        </ul>
    </div>
	


<!-- TemplateBeginEditable name="conteudo" -->




	<div id="conteudo">
	  <div id="topo1">
	    <h3>O seu apoio nos momentos difíceis</h3>
	    <div id="esquerda">
	      <div style='position:relative; top:-30px; left:35px;'>
	        <div class="slides1">
	          <div class="slideshow1">
	            <ul>
	              <li><img src="imagens/miniatura/cristo.png" width="280" height="190"/></li>
	              <li><img src="imagens/miniatura/folheto.png"  width="280" height="190" /></li>
	              <li><img src="imagens/miniatura/capa.png"  width="280" height="190" /></li>
	              <li><img src="imagens/miniatura/cartao.png"  width="280" height="190"/></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
	    <div id="direita">
	      <div id="texto1">
	        <h5>O desaparecimento de uma pessoa que nos é próxima, é sempre um acontecimento que todos temos dificuldade em superar, e nesses momentos, torna-se necessário contar com profissionais dedicados que nos possam ajudar, por isso conte conosco.</h5>
          </div>
	      <div id="hugo"> <img src="imagens/hugo.png" width="135" height="139" alt="Hugo"> </div>
	      <div id="telemovel"> <img src="imagens/contacto.png"  width="200" height="60" alt="Contacto"> </div>
        </div>
      </div>
	  <div id="rodape">
	    <div id="esquerda1">
	      <h5>A vida traz-nos momentos de felicidade… no entanto, também nos dá outros momentos menos bons. A morte é um momento doloroso  que infelizmente todos nós passamos, e que por vezes, temos dificuldade em "gerir".</h5>
        </div>
	    <div id="direita1">
	      <h3>Funeraris</h3>
        </div>
	    <div id="fim">
	      <div id="quadro1">
	        <h5>A  morte   de alguém que nos é próxima , é um momento trágico e doloroso , e que alguns de nós temos dificuldade em ultrapassar. Nesses momentos, torna-se necessária a presença e ajuda de possas que nos são queridas, bem como de outras que são especializadas em resolver assuntos burocráticos inerentes à morte.
	          Eu Hugo Cardoso, herdeiro de uma tradição familiar de idoneidade, aposta na qualidade deste tipo de serviços, investindo na formação de profissionais para a sua satisfação!</h5>
          </div>
	      <div id="quadro3">
	        <h5> • Cremações<br>
	          • Sepulturas<br>
	          • Jazigos<br>
	          • Exumações e trasladações<br>
	          • Serviço para o exterior<br>
	          • Serviço de florista<br>
	          • Serviço de catering<br>
	          • Trasladação de cinzas e ossadas<br>
	          • Tanatopraxia e Tanatoestética<br>
	          • Pessoal altamente qualificado<br>
	          • Artigos religiosos e funerários<br>
	          • Uma vasta gama de veículos fúnebres<br>
            </h5>
          </div>
	      <div id="quadro4"> <img src="imagens/preco.png" align="middle" width="180" height="123" alt="Logotipo"> </div>
        </div>
      </div>
    </div>
	<!-- TemplateEndEditable -->
	<footer>
<section id="contactos">
<div id="fixo">
<h3>
Telefone<br>
<hr>
236 006 920<br>
<hr>
FAX<br>
<hr>
258 062 735
</h3>
</div>
<div id="movel">
<h3>João Cardoso<br>
<hr>953 235 446<Br>
<hr>Maria Cardoso<br>
<hr>987 175 065 <br>
</h3>
</div>
<div id="morada">
<h3>Rua Cidade Lisboa, Nº 25 - Bairro Angola<br>
<hr>
2685-037 Camarate</h3>
</div>
<div id="email">
<hr>
<h3>geral@cardoso.com.pt</h3>
<hr>
</div>
<div id="visitantes">
<h3>Visitante nº. <?php include("contador.php"); ?>
</h3>
</div>
</section>
<section id="direitos">
© - Todos os direitos de autor reservados a John Trindade </section>
</footer>
</div>
</body>
</html>

meu css é:

/* CSS Document */
body {
  width:1023px;
  height:880px;
}

* {
  margin:0 auto;
}

#pagina{
	width:1023px;
	height:655px;
	position:absolute;
}

#cabecalho {
	position: relative;
	margin-top: 0px;
	padding: 0px;
	background: url(../imagens/topo.png);
	height: 185px;
}
#cabecalho h4 {
		font-weight: normal;
		color: #fff;
	}

#logocabecalho img {
		position: absolute;
		top: 30px;
		padding-left:55px;
}
#cabecalho h4 {
		margin-left: 600px;
		margin-right:20px;
		position: relative;
		padding: 55px;
		right: 0px;
		text-align: justify;
	}
	
#menu{
float:left;
z-index:3;
}

#menubar{
width:1024px;
height:53px;
z-index:2;
}
ul#menubar, ul.submenu{
font: Italic 15px "Arial", sans-serif;
list-style: none;
margin: 0;
padding: 0px;
z-index:1;
}
ul#menubar li{
	width:144.2px;
	text-align:center;
	position:relative;
	float:left;
	margin-right: 2px;
z-index:2;
}
ul#menubar li a{
color:#00F;
text-decoration: none;
display:block;
width:144px;
height:53px;
line-height:53px;
background:url(../imagens/botoes.png);
}

ul#menubar li:hover > a{
color:#FFF;	
background:url(../imagens/botoes1.png);
}
ul#menubar .submenu{
margin-top:0px;	
margin-left:0px;
}

ul#menubar .submenu li a{
margin-top:-5px;
}

ul#menubar ul.submenu{
	display:none;
	position:absolute;
	top:53;
	left:0px;
	z-index:2;
}

ul#menubar li:hover .submenu{
	display:block;
}

#conteudo {
margin-left:0;
margin-top:54px;
width:1023px;
height:800px;
background: url(../imagens/fundo.png) no-repeat;
border-radius:25px;
}

#conteudo h3{
padding-top:20px;
padding-left:550px;
text-align:center;	
}

#esquerda{
width:511px;	
margin:0px;
padding:0px;
float:left;
position:absolute;
z-index:0;
}

#direita{
width:511px;
height:280px;
float:right;
z-index:0;
}

#texto1{
width:361px;
height:150px;
float:left;
}

#texto1 h5{
text-align:justify;
font: normal 16px "times new roman", sans-serif;
padding-top:20px;
text-align: justify;
}

#hugo{
float:right;
width:140px;
height:225px;
padding-top:55px;
padding-left:5px;
}

#telemovel{
float:left;
width:280px;	
padding-left:80px;
}

#topo1{
height:320px;
z-index:0;
}

#rodape{
width:1023px;
height:350px;
margin:0;
padding:0px;
}

#esquerda1{
width:520px;
float:left;
}

#direita1{
width:500px;
float:right;
height:58px;
}

#esquerda1 h5{
	text-align:justify;	
	font: normal 16px "times new roman", sans-serif;
	padding-left:20px;
}

#direita1 h3{
	text-align:center;
	margin:0px;
	padding:0px;
	padding-top:20px;
}

#fim{
width:1023px;
height:293px;
float:left;
}

#quadro1{
width:255px;
height:295px;
margin:0px;
float:left;
}

#quadro2{
width:320px;
height:260px;
margin:0px;
float:left;
padding-top:25px;
}

#quadro3{
width:260px;
height:295px;
margin:0px;
float:left;
}

#quadro4{
width:180px;
height:210px;
margin:0px;
float:left;
padding-top:80px;
}

#quadro1 h5{
text-align:justify;
margin:0px;
padding-left:20px;
font: normal 16px "times new roman", sans-serif;
}

#quadro3 h5{
text-align:left;
margin:0px;
padding-left:5px;
font: normal 16px "times new roman", sans-serif;
line-height:22px;
padding-top:10px;
}

.slideshow1 {
width:500px;
height:280px;
padding:0px;
overflow:hidden;
z-index:0;
}

.slideshow1 ul{
list-style-type:none;
margin:0px;
padding:0px;
}

footer{
	width:1023px;
	height:190px;
	position:absolute;
	border-radius:25px;
	background:url(../imagens/rodape.png);
}

#contactos{
width:1023px;
height:160px;
}

#fixo{
width:200px;
text-align:center;
line-height:35px;
margin-left:10px;
padding-top:15px;
padding-left:55px;
float:left;
}

#movel{
width:200px;
float:left;
text-align:center;
line-height:35px;
margin-left:35px;
padding-top:15px;
padding-left:05px;
}

#morada{
width:460px;
float:left;
text-align:center;
line-height:35px;
margin-left:35px;
padding-top:15px;
padding-left:05px;
}

#email{
width:430px;
height:46px;
float:right;
text-align:center;
line-height:35px;
margin-left:20px;
padding-top:2px;
padding-right:20px;
padding-left:35px;	
}

#visitantes{
text-align:center;
font: bold 22px "DS-digital", sans-serif;
color:#FFF;
}

#direitos{
width:1020px;
height:20px;
padding-top:10px;
text-align:center;	
}


/*------------------------------
=QUEM SOMOS
------------------------------*/

#titulos h3{
color:#333;
padding-left:45px;
padding-top:30px;
text-align:left;
}

#texto{
padding-top:30px;
padding-left:45px;
font: normal 18px "times new roman", sans-serif;
text-align:justify;
line-height:35px;
padding-right:45px;
}

#texto h4{
padding-top:30px;
font: normal 18px "times new roman", sans-serif;
text-align:center;
}

#assinatura{
padding-top:25px;
font-size:40px;
font-family: "kunstler_scriptregular", normal, sans-serif;
text-align:center;
}

johnhey · Fevereiro 27, 2014

O erro é na DIV "quadro1", o que acontece é que fica maior que eu determinei, o restante esta correcto.

Exemplo, coloquei o tamanho da fonte de 16px; ela é exibida do tamanho como se estivesse no pc, ou seja, ultrapassa o rodapé da página.

Entrar

Arquivado

mobile

Recommended Posts

johnhey 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

xanburzum 169

Compartilhar este post

Link para o post

Compartilhar em outros sites

johnhey 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

johnhey 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Girls From Your Town - Anonymous Casual Dating - No Selfie

Alteracao Tema Wordpress Profolio

Alteracao Tema Wordpress Profolio

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante