Jump to content

  2. →
  3. →
  4. →

Photo

Dúvida

Started By krbg, 26/10/2008, 11:16

  • Faça o login para participar
14 replies to this topic

#1 krbg

krbg

    Novato no fórum

  • Usuários
  • 4 posts
  • Sexo:Não informado

Posted 26/10/2008, 11:16

Queria deixar esse div conteudo que tem a imagem bg_tabela.gif até o final da página, como voces podem ver ele só vai até o final do texto.

Attached File  Untitled_1.jpg   58.02KB   16 downloads

CSS:
[codebox]body {
font-family: tahoma, trebuchet ms, verdana;
font-size: 10px;
color: #181213;
background: #181213 url(bg.jpg);
}
div {
font-weight: none;
font-family: tahoma, trebuchet ms, verdana;
font-size: 10px;
color: #6A5558;
}
textarea {
font-family: tahoma, trebuchet ms, verdana;
font-size: 10px;
background-color:#060404;
color:#6A5558;
border:1px solid #413435;
}
input {
font-family: tahoma, trebuchet ms, verdana;
font-size: 10px;
background-color: #060404;
color: #6A5558;
border: 1px solid #413435;
}
a:link {
text-decoration:none;
color: #BA0A3C;
}
a:visited {
text-decoration:none;
color: #BA0A3C;
}
a:hover {
text-decoration:none;
color: #BA0A3C;
}
a:active {
text-decoration:none;
color: #BA0A3C;
}
#pagina {
top: 0px;
left: 50%;
margin-left: -427px;
position: absolute;
width: 855px;
}
#flash {
position: absolute;
top: 0px;
left: 171px;
width: 520px;
}
#conteudo {
position: absolute;
top: 218px;
left: 171px;
width: 520px;
background: url(bg_tabela.gif);
}
#rss {
position: absolute;
left: 649px;
top: 229px;
}
#about {
position: absolute;
width: 288px;
top: 25px;
left: 218px;
padding-bottom: 20px;
height: 170px;
}
#post {
width: 100%;
margin-bottom: 20px;
}
.titulo {
font-style: italic;
font-weight: bold;
font-family: times new roman, times, serif;
font-size: 13pt;
color: #8D7C71;
}
.tabela {
padding-left: 15px;
padding-top: 25px;
padding-right: 15px;
margin-bottom: 2px;
}[/codebox]

PÁGINA:
[codebox]<?PHP
?>
<html>
<head>

<title>texto</title>
<link href="scripts/estilo.css" rel="stylesheet" type="text/css" />

</head>
<body>

<div id="pagina">
<div id="flash">
textotextotextotextotextotextotextotextotexto
</div><!-- flash" -->

<div id="conteudo">
<div class="tabela">
textotextotextotextotextotextotextotextotexto

<div align="right">
textotextotextotextotextotextotextotextotexto
</div><!-- div right-->
</div><!-- div conteudo -->
</div><!-- div pagina -->

<div id="rss">
textotextotextotextotextotextotextotextotexto</div>
<!-- div rss-->
</body>
</html>[/codebox]

Edição feita por: Kadu DG, 26/10/2008, 12:24.

#2 dddj

dddj

    Normal

  • Usuários
  • 112 posts
  • Sexo:Masculino
  • Localidade:Campo Grande

Posted 26/10/2008, 11:38

Creio que seja só colocar heigth:100%;

#conteudo {
position: absolute;
top: 218px;
left: 171px;
width: 520px;
heigth:100%;
background: url(bg_tabela.gif);
background-repeat:no repeat;
}

Edição feita por: dddj, 26/10/2008, 11:39.

Djavan Loureiro - SEO Marketing - Search Engine Optimization - Otimização de Sites
Coloque seu site no topo dos sistemas de busca - Projeto SEM - Visitem o site.

#3 krbg

krbg

    Novato no fórum

  • Usuários
  • 4 posts
  • Sexo:Não informado

Posted 26/10/2008, 12:14

Creio que seja só colocar heigth:100%;

#conteudo {
position: absolute;
top: 218px;
left: 171px;
width: 520px;
heigth:100%;
background: url(bg_tabela.gif);
background-repeat:no repeat;
}



