(Resolvido) width em div não funciona

[RodrigoGomes]

boa noite pessoal..

eu estou um tanto confuso com estes divs e css.. :huh:

eu tenho um div e quero que ele se expanda conforme o navegador, usando o 100%..

certo.. mas o problema é que o 100% não funciona!

#CTR1 {

clear:both;

text-align:left;

background:url(../color_fix/barracent.png) repeat-x left top;

width:100%;

min-height:600px;

min-width:629px;

}

<div id="CTR1">

oi oi<br />teste

</div>

obs.: o site será valido pelo w3c

[KaKarotto]

Ué velho....ele está a 100%.

Não há nada de difícil no Css, pra falar a verdade, somos nós quem complicamos.

Talvez você esteja usando uma imagem de fundo que não acompanha todo o div, dando a impressão de que o div não está a 100%.

Bota uma borda nele pra você ver que ele está a 100%.

Kelabrasssssss

[cassianooliver]

tenta só assim pra ver...

#CTR1 {
width:100%;
min-width:629px;
}

[hipnos na area]

só uma dica min-width e min-height não funcionam no IE

e outra coisa quando você usa "background:;" você deve aplicar uma cor ou transparencia

tipo assim:

background: #fff url(../color_fix/barracent.png) repeat-x left top;

ou assim:

background: transparent url(../color_fix/barracent.png) repeat-x left top;

se não pode ocorrer erro de validação e também não se esqueça você deve definir a altura HEIGHT:;(use 100% ou auto ou tamanho em pixel) faça assim só pra testar:

#CTR1 {
clear:both;
text-align:left;
background: #fc0 url(../color_fix/barracent.png) repeat-x left top;
width:100%;
min-height:600px;
min-width:629px;
}

Editado Dezembro 5, 2007 por hipnos na area

[cassianooliver]

só uma dica min-width e min-height não funcionam no IE

funcionam sim...

[hipnos na area]

no IE6 não funciona se eu não me engano só no IE7

cassiano você deve ter é o IE7 ae pois pode verificar na NET

o MIN-WIDTH,MAX-WIDTH,MIN-HEIGHT e MAX-HEIGHT para IE6 não funcionam

não se prenda só ao IE7 ou Firefox lembre-se se você quiser fazer algo com semântica

lembre-se que há mais navegadores a se utilizar

NETSCAP

SAFARI

OPERA

ETC

Editado Dezembro 5, 2007 por hipnos na area

[cassianooliver]

no IE6 não funciona se eu não me engano só no IE7

cassiano você deve ter é o IE7 ae pois pode verificar na NET

o MIN-WIDTH,MAX-WIDTH,MIN-HEIGHT e MAX-HEIGHT para IE6 não funcionam

não se prenda só ao IE7 ou Firefox lembre-se se você quiser fazer algo com semântica

lembre-se que há mais navegadores a se utilizar

NETSCAP

SAFARI

OPERA

ETC

funciona sim...

Eu nem uso IE pra navegar, só tenho instalado aqui porque muitos usuários iludidos usam ele hahhaa

daqui a pouco posto um exemplo, é que to saindo agora....

Editado Dezembro 5, 2007 por cassianooliver

[hipnos na area]

no INTERNET EXPORER 6 eu garanto que não funciona você deve pensar que tah funcionando

deve ser impressão sua

é eu também não sou usuario do IE

mas você tem de levar em consideração que a validação não inclui só "o melhor navegador"(seja ele qual for)

e sim uma semântica

você tem de fazer algo que funcione igual para todos é pra isso que foi criado os padrões W3C

Editado Dezembro 5, 2007 por hipnos na area

[cassianooliver]

hipnos,

você é igual a mim...

é teimoso hahahaha

você tem de fazer algo que funcione igual para todos é pra isso que foi criado os padrões W3C

todos os meus sites são assim, mesma visualização em todos os navegadores e sigo também os padrões...

mas funciona sim viu...

um EX:

#div {
    width: 520px;
    min-height: 690px;
    height: auto !important; // Aqui faz com que funcione no IE 6
    height: 690px;
    padding: 10px;
    float: left;
}

uso isso em vários sites, e funciona tanto no IE6, IE7 e FF. Nos outros não sei pois nunca utilizei..

[hipnos na area]

Vixe você viajou grandão(sem maldade) mas assim é logico que vai funcionar porque é um HACK

(hack é uma ideia de "gambiarra" que ro dizer não é necessariamente um HACK mas sendo algo que faz funcionar em devido navegador já é burlar um "defeito" por isso considero ele assim pois o "important" assim =])

