Ir para conteúdo

Arquivado

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

jonathanrn

Full screen ou Full size ou adaptativa? O.o

Por , em Desenvolvimento frontend

Recommended Posts

jonathanrn    2

jonathanrn
Postado

E ai galera, beleza?

venho humildemente aprimorar meus conhecimentos em html, css.. haha

bom, estou com dificuldade em aprender o que algumas pessoas chamam de full size ou full screen, algo assim o.O

Enfim, de maneira q o exemplo q vou dar logo abaixo se adapte ao tamanho de tela (o campo de formulario, as palavras e a imagem) juntas, porque abrir esse exemplo na tela de 14 polegadas fica legal mas na de 22 não (o formulario e a imagem ficam distante um do outro e eles não crescem junto com a tela de 22 polegadas)

Bom é isso galera, conto com o conhecimento de vocês! :)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>

<style type="text/css">



* img{
max-width:100% !important;
height:auto !important;
}

.coluna-esquerda {
float:left;
margin-left:5% ;
max-width:100%;
height:auto;
width: ;

}

.coluna-direita {
float:right;
display:block;
width: ;

}



.um {
background-color:#002f70 ;
border:1px solid #CCC ;
padding:5px;
font-family:eurofurence;
color:#f19800;
text-align:center;

}

.dois {
font-family:eurofurence;
padding: ;
color:#f19800;
font-size:20px;
text-align:center;
}

.treis {
text-align:center;
background-color:#f19800;
color:white;
padding:5px;
font-size:36px;
}

.quatro {
text-align:center;
background-color:#002f70 ;
color:white;
font-size:24px;
}

.junta {
background-color:#002f70 ;
height:10px;
}

.cinco {
text-align:center;
background-color:#002f70 ;
color:#f19800;
}


button {
display:block;
width:227px;
height:35px;
color:white ;
text-align:center;
background-color:#f19800;

}

fieldset {
border-color:#f19800;
border-style:solid;
border-top:none;

}

</style>
</head>

<body >

<div class="coluna-esquerda">

<div class="treis">LINGUIÇA ,</div>

<div class="quatro">LINGUIÇAS ,</div>

<div class="junta"></div>
<div class="cinco">FAÇA AQUI SEU PEDIDO <br>
DE LINGUIÇAS, </div>



<fieldset>
<div style="margin-top:30px"></div>
<form action="" method="post" name="contato" />
Nome*<br>
<input id="nome" type="text" size="28" /><br>

<div style="margin-top:5px"></div>

Email*<br>
<input id="email" type="email" size="28" /><br>

<div style="margin-top:5px"></div>

LINGUIÇA, *<br>
<input id="vidraçaria" type="text" size="28" /><br>

<div style="margin-top:5px"></div>

Telefone*<br>
<input id="telefone" type="tel" size="28" /><br>

<div style="margin-top:5px"></div>

Endereço*<br>
<input id="endereço" type="text" size="28" /><br>

<div style="margin-top:5px"></div>

Cep*<br>
<input id="cep" type="text" size="28" /><br>

<div style="margin-top:5px"></div>

LINGUIÇA, *<br>
<input id="cnpj" type="text" size="28" /><br>

<div style="margin-top:5px"></div>

Principal fornecedor de LINGUIÇA, <br>
<input id="principal fornecedor de vidros" type="text" size="28" /><br>
<br>

<button type="submit">Envie seu pedido<br> de amostras </button>

</form>
</fieldset>
<br>
</div>




<div class="coluna-direita">

<div class="um">


<b>LINGUIÇAS, </b>LINGUIÇA, LINGUIÇA, <b>LINGUIÇA, LINGUIÇA</b>

</div>

<div class="dois">
 LINGUIÇA, LINGUIÇA, LINGUIÇA, LINGUIÇA
</div>

<img src="[url=http://i.imgur.com/HCvpuRN.png]http://i.imgur.com/HCvpuRN.png[/url]" alt="" />
</div>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Souza Santos    6

Guilherme Souza Santos
Postado

estude responsive web.

manipule as margens e padding pelo css.
evite css inline.

 

criei uma estrutura base,

coluna esquerda e direira usando porcentagem e sendo manipulada atraves da div (.container)

espero ter ajudado.

http://codepen.io/anon/pen/JoWwyM

Compartilhar este post

Link para o post
Compartilhar em outros sites

angelorubin    142

angelorubin
Postado

Só complementando sobre responsive web design - https://www.google.com.br/search?q=learning+responsive+design&ie=utf-8&oe=utf-8&gws_rd=cr&ei=yp-6VMHzKfC0sAT0m4LgDg#q=learning+responsive+web+design

Compartilhar este post

Link para o post
Compartilhar em outros sites

WictorP    9

WictorP
Postado

Você usou max-width '-' por isso não foi, quer dizer que o máximo que o width pode chegar é 100%, mas não que ele tem que ser 100%.

 

altere para isso

* img{
width:100% !important;
height:auto !important;
}

.coluna-esquerda {
float:left;
margin-left:5% ;
width:100%;
height:auto;
}

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