já tinha tentado assim, mas não funcionou... deve ter algo impedindo.

#4 Édipo Costa Rebouças

Édipo Costa Rebouças

    Veterano

  • Ex-Admins
  • 1079 posts
  • Sexo:Masculino
  • Localidade:Brasil - São Paulo

Posted 27/10/2008, 13:06

sem javascript o que eu falaria para você tentar é colocar essa imagem de fundo no body, de qualquer outra maneira vai precisar de uma gambi pra fazer.

Edição feita por: Édipo Costa Rebouças, 27/10/2008, 13:09.

#5 Fábio.

Fábio.

    Novato no fórum

  • Usuários
  • 11 posts
  • Sexo:Não informado

Posted 27/10/2008, 13:39

Não creio que seja necessário qualquer gambiarra. Sua DIV conteúdo já tem posicionamento absoluto, apenas zere o bottom, deve funcionar.

position:absolute;
bottom:0;

Se não der certo, vamos pensar em outra solução. Um abraço!

#6 Édipo Costa Rebouças

Édipo Costa Rebouças

    Veterano

  • Ex-Admins
  • 1079 posts
  • Sexo:Masculino
  • Localidade:Brasil - São Paulo

Posted 27/10/2008, 13:46

é que de qualquer outra forma vai complicar muito....

Edição feita por: Édipo Costa Rebouças, 27/10/2008, 13:49.

#7 Fábio.

Fábio.

    Novato no fórum

  • Usuários
  • 11 posts
  • Sexo:Não informado

Posted 27/10/2008, 17:09

Édipo, não tem complicação alguma, o CSS usado de forma correta é aplicável a todos os browsers, sem a necessidade de hacks, salvo alguns casos. Fazer hack com jQuery é outros métodos javascript é fora de cogitação, visto que buscamos metodologias de desenvolvimento do XHTML e CSS, apenas.

Um abraço.

#8 krbg

krbg

    Novato no fórum

  • Usuários
  • 4 posts
  • Sexo:Não informado

Posted 27/10/2008, 22:57

sem javascript o que eu falaria para você tentar é colocar essa imagem de fundo no body, de qualquer outra maneira vai precisar de uma gambi pra fazer.


cara alem de ficar feio, vai pesar...


Não creio que seja necessário qualquer gambiarra. Sua DIV conteúdo já tem posicionamento absoluto, apenas zere o bottom, deve funcionar.

position:absolute;
bottom:0;

Se não der certo, vamos pensar em outra solução. Um abraço!


cara fez foi sumir o div
quero que ele fique até o final da página tipo heigth:100% só que colocando não tá funcionando...
deve ter algum outro div impedindo sei lá, deve ser algo bem besta... mas não to achando

passem os codigos para algum editor para vocês verem.

pra ficar assim:
Attached File  Untitled_1.jpg   165.64KB   11 downloads

Edição feita por: krbg, 27/10/2008, 23:07.

#9 '' sem.Ponto

'' sem.Ponto

    Super Veterano

  • Ex-Admins
  • 2098 posts
  • Sexo:Masculino
  • Localidade:Belo Horizonte

Posted 28/10/2008, 01:41

Se você quer que o background vá até o final, a primeira coisa a se fazer é retirar o background da div #conteudo, você não pode colocar height 100% nesse elemento que está no meio da página pois no final das contas a altura total do seu site será a altura da tela + a altura dos elementos que estão fora dessa div.

Altura 100% da forma que está é algo que não vai funcionar, você poderia pensar nisso se o background fosse colocado num elemento PAI para todos os outros elementos, aí seria um bom começo. Mas pelo o que eu ví, parece que não tem um elemento PAI para todo o site, você pecou nessa parte. Eu disse que seria um bom começo? Isso significa que mesmo assim o seu problema não estaria 100% solucionado, aparece mais uns probleminhas pela frente que prefiro não comentar. :P

