• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

maiden

[Resolvido] Design fluido

12 mensagens neste tópico

Boas,

Tenho a seguinte página, com um design Tableless. A div principal (onde aparecem as notícias) aumenta de acordo com o tamanho do conteúdo. O que eu queria era que esta div tivesse a largura máxima, mas quando o utilizador redimensionasse a janela esta diminuisse, tornando o design fluido.

Ou seja, queria que me ocupasse a maioria da janela, quer o browser se encontre maximizado ou não. Já tentei definir a largura em percentagem, utilizar a propriedade min-width, etc, mas sem sucesso. Alguém me dá uma ajuda?

cgestcc5.th.png

A nível de código referente à div principal, tenho o seguinte

#conteudo #principal {
    /*display: block;*/
    float: left;
    background: #fff;
    padding: 10px;
    font: 12px Verdana, Arial, Helvetica, sans-serif;
}

#conteudo #principal h3 {
    font: bold 14px Verdana, Arial, Helvetica, sans-serif;
    padding-bottom: 5px;
}

#conteudo #principal .noticia {
    font: 12px Verdana, Arial, Helvetica, sans-serif;
    margin: 5px 0;
}

#conteudo #principal .noticia p .data {
    float: left;
}

Espero ter-me feito entender.

Obrigado desde já.

Cumps,

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Eu acho que isto seria facilmente atingido usando JavaScript.. Lê sobre a propriedade onResize, innerWidth, innerHeight, etc

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

@Dumpster

Completamente desnecessário usar JS para isto...

Hmmm.. tens razão :(

Embora o teu CSS não me pareça o mais eficiente.. ^^"

Agora vou dormir.. Se ainda for preciso amanhã tento preparar algo..

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Vê lá se te serve

<!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>
#wraper{
position:relative
}
#wraper div{
position:absolute
}
#col1{
width:20%;
background:#ff0
}
#col2{
margin-left:25%;
width:50%;
background:#0ff
}
#col3{
margin-left:80%;
width:20%;
background:#f0f
}
</style>
</head>

<body>
<div id="wraper">
<div id="col1">asdasd</div>
<div id="col2">asdasd</div>
<div id="col3">asdasd</div>
</div>
</body>
</html>

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
Embora o teu CSS não me pareça o mais eficiente.. ^^"

O que é que o meu código CSS bastante básico tem de pouco eficiente?

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

O que é que o meu código CSS bastante básico tem de pouco eficiente?

As colunas dos lados provavelmente não se redimensionam (eu não sei, não testei, mas pelo que li do teu CSS (sim eu sei que é básico) só a central o faz).

Mas agora é que reparei que disseste para ele ignorar as laterais..

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Nazgulled, desculpa qualquer coisa, nem li o teu post.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

@Dumpster

Mas isso não e ser "pouco eficiente", só acho que empregaste mal as palavras, simplesmente não faria o que ele quer. Mas, segundo a minha interpretação do problema, o que eu fiz, é exactamente aquilo que ele quer com a excepção de uma das colunas. Segundo o que eu percebi, ele quer a coluna que diz "Notícias" a estender-se pelo ecrã todo e a coluna que tem as "Feeds" e "Estatísticas" é fixa, pelo que ele disse e pela imagem que apresenta, parece-me ser isso que ele quer. Pelo que o meu código faz exactamente o que ele quer, com excepção de uma coluna que facilmente se remove...

@Battousai

Lol, não há crise. O teu código é ligeiramente diferente do meu, mais uma alternativa que até pode ser melhor e/ou mais simples :P

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

@Dumpster

Mas isso não e ser "pouco eficiente", só acho que empregaste mal as palavras, simplesmente não faria o que ele quer. Mas, segundo a minha interpretação do problema, o que eu fiz, é exactamente aquilo que ele quer com a excepção de uma das colunas. Segundo o que eu percebi, ele quer a coluna que diz "Notícias" a estender-se pelo ecrã todo e a coluna que tem as "Feeds" e "Estatísticas" é fixa, pelo que ele disse e pela imagem que apresenta, parece-me ser isso que ele quer. Pelo que o meu código faz exactamente o que ele quer, com excepção de uma coluna que facilmente se remove...

My apologies ^^

Foi como disseste, um mau emprego das palavras.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
Mas, segundo a minha interpretação do problema, o que eu fiz, é exactamente aquilo que ele quer com a excepção de uma das colunas. Segundo o que eu percebi, ele quer a coluna que diz "Notícias" a estender-se pelo ecrã todo e a coluna que tem as "Feeds" e "Estatísticas" é fixa, pelo que ele disse e pela imagem que apresenta, parece-me ser isso que ele que

Sim, era isso mesmo.

Já está resolvido, peço desculpa pela demora na resposta e agradeço as ajudas.

Cumps,

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora