Ir para o conteúdo
KarlMTC

Esticar uma table

Mensagens Recomendadas

KarlMTC    0
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?

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
KarlMTC    0
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>

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
KarlMTC    0
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?

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
elcsat    0
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

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
KarlMTC    0
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?

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
elcsat    0
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

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
KarlMTC    0
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.

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
webflex    0
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

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
KarlMTC    0
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

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
webflex    0
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

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
webflex    0
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

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
cgoncalves    0
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.

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
elcsat    0
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

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
KarlMTC    0
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

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


×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade