Ir para conteúdo

POWERED BY:

Arquivado

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

Isabel

Layout de acordo com resolução monitor

Por , em Desenvolvimento frontend

Recommended Posts

Isabel    0

Isabel
Postado

Olá, Boa tarde! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

To com um probleminha aqui com dimensão de layout.. o que acontece eh que eu preciso configurar de acordo com a resolução do monitor do usuário, me falaram que dá pra fazer em php.. eu jah vi com javascript.. mais da teria que fazer outro site pra redirecionar e isso dá trabalho =/

Jah tentei usar um layout liquido... mais naum gostei do resultado (as imagens aumentaram sem proporção).. eh achei o posicionamento fragil demais =/

ou sei lah.. algum metodo usando ajax, procurei bastante.. mais naum achei nada :mellow:

 

alguem pode ajudar?! ;p

vlw..

Compartilhar este post

Link para o post
Compartilhar em outros sites

Isabel    0

Isabel
Postado

Olá, Boa tarde! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

To com um probleminha aqui com dimensão de layout.. o que acontece eh que eu preciso configurar de acordo com a resolução do monitor do usuário, me falaram que dá pra fazer em php.. eu jah vi com javascript.. mais da teria que fazer outro site pra redirecionar e isso dá trabalho =/

Jah tentei usar um layout liquido... mais naum gostei do resultado (as imagens aumentaram sem proporção).. eh achei o posicionamento fragil demais =/

ou sei lah.. algum metodo usando ajax, procurei bastante.. mais naum achei nada :mellow:

 

alguem pode ajudar?! ;p

vlw..

Ah, esqueci!... eu tava vendo os scripts aqui no laboratorio.. eh naum vi nada..

bom.. eu fico na dúvida também.. pq eu vi um metodo php que misturava com js eu acho :mellow:

se eu naum me engano era um metodo usando o get...

num sei tbm se dá pra combinar php com ajax! ficaria até melhor ;p

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo André    0

Paulo André
Postado

Então, não viu nada porque com PHP não usual se fazer isto.

 

A indicação que eu iria dar mesmo é layout líquido, método que grandes portais usam.

 

Com programação mesmo, o mais próximo que se usaria é javascript, o qual ainda sim ficaria um código muito sujo usar desta forma.

 

Talvez você explicando detalhadamente como tentou fazer o layout líquido a solução pode estar na forma que você tentou fazer.

 

[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

Isabel    0

Isabel
Postado

Então, não viu nada porque com PHP não usual se fazer isto.

 

A indicação que eu iria dar mesmo é layout líquido, método que grandes portais usam.

 

Com programação mesmo, o mais próximo que se usaria é javascript, o qual ainda sim ficaria um código muito sujo usar desta forma.

 

Talvez você explicando detalhadamente como tentou fazer o layout líquido a solução pode estar na forma que você tentou fazer.

 

[]'s

 

na verdade atualmente eu to com o seguinte templante

 

CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>:: MDnet Soluções em Tecnologia - Home ::</title>

 

<style type="text/css">

 

#rodape { margin-left: 253px;}

 

DIV.imagem2 {

position: relative;

top: 383px;

left:0px;

margin-left:0px;

margin-top:-40px;

}

body { margin: 0px;

font-family:Arial, Helvetica, sans-serif;

color:#000000;

color:#000000;

 

}

#container {

display: table;

top:0;

margin-left:20%;

width: 770px;

 

}

 

#esquerda { height: 300px;

float: left;

width: 160px;

padding: 0px;

background: #80b5d3;

margin-top: 10px;

}

#esquerda li{

list-style: none; padding: 1px 1px;

background: #80b5d3;

margin-left: 0px;

}

 

#esquerda li:hover{

list-style: none;

display:block;

background: #EAEAEA;

margin-left: 0px;

}

#esquerda ul{

list-style: none;

padding-left: 5px;

padding-top: 10px;

margin-left: 0px;

}

#direita {

height: 300px; width: 160px;

float: right;

