Jump to content
KarlMTC

Esticar uma table

Recommended Posts

KarlMTC

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?

Share this post


Link to post
Share on other sites
cgoncalves

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

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


"Great coders aren't born. They're compiled and released"

"Expert coders do not need a keyboard. They just throw magnets at the RAM

Share this post


Link to post
Share on other sites
KarlMTC

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>

Share this post


Link to post
Share on other sites
KarlMTC

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?

Share this post


Link to post
Share on other sites
elcsat

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

Share this post


Link to post
Share on other sites
KarlMTC

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?

Share this post


Link to post
Share on other sites
elcsat

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

Share this post


Link to post
Share on other sites
KarlMTC

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.

Share this post


Link to post
Share on other sites
webflex

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

Share this post


Link to post
Share on other sites
KarlMTC

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

Share this post


Link to post
Share on other sites
webflex

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

Share this post


Link to post
Share on other sites
KarlMTC

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

Share this post


Link to post
Share on other sites
webflex

Olá,

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

Cumprimentos,

webflex

Share this post


Link to post
Share on other sites
webflex

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

Share this post


Link to post
Share on other sites
cgoncalves

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.


"Great coders aren't born. They're compiled and released"

"Expert coders do not need a keyboard. They just throw magnets at the RAM

Share this post


Link to post
Share on other sites
elcsat

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

Share this post


Link to post
Share on other sites
KarlMTC

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


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