Modo listagem | Modo Linear

mpmont · (Esta mensagem foi modificada pela última vez a: 03-03-2010 23:28 por mpmont.)

Boa tarde a todos,

estou com alguns problemas na construção de um layout que me foi pedido.

em primeiro lugar a imagem de como ele deve ficar:
ver imagem

ok agora vamos lá ver se eu explico isto: (este layout é muito anormal na web, ja vão perceber o porquê da minha dificuldade)

como estão a ver o layout deve estar centrado na tela: esta parte é facil;

o header também é facil de desenhar mas o problema é que a sua posição deve ser fixa, ou seja sempre que o utilizador faz scroll no browser ele o header mantêm-se. Essa parte eu também consegui fazer, basta colocar position: fixed;

o problema começa quando o left e right também devem ser fixos, ficando sempre visiveis quando o utilizador faz scroll.

E como se isto não basta-se para complicado o footer também deve estar sempre colado ao fundo da janela, ou seja os artigos devem passar por trás do footer e por trás do header.

Assim aquilo que eu descrevo como artigo com scroll deve ser o unico a mexer.

Como se isto não fosse o suficiente para fazer o layout, ele deve ser redimensionado sempre que a tela muda de tamanho, ou seja o footer tem que estar sempre visivel em qualquer resolução acima de 1024X768...

Este é provavelmente o layout mais esquesito que ja tive que contruir (é por isto que designers gráficos não deviam pensar que sabem desenhar sites logo à partida Tongue

)

espero que alguém tenha alguma ideia de como fazer uma coisa destas.

Até agora o que consegui fazer foi colocar o header fixo, quando tento colocar o resto fixo em primeiro lugar nunca fica igual no IE e mesmo no FF nao conisgo por tudo no sitio...

avlisrotiv

(Quando imagens de grandes dimensões deves utilizar o spoiler (conteúdo oculto) ou então alteração das dimensões da mesma...) Wink

E acrescento, pode-te apresentar no fórum no tópico Bem-vindo! Big Grin

mpmont · 03-03-2010, 23:29

feito, peço desculpa, tenho um ecrã meio grande e nem tinha reparado Tongue

como fiz isto um pouco à pressa...

avlisrotiv · 03-03-2010, 23:34

Não tens de pedir desculpa... Big Grin

E visto que agora não posso ser útil, ao menos deixo-te um link, pode ser que ajude... Wink

w3schools.
Lamento, mas agora não posso mesmo ajudar, mas com certeza o farei, mais tarde... Smile

Em todos os casos, como referi (editei) acima, enquanto resposta, (que de certeza que o André vai participar nela Big Grin

), podes-te apresentar... Wink

Até mais!

mpmont · (Esta mensagem foi modificada pela última vez a: 04-03-2010 12:10 por mpmont.)

eu ja consegui fazer boa parte disto agora que peguei nisto com olhos de ver, dps de um dia inteiro sem andar pa frente...

e agora so falta fazer o right-fixo... o resto está a funcionar em todos os browsers... se descobrir a resposta depois coloco aqui...

ok,

consegui resolver a coisa em termos de estrutura...

fica aqui o código para quem tiver quiser ver como fiz...

Tive o dia todo de volta disto, coloco a duvida aqui e vou dar uma olhadela e consegui resolver passado pouco tempo lol weird...

Código PHP:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body{
    margin: 0;
}

#container{
    width: 940px;
    margin: 0 auto;
}

#left{
    width: 200px;
    position: fixed;
    float: left;
}

#right{
    width: 540px;
    float: left;
    margin-left: 200px;
    margin-top: 30px;
}

#title{
    position:fixed;
    margin-left: 200px;
    width: 550px;
    height: 50px;
    background: url(bg.jpg);
}

div#footer{
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  height:25px;
  background: #000000;
  color: #ffffff;
}

#rightright{
    position:fixed;
      bottom:0;
      width:200px;
      height:200px;
    margin-left: 750px;
}


</style>


</head>

<body>


<div id="container">
<center><div id="footer"> footer </div></center>
<div id="rightright">
<img src="bg_body.jpg" />
</div>
    <div id="left">
        <h2>LEFT</h2>
        <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna         aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </p>
          <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna         aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </p>
    </div>
    <div id="title">
    <h2>RIGHT TITLE</h2>
    </div>
    
    
    <div id="right">
    <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna         aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </p>
    <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna         aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </p>
         <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna         aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </p>
         <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna         aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </p>
         <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna         aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </p>
         <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna         aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </p>
         <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna         aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </p><p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna         aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </p>
         <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna         aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </p><p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna         aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </p>
         <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna         aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </p>
                  <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna         aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </p>
                  <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna         aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </p>
                  <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna         aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </p>
    </div>

</div>
</body>
</html> 

em termos de estrutura está como eu queria, so tive tempo de testar em IE 7 e 8 e FF e chrome... Smile

MarcoMonteiro · 04-03-2010, 12:07

Olha que isso não funciona em IE7, deves ter testado no 8....

mpmont · 04-03-2010, 12:09

tens razão,
reparei no mesmo quando cheguei ao trabalho.

Alguém tem alguma ideia de como colocar isto a funcionar no IE7?

asantos3

já estao a falar mim Tongue

ainda tens algum problema no layout?
só precisas que isso funcione no IE 7 né?

Bem em relação as outros browsers... se der no Chrome dá no safari e vice-versa, no opera teoricamente também dá sem problemas...
já agora uma coisa que nunca percebi, porque que é que se poe este texto: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
é que vejo em muitos layouts e nunca percebi porque Tongue

eu mandava dar isso uma volta no ie 7 mas como não sou eu que estou a fazer isso vou analisar o teu caso LOL

é só por uns if ie7 e tá feito... agora o problema vai ser o coiso a seguir ao if Tongue

Ando um bocado ocupado com exames/testes por isso posso não vir cá se calhar resolver o teu problema... mas vamos ver no que dá...
------------
Já agora poe o que já tens numa pastinha zipada e manda aqui para o ppl... é melhor...
Não verifiquei muito bem o conteudo mas aqui: http://www.webcredible.co.uk/user-friend...er-7.shtml encontras como transformar o teu css para ie 7... ou seja pelo codigo que deste ainda não está bem como queres por isso faz o código em plataforma de ie corriges os bugs no ff acaba o codigo depois testa no chrome e transforma para ie7... é o que eu faço Tongue

mpmont · 04-03-2010, 16:42

sim o layout só nao funciona no IE7 porque ele atrofia-se todo com:

position: fixed;

e este layout tem muitas div's com position:fixed;

eu bem que queria mardar isto dar uma volta ao IE7 mas muitos dos visitantes do site que estou a actualizar usam esse "browser" se é que pode ser chamado assim.

agora estou com pouco tempo, mas logo à noite partilho aqui a coisa num .rar...

asantos3

(04-03-2010 16:42)mpmont Escreveu: sim o layout só nao funciona no IE7 porque ele atrofia-se todo com:

position: fixed;

e este layout tem muitas div's com position:fixed;

eu bem que queria mardar isto dar uma volta ao IE7 mas muitos dos visitantes do site que estou a actualizar usam esse "browser" se é que pode ser chamado assim.

agora estou com pouco tempo, mas logo à noite partilho aqui a coisa num .rar...

Podias era fazer tipo se utilizador fosse do ie7 abria-se uma div a disser que o navegar de internet era antigo e tinha erros "graves" e para uma otima visualização era requerido ie8 (e depiius ponhas link para o download...) era muito mais facil...