background: #80b5d7;

margin-top: 10px;

}

#box{

display:block;

float:right;

margin: 10px 25px;

width:400px;

height:300px;

overflow:auto;

scrollbar-3d-light-color:#ffffff;

scrollbar-arrow-color:#80b5d3;

scrollbar-base-color:#ffffff;

scrollbar-dark-shadow-color:#ffffff;

scrollbar-face-color:#f1f1f1;

scrollbar-highlight-color:#ffffff;

scrollbar-shadow-color:#80b5d3;

}

 

ul#menu {

list-style: none;

background: #f1f1f1;

margin: 0;

padding: 0;

}

 

ul#menu li a {

height: 18px;

display: block;

padding-top: 2px;

padding-left: 3px;

text-decoration: none;

color: #000;

font: 12px Verdana;

font-weight:bold

}

 

ul#menu li a:hover {

 

background: #E1E8F8;

color: #085d94;

 

}

ul#menu li a, ul

#menu li a:hover{

 

}

 

</style>

 

</head>

<body>

 

<script>

 

function AbrirAjax() {

var Ajax;

try {Ajax = new XMLHttpRequest(); // XMLHttpRequest para browsers mais populares

}catch(ee) {

try {Ajax = new ActiveXObject(" Msxml2.XMLHTTP");

}catch(e) {

try {Ajax = new ActiveXObject("Microsoft.XMLHTTP");

}catch(e) {Ajax = false;

}

}

}

return Ajax;

}

 

//Le o arquivo escolhido

function LerArquivo(url){

var field = document.getElementById("box");

var ajax = AbrirAjax();

 

ajax.open("GET","retorna.php?p="+url,true);

ajax.onreadystatechange = function() {

if(ajax.readyState == 4) {

if(ajax.status == 200) {

var imprimir = ajax.responseText;

field.innerHTML=imprimir;

} else {

field.innerHTML=erro;

}

}

}

ajax.send(null);

return false;

}

 

$(document).ready(

function()

{

window.moveTo(0,0);

window.resizeTo($(document).width(),$(document).height());

 

});

</script>

 

<div id="container">

<div class="imagem1"><img style="width: 770px; height: 145px;" src="banner.jpg"></div>

<div id="esquerda">

<ul id="menu">

<li><a href="#" onclick="LerArquivo('mdnet.php')">Empresa</a></li>

<li><a href="#">Software</a></li>

<li><a href="#">Serviços</a></li>

<li><a href="#">Download</a></li>

<li><a href="#" onclick="LerArquivo('contato.php')">Contato</a></li>

 

</ul>

 

</div>

 

<div id="direita"></div>

 

<div id="box">

<p>

br<br>

br<br>

br<br>

br<br>

br<br>

br<br>

br<br>

br<br>

br<br>

br<br>

br<br>

br<br>

br<br>

br<br>

br<br>

br<br>

br<br>

br<br>

br<br>

br<br>

br<br>

br<br>

br<br>

br<br>

br<br>

br<br>

br<br>

br<br>

br<br>

br<br>

</p>

</div>

</div>

 

<div id="rodape">

<img style="width: 770px; height: 63px;" src="rodape.jpg">

</div>

 

</body>

</html>

assim sem ser liquido.. enfim.. tentei mudar fazendo o liquido, soh que tive dificuldade pra ajustar a box ao centro..

eh mesmo assim.. depois eu vi que as imagens de banner eh rodapé ficaram grandes demais =/

ou vai ver que eu to fazendo besteira mesmo!

 

então o php foi uma pessoa que me disse que viu num curso o metodo <_<

 

obrigada pela atenção *-*

Compartilhar este post

Link para o post
Compartilhar em outros sites

inforsis    1

inforsis
Postado

Boa Tarde Isabel!

Dá uma lida nos artigos do pa_bruno sobre posicionamento de layouts que o conteudo pode lhe ser util.

 

http://imasters.com.br/artigo/3606/web...ento_e_layouts/

 

