Problema com layout

SonicSpot · May 23, 2009 at 03:36 PM

Viva pessoal! Estou com um problema que já se vem a arrastar há uma semana, e por muitas voltas que dê, chego sempre a soluções parciais, mas nas quais algo está sempre fora do lugar. Deixo-vos aqui o desenho de um layout que pretendo, juntamente com um código HTML exemplo. O que pretendia, era que com CSS, este HTML fosse exibido conforme o layout. Agradecia imenso que me ajudassem. Estejam à vontade para adicionar algo ao HTML que achem necessário.

<!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>Problema</title>
</head>

<body>
    <table>
      <tr>
        <td><div id="menu">isto deve ter 100% largura e 80px de altura</div></td>
      </tr>
      <tr>
        <td>
            <table>
              <tr>
                <td><div id="mainform">400px de largura e o máximo possível de altura, que estiver disponível no viewport</div></td>
                <td><div id="map">máximo de altura e largura disponível no viewport</div></td>
                <td><div id="labelContainer">200px de largura e máximo possível de altura disponível no viewport</div></td>
              </tr>
            </table>
        </td>
      </tr>
    </table>
</body>
</html>

Layout pretendido:

Nota: Agradecia que não retirassem os DIVs, já que vou necessitar deles.

djthyrax · May 24, 2009 at 06:02 PM

Tu deves querer algo como isto:

<html>
<head><style type="text/css">

#menu { width:100%; height:80px;}
#mainform { float:left; width:400px; }
#labelContainer { float:right; width:200px;}

#menu { background-color:#FF0088; }
#body { background-color:#00FF88; }
#mainform { background-color:#2020FF; }
#map { background-color:#000000; color:#FFFFFF; }
#labelContainer { background-color:#979797; }

</style></head>
<body><div id="menu">Some content</div>
<div id="body">
    <div id="mainform">Lala<br/>lalalalalalalalalla</div>
    <div id="labelContainer">Oi</div>
    <div id="map">ois</div>
    
</div>
</body>
</html>

O único problema é que se usares backgrounds, as colunas não têm todas o mesmo tamanho (como podes ver com as cores que pus. Um fix que arranjei foi usar #body, #body * { height:100px; } ou então usares um background mas para o container (#body) que faça as colunas falsas.

EDIT: Podes meter o #menu dentro do #body e definires #body { height:100% }

SonicSpot · June 21, 2009 at 08:33 PM

Viva! Era só para agradecer pela ajuda! Entretanto passei por uma fase de muitos trabalhos/testes, e nunca mais me lembrei de te agradecer djthyrax! Resolveste-me o problema 😕 Mais uma vez, muito obrigado!

djthyrax · July 3, 2009 at 02:31 AM

Sempre às ordens 🙂

Sign In

Problema com layout

Recommended Posts

SonicSpot

djthyrax

SonicSpot

djthyrax

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information