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

KarlMTC

Esticar uma table

24 mensagens neste tópico

Estou a contruir um site em html com um css à parte. O site consta de um header, ou seja, uma table que contem os logos isso tudo do site (com width a 100%), uma table principal, onde irá situado o conteudo do site, e por último um footer (tambem 100% da página).

O header e o footer estão alinhados ao topo e ao fundo so site respectivamente. O meu problema aparece quando quero que a table principal, entre o header e o footer, se estique, e ocupe o espaço todo entre ambos. O que acontece é que só ocupa o espaço que ocupa o conteudo, e não consigo de maneira nenhuma fazer que se estique... Alguma ideia?

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Mostra o CSS da DIV onde vai ficar o conteúdo.

Mas se colocares o atributo height: 100%; provavelmente deve funcionar

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Por agora o meu CSS é este. Não estou a usar divs, apenas tables... Recomendam as divs? Sou um bocado noob nisto, estou a misturar umas coisas com outras... lol Se me derem umas dicas sobre como organizar melhor a estructura do site a nivel de código, agradecia.

body {
background-color: #003366;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
color: #DEDECA;
height:100%;
}

div.contenedor {
background-image:url(imagens/fondoprincipal.png);
margin-left:auto;
margin-right:auto;
width:700px;
}
div.principal {
margin-left:auto;
margin-right:auto;
width:700px;
background:inherit;
}

div.vacia {
width:auto;
}

h1 {
color: #000000;
}

h2 {
color: #000000;
text-align:center;
}

h3, h4 {
color: #000000;
text-align:center;
}

h5, h6 {
color: #000000;
}

html {
height:100%;
}

img {
display: block;
margin: auto;
}

img.floatIzquierda { 
    float: left;
    margin: 3px;
}

p {
color:#000000;
text-align:center;
}

td, th {
color: #000000;
}

a {
color: #9999cc;
}

#bandeirauk {
float:left;
width:350px;
background-image:inherit;
}

#bandeirapt {
float:right;
width:350px;
background:inherit;
}

#encabezado {
background-image:url(imagens/fondo.png);
width:100%;
height:89px;
}

#encabezado-centro {
width:700px;
margin-left:auto;
margin-right:auto;
}

#footer {
background-image:url(imagens/footer.png);
position:absolute;
bottom:0;
width:100%;
height:120px;
}

#footer-centro {
margin-left:auto;
margin-right:auto;
width:700px;
font-size:11px;
}

#menu {
background-image:url(imagens/fondomenu.png);
width:100%;
height:44px;}

<!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=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Documento sin título</title>
</head>

<body>
<div id="encabezado">
  <div><img src="imagens/logo.png" /></div>
</div>
<div id="menu">
</div>
<div class="contenedor">
<div class="principal">
	<h2>Welcome to</h2>
</div>
<div class="principal">
	<h3>Quality of service.</h3><h4>What we do... we do well.</h4><h3>Puntuality.</h3><h3>Reliability.</h3>
</div>
<div id="bandeirauk">
	<p><img src="imagens/logouk.png" />Enter</p>
</div>
<div id="bandeirapt">
	<p><img src="imagens/logopt.png" />Entrar</p>
</div>
</div>
<div id="footer">
<div id="footer-centro">
  		<img src="imagens/pco.jpg" class="floatIzquierda"/>Licensed by Transport for<br />London Public Carriage Office<br />PCOLicence No: 02649/01/03
  	</div>
</div>
</body>
</html>

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Olá.

Amigo eu recomendaria Div's, tabelas é só mesmo para dados tabulares.

Cumprimentos,

webflex

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Bem, desfiz a maioria do feito e agora comecei novamente com divs no lugar de tables. Estou a tentar colocar o conteudo das divs centrado, e queria que as divs estivessem uma ao lado da outra. Alguma dica?

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

usa tabelas e melhor para isso porque para usares divs, tens que usar css, position:absolute / relative; left: px/ex/cm... ; top: px/pt/cm...

para os colocares aonde queres dando mais trabalho desnecessario, ficando mais confuso

na tag <table> coloca style="width:100%; heitght:100%" isto resolvete o problema

a tag table e muito util para colocamos aonde desejamos as coisas

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Agora já é tarde... xD Segui os conselhos anteriores e comecei a fazer tudo em divs... É que o meu principal problema é que não sei quando usar uma div e quando usar uma table.

Modifiquei o código do meu post anterior (agora está como tenho o código actualmente). Agora encontro-me com dois problemas principais, que são:

#1 Tenho varios divs, todos eles com o background que eu defini, mas entre eles não tem! E voltando à minha primeira pergunta, queria que esse background da coluna principal fosse desde o header até ao footer...

#2 No footer tenho uma imagem ao lado do texto, mas cola-se ao inicio da div, e eu queria alinhar a imagem mais ou menos ao centro vertical do footer...

Dicas?

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

da o altura que desejas que essta div tenha height:800px;

para o que tas a fazer e melhor uma tabela

eu quando quero organizar em determinado sitios objectos uso uma tabela

quando quero meter muitos objectos com os mesmos atributos uso um div

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Pois, mas o problema da altura é que eu queria que fosse liquida, ou seja, que se adapte a todas as resoluções. Quero que o header e o footer fiquem no topo e no fundo respectivamente, e no meio exista um conteudo com um fundo que va desde o header até ao footer.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Olá,