Surgindo as dúvidas, post novamente.

 

Até Mais. Imagem Postada

Compartilhar este post

Link para o post
Compartilhar em outros sites

Isabel    0

Isabel
Postado

Obrigadaa ;p

 

vou dar uma olhada..

tava vendo uns links que ele tinha deixado por aqui...

mais maioria quebrado... enfim xD

 

espero que resolva meu problema com as imagens que tão gigantesca com a mudança de resolução..

qualquer coisa.. daqui a pouquinho posto de novo

 

abraço ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Isabel    0

Isabel
Postado

mais uma coisa ;p

 

ex: tenho um layout posicionado no centro.. eh uma imagem no topo como banner eh uma em baixo como rodapé..

se o meu posicionamento estiver okay.. as imagens ficarão normais com a mudança de resolução ou vão continuar ficando grandes?!

caso ficarem grande, uq eu posso fazer pra ter um controle?!

foi a unica coisa que eu naum achei nos artigos http://forum.imasters.com.br/public/style_emoticons/default/pinch.gif

 

 

abraço ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Isabel    0

Isabel
Postado

então.. num tah publicado.. mais eu fiz um exemplo aqui com um layout pronto..

soh adicionei as duas imagens ;p.. dá uma olhada em resolução 800x600 pra ver como tah aumentando:

 

CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Layout 36</title>

 

<style type="text/css">

 

html,body{margin:0;padding:0}

 

body{

font: 76% arial,sans-serif;

text-align:center

}

p{

margin:0 10px 10px

}

 

a{display:block;color: #006;padding:10px

}

div#header{

position:relative

}

 

div#header a{

position:absolute;

right:0;

top:23px

}

div#container{

text-align:left

}

div#content p{

line-height:0.9

}

div#navigation{

background:#B9CAFF

}

div#extra{

background:#FF8539

}

div#footer{

background: #333;

color: #FFF

}

div#footer p{

margin:0;

padding:5px 10px

}

div#footer a{

display:inline;

padding:0;

color: #C6D5FD

}

div#container{

width:770px;

margin:0 auto

}

div#content{

float:right;

width:500px

 

}

div#extra{

float:right;

width:500px

}

div#footer{

clear:both;

width:100%

}

</style>

<script type="text/javascript" src="filler.js"></script>

</head>

 

<body>

<div id="container">

 

<div id="header"><img style="width: 770px; height: 145px;" src="banner.jpg"></a></div>

 

<div id="wrapper">

<div id="content">

 

<p><strong>1) Content here.</strong> column long long column very long fill fill fill long text text column text silly very make long very fill silly make make long make text fill very long text column silly silly very column long very column filler fill long make filler long silly very long silly silly silly long filler make column filler make silly long long fill very.</p>

<p>very make make fill silly long long filler column long make silly silly column filler fill fill very filler text fill filler column make fill make text very make make very fill fill long make very filler column very long very filler silly very make filler silly make make column column </p>

<p>fill long make long text very make long fill column make text very silly column filler silly text fill text filler filler filler make make make make text filler fill column filler make silly make text text fill make very filler column very </p>

<p>column text long column make silly long text filler silly very very very long filler fill very fill silly very make make filler text filler text make silly text text long fill fill make text fill long text very silly long long filler filler fill silly long make column make silly long column long make very </p>

</div>

 

</div>

 

<div id="navigation">

<p><strong>2) Navigation here.</strong> long long fill filler very fill column column silly filler very filler fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long filler </p>

</div>

 

<div id="extra">

<p><strong>3) More stuff here.</strong> very text make long column make filler fill make column column silly filler text silly column fill silly fill column text filler make text silly filler make filler very silly make text very very text make long filler very make column make silly column fill silly column long make silly filler column filler silly long long column fill silly column very </p>

</div>

 

<div id="footer">

<img style="width: 770px; height: 63px;" src="rodape.jpg"></div>

 

</div>

 

<script type="text/javascript">AddFillerLink("content","navigation","extra")</script>

</body>

</html>

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