Jump to content
maiden

[Resolvido] Design fluido

Recommended Posts

maiden

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?

http://img380.imageshack.us/img380/849/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,

Share this post


Link to post
Share on other sites
Dumpster

@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..

Share this post


Link to post
Share on other sites
Battousai

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>

Share this post


Link to post
Share on other sites
Nazgulled
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?

Share this post


Link to post
Share on other sites
Dumpster

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..

Share this post


Link to post
Share on other sites
Nazgulled

@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

Share this post


Link to post
Share on other sites
Dumpster

@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.

Share this post


Link to post
Share on other sites
maiden
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,

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.