o MIN e MAX não funcionam é que o DIV no IE aumenta sozinho

sabia que você tava se enganando

procure estudar sobre os HACKs

isso que você fez é um

isso não faz funcionar no IE faz é funcionar no FF

height: auto !important;

pro FF você ter um objeto(DIV) que aumente sozinho você deve usar height:auto;

já objetos tipo DIV aumentam sozinho no IE vai pela minha ideia

não é teimosia minha é real você tah se confundindo

testa isso:

<style>
#ff {
    background:#fc0;
    width: 20px;
    min-height: 10px;
    height: auto;
}
#IE{
    background:#fc0;
    width: 20px;
    height: 10px;
    float: left;
}
</style>
<div id="ff">conteudo</div>
<br>
<div id="ie">conteudo</div>

explicação:

No IE divs(ou elementos complacentes) aumentam conforme o texto ou conteudo sem necessidade

de definir altura automatica HEIGHT:AUTO;

no FF você deve definir o objeto com HEIGHT:AUTO; pois se não possuir isso o DIV no FF

não acompanha o conteudo

Editado Dezembro 8, 2007 por hipnos na area

[cassianooliver]

discordo, hack seria se eu usasse isso..

* html .div {
...atributos
}

ou

html>body .div {
...atributos
}

!important é uma regra que foi especificada pelo próprio W3C...

height: auto !important;

mas eu não disse que isso aí faz a div aumentar automaticamente..

isso aí foi colocado para que junto com o min-height, o Ie6 a faça aumentar automaticamente...

sabia que você tava se enganando

procure estudar sobre os HACKs

nesse caso num estou não...

:P

[hipnos na area]

mas o IE não interpreta o IMPORTANT só navegadores como Opera,ff, netscap e complacentes

HACK é uma maneira interpretativa de fazer uma "gambiarra"

isso que você fez foi burlar o comando height:auto para ele ser só lido no FF

ainda sim mesmo que eu tenha falado que tal coisa é um hack sem ser(kkkk)

o MIN-HEIGHT e MAX-HEIGHT não funcionam no IE

é assim o HEIGHT:AUTO;+MIN-HEIGHT:10px; fazem o DIV ter uma altura minima e aumentar conforme conteudo

no FF (e complacentes)

o HEIGHT:10px; basta para o IE por que ele redimensiona o DIV sem necessidade do HEIGHT:AUTO;

sem maldade cara é que você tah fazendo a aplicação direitinho só que você não ta entendendo como ela

funciona

abraço

Editado Dezembro 5, 2007 por hipnos na area

[cassianooliver]

mas o IE não interpreta o IMPORTANT

opa, realmente, nessa parte me enganei...

mas pra mim o !important não é um hack...

mas já chega disso hahaha

tenho 2 sites ainda pra terminar...

vlw!

[KaKarotto]

É engraçado que a gente posta ajudando e os [caras] não retornam pra gente saber se a dica funcionou ou não né....Não me refiro a esse, talvez o cara ainda não tenha tido tempo pra postar, mas é triste...to vendo varios outros posts meu indo pro espaço...to curioso pra saber se funcionou e tal e os [caras] somem.

Então, pra acabar com a briga. Cassiano, eu já te elogiei e sabe que eu respeito você muito em matéria de design, mas em Css você peca, falta chão ainda, falo isso com todo o respeito, Css é fácil realmente, mas dependendo do contexto.

min-height e min-width, não funcionam no ie6, e fim de papo.

Outra coisa, hipnos:

é eu também não sou usuario do IE

mas você tem de levar em consideração que a validação não inclui só "o melhor navegador"(seja ele qual for)

e sim uma semântica

você tem de fazer algo que funcione igual para todos é pra isso que foi criado os padrões W3C

Isso não existe né... A validação não inclui NENHUM navegador, são os navegadores que devem seguir os padrões. A validação só serve para você saber que aqueles códigos estão corretos segundo as normas da W3C, isso não tem nada a ver com semântica.

O que disse não faz sentido, você pode construir um site validado e que não tenha nenhuma semantica ou pode construir um site validado que não funciona em todos os browsers. A validação é uma coisa, a semântica é outra e ACESSIBILIDADE é outro assunto.

você pode usar o min-height e min-width em toda a sua página, isso fará com que seu site siga os padrões, porém não vai ser exibido corretamente no ie6, aí não é questão de semantica ou validação e sim de acessibilidade.

[cassianooliver]

Então, pra acabar com a briga. Cassiano, eu já te elogiei e sabe que eu respeito você muito em matéria de design, mas em Css você peca, falta chão ainda, falo isso com todo o respeito, Css é fácil realmente, mas dependendo do contexto.