A maneira mais simples e rápida de resolver o problema sem ter dor de cabeça é colocando o background no body como o Édipo disse. Basta salvar o background com as dimensões 520px x 4px suponho e colocar ele para se repetir no eixo Y centralizado horizontalmente. Não é errado e não fica pesado, e além disso você não vai se deparar com o "funciona no IE mas não funciona no Firefox". :assobio:

Quanto ao background que está no body agora, você deverá jogar ele no html...

(ok2)
att,
Muller Dias
ex-administrador Fórum WMO

#10 Fábio.

Fábio.

    Novato no fórum

  • Usuários
  • 11 posts
  • Sexo:Não informado

Posted 28/10/2008, 09:05

Hmm... Verdade, faltou um teste da minha parte, desculpe. Nem sempre isso funciona...

Então faça como o Édipo te aconselhou, do modo como o sem.Ponto disse. Tenta não usar muito position no site, pode ter problemas com Lightbox e Tickbox caso queira usar. Pode alinhar a DIV ao centro assim:

Dê alinhamento de texto ao centro no body.
Na sua div com o id conteudo, dê alinhamento de texto pra esquerda e dê margem automática pra esquerda e pra direita e display:table. Não esqueça de definir a largura da div.

Desse modo vai funcionar no IE e no FF sem problemas.

Um abraço!

Edição feita por: Fábio., 28/10/2008, 09:05.

#11 krbg

krbg

    Novato no fórum

  • Usuários
  • 4 posts
  • Sexo:Não informado

Posted 28/10/2008, 16:06

valeu, mas não entendi absolutamente nada *risos
me ajuda pessoal, faz um exemplo de como seria esse codigo que você disse...
to fazendo em css na marra, não to afim de fazer tabelas.

Edição feita por: krbg, 28/10/2008, 16:12.

#12 '' sem.Ponto

'' sem.Ponto

    Super Veterano

  • Ex-Admins
  • 2098 posts
  • Sexo:Masculino
  • Localidade:Belo Horizonte

Posted 28/10/2008, 16:46 

html {
		background: #181213 url(bg.jpg);
}
body {
		background: url(bg_tabela.gif) top center repeat-y;
}

A imagem bg_tabela.gif deve ter a mesma largura da div #conteudo, pois ela vai se repetir apenas no eixo Y. E como esse background vai entrar no body, você deve retirar o background que está na div #conteudo.

(ok2)
att,
Muller Dias
ex-administrador Fórum WMO

#13 Édipo Costa Rebouças

Édipo Costa Rebouças

    Veterano

  • Ex-Admins
  • 1079 posts
  • Sexo:Masculino
  • Localidade:Brasil - São Paulo

Posted 29/10/2008, 09:59

o sem ponto, tem como jogar o background na tag html, seria interessante...?

#14 '' sem.Ponto

'' sem.Ponto

    Super Veterano

  • Ex-Admins
  • 2098 posts
  • Sexo:Masculino
  • Localidade:Belo Horizonte

Posted 29/10/2008, 10:55

o sem ponto, tem como jogar o background na tag html, seria interessante...?

Pode sim, é muito útil em casos como esse que precisamos colocar 2 backgrounds no fundo do site. ^_^
att,
Muller Dias
ex-administrador Fórum WMO

#15 Édipo Costa Rebouças

Édipo Costa Rebouças

    Veterano

  • Ex-Admins
  • 1079 posts
  • Sexo:Masculino
  • Localidade:Brasil - São Paulo

Posted 29/10/2008, 11:21

se eu soube-se disse teria economizado um tempão....

Sem ponto, eu tentei fazer esse esquema no ie6, mas só funcionou com cores, tipo, se eu definir uma cor de fundo para o html, e uma imagem para o body, funfa, mas se for tentar definir uma imagem no html, e uma imagem no body, não funfa.

Edição feita por: Édipo Costa Rebouças, 30/10/2008, 08:57.

Voltar para CSS & Semântica (Tableless)


1 user(s) are reading this topic

0 membro(s), 1 visitante(s) e 0 membros anônimo(s)

  1. Fórum WMO
  2. → Desenvolvimento
  3. → HTML, CSS e Metodologias
  4. → CSS & Semântica (Tableless)
  5. Privacy Policy
  6. Regras ·
IPB Skin By Virteq