Utiliza o elemento float do CSS para as div's flutuarem uma ao lado da outra.

Vou tentar perceber o teu código HTML.

Cumprimentos,

webflex

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Já consegui alinhar ambos divs. Usei o float em cada uma, e depois tive que meter a imagem dentro do <p> (que não é muito correcto, mas funciona...). Agora o meu problema é mesmo o fundo. Quero que fique um fundo de cima abaixo. Aqui mostro uma imagem do estado actual do site:

dibujofks.png

Está separado em partes, eu queria que todo o corpo principal desde o header até ao footer tivesse o mesmo background... E claro, o problema de centrar verticalmente a imagem e texto no footer, que está alinhado à parte de cima não sei porque... :S

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Olá,

Não percebi a questão de ter todos o mesmo fundo, que fundo estás a falar? Se não queres o fundo nos outros elementos é uma questão de retirares o fundo deles..

Se não for isso acho que não percebi muito bem o que pretendias..

Cumprimentos,

webflex

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Quero que o background da coluna principal va desde o header até ao footer... xD Vejam aqui. Fiz com o paint como quero que fique...

dibujohld.png

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Olá,

Já percebi o que pretendes, vou ver se te consigo ajudar :D.

Cumprimentos,

webflex

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Olá,

PS: Alterou supostamente o código? Não tem um link para que possa tentar ajudá-lo?

Cumprimentos,

webflex

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Olá,

Nesse caso a Div contenedor terá que ter uma altura fixa. O padrão é auto, à medida que vais inserindo o conteúdo o background vai crescendo automaticamente, mas se tiveres uma medida fixa é essa medida e ponto final. Nestas situações eu trabalho sempre com medidas fixas.

Já agora deixo aqui o código um pouco mais limpo:

CSS

* { 
margin: 0px;
padding: 0px;
list-style: none;
}
body {
background-color: #003366;
margin: 0px;
color: #DEDECA;
}

div.contenedor {
background-image:url(imagens/fondoprincipal.png);
margin: 0px auto;
width: 700px;
height: auto; // Teria que ser alterado aqui o valor...
}
div.principal {
margin: 0 auto;
width:700px;
}

div.vacia {
width:auto;
}

h1 {
color: #000000;
}

h2 {
color: #000000;
text-align:center;
}

h3, h4 {
color: #000000;
text-align:center;
}

h5, h6 {
color: #000000;
}

html {
height:100%;
}

img {
display: block;
margin: auto;
}

img.floatIzquierda { 
    float: left;
    margin: 3px;
}

p {
color:#000000;
text-align:center;
}

td, th {
color: #000000;
}

a {
color: #9999cc;
}

#bandeirauk {
float: left;
width: 350px;
}

#bandeirapt {
float:right;
width:350px;
}

#encabezado {
background:url(imagens/fondo.png) repeat-x;
width:100%;
height:89px;
}

#footer {
background-image:url(imagens/footer.png);
position:absolute;
bottom:0;
width:100%;
height:120px;
}

#footer-centro {
margin: 0px auto;
width:700px;
font-size:11px;
}

#menu {
background-image:url(imagens/fondomenu.png);
width:100%;
height:44px;
}

HTML

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Teste</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body>

<div id="encabezado">
<img src="imagens/logo.png" />
</div>

<div id="menu">
</div>

<div class="contenedor">

<div class="principal">
	<h2>Welcome to</h2>
</div>

<div class="principal">
	<h3>Quality of service.</h3><h4>What we do... we do well.</h4><h3>Puntuality.</h3><h3>Reliability.</h3>
</div>

<div id="bandeirauk">
	<p><img src="imagens/logouk.png" />Enter</p>
</div>

<div id="bandeirapt">
	<p><img src="imagens/logopt.png" />Entrar</p>
</div>

</div>

<div id="footer">
<div id="footer-centro">

  		<img src="imagens/pco.jpg" class="floatIzquierda"/>Licensed by Transport for<br />London Public Carriage Office<br />PCOLicence No: 02649/01/03
  	</div>
</div>

</body>
</html>

Este HTML tem o DTD XHTML.

Cumprimentos,

webflex

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

ja tentaste usar style="height:100%" ?? isso resolvete isso

Isso foi o que lhe disse logo no primeiro post :D

Não me parece que ele tivesse chegado a fazer.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Claro que fiz! Foi a primeira coisa que tentei! Mas fazendo isso fica tudo maluco... :S

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

o que acontece deixa aqui uma imagem...

ou tenta isto

usa javascript assim

<script type='text/javascript'>
// isto permite saberes a altura e largura do monitor de quem acede a pagina

      var w=window.screen.width, h=window.screen.height);

      document.getElementById('elemento').style.height=eval(h-50)."px";

</script>

<div id="elemento" >deedf</div>

procura um pouco sobre o que escrevi aqui que e facil de entender.

espero ter ajudado

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Olá,

E se o browser não tiver Javascript habilitado :P. Essa é outra opção claro.

Cumprimentos,

webflex

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Acho que o melhor vai ser retirar o footer... Dá muito trabalho estar a tentar que fique no sitio! Eu não sou muito amigo de scripts, e quanto mais simples for o site, melhor. Obrigado pela ajuda, e se tiver mais alguma dúvida, eu pergunto aqui! :P

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