meu CSS é muito melhor em prática do em teoria hahaha

confesso..

bom, não é desculpa mas comecei a trabalhar com WS há menos de 6 meses...

css, xhtml, tableless, semantica, validação, padrões, isso pode, isso não pode...

aff, é muita coisa hahaha

mas é isso aí...

com o tempo agente aprende...

Isso não existe né... A validação não inclui NENHUM navegador, são os navegadores que devem seguir os padrões. A validação só serve para você saber que aqueles códigos estão corretos segundo as normas da W3C, isso não tem nada a ver com semântica.

falou tudo...

[KaKarotto]

rsrsrs perdão a falta de educação Moderador....

Eu me matei de rir quando eu vi que o post foi editado, mas não por isso, ri pelo substantivo usado na troca kkkkkk. Pra mim teve graça porque eu sei o que eu tinha digitado antes rsrsrsrsrs.

Vou tentar ser mais educado. Malz ae.

[hipnos na area]

meu CSS é muito melhor em prática do em teoria hahaha

confesso..

bom, não é desculpa mas comecei a trabalhar com WS há menos de 6 meses...

css, xhtml, tableless, semantica, validação, padrões, isso pode, isso não pode...

aff, é muita coisa hahaha

mas é isso aí...

com o tempo agente aprende...

ninguém é tão bom que não tenha errado e outra você deveria ter pesquisado antes de começar a insitir nisso

falei que você tava confundindo(não que eu também não tenha me confundio hehe, nisso também parecemos)

---------------------

kakarotto o W3C foi criado para ajudar o usuario a fazer o site o mais correto possivel(em termo de lógica, não que seja certo essa ideia pois qualquer um sabe que os padrões podem mudar brusacamente daqui uns anos)

acho que o cassiano foi muito precipatado ao falar de min- e max-

mas você está sendo mais precipitado ainda

essa ajuda não é pra montar sites sem semantica e tem sim haver com "navegadores"

pois seguindo essas normas seu site ficará com o código mais "correto"

lógico que ainda dependemos de gambiarras (as vezes enormes) para conseguir determinado efeito

sinto muito se você confundio as coisas mas é obivio que me enganei em algumas coisas

mas o tópico aqui é pra ajudar na duvida de alguém e eu só apontei os "erros" que fariam ele ter problemas

mais adiante

mas o cassiano insitiou que eu estava errado e na hora da preça escrevi sem me explicar muito bem

malz qualquer coisa

mas você é muito exagerado kakarotto

----------------------------------------

agora esquecendo isso vamos ao que interessa...

Vampyro aqui o seu Css funcionou normal

te pergunto então você esta usando "STRICT"?

é uma dessas? :

HMTL:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

se estiver uma dessas duas(tanto faz), faça isso no CSS

<style>
html, body{
margin:0px;
padding:0px;
width:100%;
height:100%;
}
</style>

tenho quase certeza de que irá funcionar

Editado Dezembro 6, 2007 por hipnos na area

[RodrigoGomes]

opas KaKarotto, desculpe não ter avisado se deu ou não certo.. xD

é que eu tive que resolverde outra forma.. o meu problema não tem solução.. até onde sei de css.. e html..

era que eu tinha três divs uma na frente da outra, todas com float:left e a do meio eu queria em 100%, isso é impossivel! a ultima div sempre iria se separar da base..

então tive que esquecer isso de porcentagem e fazer tudo de um só tamanho.. e pegar a o tamanho do monitor do user com php para fazer isso ficar correto.. mas vlw mesmo pela força ai!

sempre tou aqui se precisar.. ;)

[hipnos na area]

Engano seu tem solução sim...

eu tenho a solução pra você Vampyro

<style>
#div1{
background:#fc0;
float:left;
width:99px;
height:500px;
}

#div2{
background:#fc0;
float:right;
width:99px;
height:500px;
}

#div3{
background:#fc0;
display:block;
margin: 0px 100px;
height:500px;
}
</style>

<div id="div1">esq</div>
<div id="div2">dir</div>
<div id="div3">conteudo</div>

Editado Dezembro 8, 2007 por hipnos na area

[RodrigoGomes]

hipnos né que funcionou!

vlw amigo! :lol:

[hipnos na area]

tópico resolvido

hipnos né que funcionou!

vlw amigo!

Que isso =] desculpa pela discução no teu tópico é que quando tenho certeza de algo vou até

onde posso ^^

ainda bem que sua dúvida foi resolvida

falow

Editado Dezembro 6, 2007 por hipnos na area