3 Divs, a do centro com tamanho fixo e as laterais flexíveis., Como fazer?
sjta
Tenho tres divs, uma do lado da outra.
A do centro, quero que fique com 200px, e centralizada na página.
Como fazer para que as da lateral fiquem com o tamanho que sobrar, e
mantendo a do meio centralizada?
Não tenho muita experiencia com css, mas já tentei de tudo e não
consegui
Vlw pela ajuda!!!
Perroud
<div id="satangoss">
<!-- essa é absolute e com width 100%, as outras, relative -->
<div id="miya>
<!-- aqui tera a coluna da esquerda com width: 40%, clear e float: left -->
</div>
<div id="edin">
<!-- aqui sera a div da direita, com width: 40%, clear e float: right -->
</div>
<div id="jaspion">
<!-- aqui vai o conteudo do meio, mas vc nao poderá especificar largura. quem define parcialmente o tamanho desta div... serão as larguras anteriores -->
</div>
</div>
-- Perroud
Leandro Camargo
<div style="position:relative;overflow:hidden;width:900px;">
<div style="left:-100px;position:absolute;top:0;width:50%;">
<div style="padding-left:100px;"><!-- CONTEUDO COL-ESQ --></div>
</div>
<div style="margin:0 auto;width:200px;">
<!-- CONTEUDO MEIO -->
</div>
</div>
<div style="position:absolute;right:-100px;top:0;width:50%;">
<div style="padding-right:100px;"><!-- CONTEUDO COL-DIR --></div>
</div>
</div>
=====================
Acredito que deva funcionar bem portavelmente.
Só que terá problemas caso a coluna esquerda ou direita for maior que a do meio.
2008/8/12 Perroud <per...@gmail.com>:
Leandro Camargo
Fui tentar jogar no pastie.org mas aquela porquêra não tava querendo
submitar....
Então vou colar aqui mesmo:
===============
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>teste</title>
</head>
<body>
<div style="position:relative;overflow:hidden;width:100%;">
<div style="background:#eee;left:-100px;position:absolute;top:0;width:50%;">
<div style="padding-left:100px;">
Marquee selectus non provisio incongruous feline nolo contendre.
Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et
non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen.
</div>
</div>
<div style="background:#f00;margin:0 auto;width:200px;">
Glorious baklava ex librus hup hey ad infinitum. Non sequitur
condominium facile et geranium incognito. Epsum factorial non deposit
quid pro quo hic escorol. Marquee selectus non provisio incongruous
feline nolo contendre Olypian quarrels et gorilla congolium sic ad
nauseum.
</div>
<div style="background:#eee;position:absolute;right:-100px;top:0;width:50%;">
<div style="padding-right:100px;">
Epsum factorial non deposit quid pro quo hic escorol. Marquee
selectus non provisio incongruous feline nolo contendre Olypian
quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus
carborundum e pluribus unum.
</div>
</div>
</div>
</body>
</html>
===============
Testei no opera9, safari 3.1.1, ie6/7 e ff2. Em todos eles funcionaram ok.
2008/8/12 Leandro Camargo <leand...@gmail.com>:
Thalis Valle
Obs: lembrando que CSS inline é errado. O cara do exemplo anterior, te passou inline. Testei somente no FF.
CSS:
<style type="text/css" media="screen">
<!--
* { margin: 0; padding: 0; }
img { display: block; }
body { font-family: Arial, Helvetica, sans-serif; font-size: 1.0em; }
#topo { width: 100%; padding: 15px; background: #006; color:#FFF; }
#direita { width: 100%; padding: 15px; background: #444; color:#FFF; float: right; position:relative;}
#esquerda { width: 100%; padding: 15px; background: #666; color:#FFF; float: left; position:relative; }
#meio { width: 200px; height:200px; padding: 15px; background: #ccc; color: #FFF; margin: auto; position:relative; }
#rodape { width: 100%; padding: 15px; background: #22e; color: #FFF; margin: auto; }
-->
</style>
XHTML:
<div id="geral">
<div id="topo">topo</div>
<div id="esquerda">esquerda</div>
<div id="direita">direita</div>
<div id="meio">meio</div>
<div id="rodape">rodape</div>
</div>
Thalis Valle
http://www.thalisvalle.com/
diego nunes
> A idéia é essa:
> Obs: lembrando que CSS inline é errado. O cara do exemplo anterior, te
> passou inline. Testei somente no FF.
Errado por errado, os IDs que você usou pros seus elementos está
horrível e você tá usando uma má prática dos infernos ao definir
largura e padding no mesmo elemento.
Teto de vidro, hein, amigão? ;)
--
diego nunes
dnunes.com
Leandro Camargo
intenção de ficar dedicando muito tempo pra montar aquele código.
Deixo essa tarefa para o interessado no código.
2008/8/12 Thalis Valle <thali...@gmail.com>:
Thalis Valle
Não entendo o porquê tentar se superiorizar, meu amigo.
Se essa resposta foi para mim, mostre então pro todos o que você faz certo.
Eu passei um exemplo básico. Não tenho tempo pra poder me dedicar com as dúvidas dos calegas aqui. Pelo meu exemplo (se você testar no FF - que eu comentei) é o esquema que o rapaz queria.
Você foi muito infeliz no seu comentário.
Antes, procura saber com quem você vai se referir, pra não se passar por chato desavisado.
Mas, como eu não sou chato, eu não vou mostrar que eu sou superior a você, porque nem site e nem nome, você tem.
Thalis Valle
http://www.thalisvalle.com/
Romulo Marques
Fiquei curioso com isso...
R/M
On 12 ago, 12:27, "diego nunes" <dnu...@gmail.com> wrote:
> 2008/8/12 Thalis Valle <thalisva...@gmail.com>:
Carlos R. L. Rodrigues
"zezé di" Camargo fez errado.
Porém o objetivo era apenas fazer um exemplo tosco pra pessoa que
perguntou entender a idéia, e não ficar fazendo código bonitinho e
talz.
Vc criticou, e foi criticada, apenas isso ;)
--
Carlos R. L. Rodrigues
http://jsfromhell.com
2008/8/12 Thalis Valle <thali...@gmail.com>:
Sândalo Barbosa
>> horrível e você tá usando uma má prática dos infernos ao definir
>> largura e padding no mesmo elemento.
--
Sândalo B.
"É melhor calar-se e deixar que as pessoas pensem que você é um idiota do que falar e acabar com a dúvida."
Leandro Camargo
Já rolou duas soluções aqui para quem abriu a thread.
E acho que isso é o suficiente.
Quem quiser extendê-la com outro assunto acho melhor criar outra thread.
2008/8/12 Sândalo Barbosa <genk...@gmail.com>:
diego nunes
> Diego, por que não pode definir largura e padding no mesmo elemento?
> Fiquei curioso com isso...
têm problemas com o box model. O ideal é usar um "box in a box" da
vida ou alguma outra técnica que não dependa de hacks pra facilitar a
manutenção futura do código e ainda manter a compatibilidade com as
versões antigas.
--
diego nunes
dnunes.com
Thalis Valle
Já que todos aqui são inteligêntes e conhecem boas práticas de web standards, ao invés de ficar buscando discussão desnecessária, usem o google. Ele é ótimo, inclusive pra achar muita porcaria.
Thalis Valle
http://www.thalisvalle.com/
Perroud
Por isto mesmo sugeri alguns atributos vitais para as div's que citei no exemplo. justamente para que estes pormenores não atrapalhem o restante do desenvolvimento. Padding e margin são secundários.
-- Perroud
Perroud
sjta
ainda é um problema... vou continuar tentando
Obrigado!
On 12 ago, 02:22, Perroud <perr...@gmail.com> wrote:
> Muito provavelmente, terá de usar position: absolute para as 3 div's... ou
> você usar o seguinte
>
> <div id="satangoss">
> <!-- essa é absolute e com width 100%, as outras, relative -->
> <div id="miya>
> <!-- aqui tera a coluna da esquerda com width: 40%, clear e float:
> left -->
> </div>
> <div id="edin">
> <!-- aqui sera a div da direita, com width: 40%, clear e float: right
> -->
> </div>
> <div id="jaspion">
> <!-- aqui vai o conteudo do meio, mas vc nao poderá especificar
> largura. quem define parcialmente o tamanho desta div... serão as larguras
> anteriores -->
> </div>
> </div>
>
> -- Perroud
>
sjta
testar?
As divs direita e esquerda não ocupam sua posições, vem logo abaixo do
topo, ocupando toda a largura disponível, e a div do meio se posiciona
sobre elas.
Obrigado pelas dicas, ainda vou tentar um pouco mais.
Silvio
sjta
Sua solução proposta foi a que mais se aproximou da solução do meu
problema. Só tenho uma dúvida, é possível aumentar a largura do div
central e deixar que os divs laterais se adaptem à sobra? Tentei aqui
e não consegui, e isso seria a completa solução.
Obrigado
sds
Silvio
sjta
gostaria que um tópico por mim criado gerasse tanta polêmica.
Apesar de ser iniciante nesse mundo "tableless, divs, etc" já
participei de vários outros grupos de discussão de assuntos tão
diversos quanto vcs podem imaginar. Peço aos amigos que se acalmem,
não há necessidade de tanta animosidade. Foi só uma dúvida besta, de
um usuário besta (no caso, eu) e ainda por cima, mal formulada :-)
Agradeço a todos pelas sugestões, todas elas contribuíram um pouco
para me ajudar. Se alguém tiver algum material (sério) sobre tableless
ficaria agradecido, pois realmente estou interessado em aprender.
No mais, take easy, boys... como diria a propaganda, pegar leve é uma
atitude saudável :-D
Abraços
Silvio
> 2008/8/12 Thalis Valle <thalisva...@gmail.com>
> > Aos egos infláveis,
>
> > Já que todos aqui são inteligêntes e conhecem boas práticas de web
> > google*. Ele é ótimo, inclusive pra achar muita porcaria.
Leandro Camargo
A idéia básica é a seguinte:
- o *left* da coluna esquerda tem que ser o valor negativo da metade
da largura da do meio;
- o *padding-left* da div interna da coluna esquerda tem que ser o
mesmo valor acima, só que positivo;
- o *right* da coluna direita tem que ser o valor negativo da metade
da largura da do meio
- o *padding-rightt* da div interna da coluna direita tem que ser o
mesmo valor acima, só que positivo;
Dúvidas?
2008/8/13 sjta <silvi...@yahoo.com.br>:
Leandro Camargo
Na verdade esse meu jeito de fazer não funciona sem especificar o
width na coluna do meio.
Afinal, essa foi uma das premissas que você estipulou: colunas
laterais dinamicas, e coluna do meio com largura definida.
Então, repare a coluna do meio: é a única com width definido com um
valor 'não variável'.
2008/8/13 sjta <silvi...@yahoo.com.br>:
Evandro Celeghini
pelo que entendi você quer manipular a largura do meio e fazer as demais colunas se adaptarem, certo? Pela solução do Leandro, basta você mexer nos valores de padding-left, left, padding-right e right juntamente com o width da coluna do meio. Se você quer que isso se ajuste dinamicamente ao browser, use javascript para manipular aqueles valores.
[]'s
Evandro
Thalis Valle
Procura no W3C
http://www.w3.org
Garanto que você vai entender o porquê os amigos que escrevem <div style="fulano;ciclano;beltrano;"> não fazem boa prática de standards.
Lá, é o único conteúdo VERDADEIRO, pois é gerido pelo próprio time que faz a Web Standards. (Ver também WaSP)
There Google!
Thalis Valle
http://www.thalisvalle.com/
Leandro Camargo
Se eu reformular aquele código colocando seletores nas tags você pára
de fazer post desnecessário na thread, fazendo com que eu também faça
o mesmo? Já disse que aquele exemplo possui inlines a título de
brevidade.
Com certeza usar inlines em um site é errado. E de qualquer forma você
vai não vai morrer nem contrair uma doença caso o faça. E se você
morrer ou contrair uma doença será pura coincidência, nao seja
supersticioso.
Sílvio, caso *você* precise que aquele meu código seja convertido
usando seletores, me avise.
2008/8/13 Thalis Valle <thali...@gmail.com>:
diego nunes
> Lá, é o único conteúdo VERDADEIRO, pois é gerido pelo próprio time que faz a
> Web Standards. (Ver também WaSP)
"Que faz a Web Standards"? Rapaz, você precisa parar de ver
workshop de tableless da galera da Visie. Quer dizer... Os caras te
dão uma ótima introdução, mas se basear só nisso e no Maujor.com vai
te matar.
--
diego nunes
dnunes.com
sjta
forma que vc especificou!
Mas pode ter certeza, caso surjam mais dúvidas, venho perturbá-los
novamente :-)
Abraços
Silvio
On 13 ago, 14:32, "Leandro Camargo" <leandro...@gmail.com> wrote:
> Bom, você precisa de alguns requisitos.
> A idéia básica é a seguinte:
> - o *left* da coluna esquerda tem que ser o valor negativo da metade
> da largura da do meio;
> - o *padding-left* da div interna da coluna esquerda tem que ser o
> mesmo valor acima, só que positivo;
> - o *right* da coluna direita tem que ser o valor negativo da metade
> da largura da do meio
> - o *padding-rightt* da div interna da coluna direita tem que ser o
> mesmo valor acima, só que positivo;
>
> Dúvidas?
>
Enrique Robledo
pouco, no final das contas pra nós aqui do outro lado pouco importa o
que achamos sobre sê um cara que posta um código é um fera ou não,
importa como esse código ajuda pra melhorar o nosso, e também acho que
esse tipo de comentários abre ao debate. Agora com respeito ao modelo
box in a box, eu acho que complica muito o código, eu tenho sites
feitos usando largura e padding, e eles não tem problemas de
visualização em : Opera, Safari, IE6,7, Firefox2,3 que são os
navegadores que eu uso para testar. Tal vez as vezes o problema não é
usar o padding e widht ou height, senão a forma como isso é usado sem
pensar que diferentes navegadores tem diferentes linhas de base para
essas medidas.
E outra coisa, se os hacks dão certo porque é errado usar eles?, eu
por exemplo achei ótimo o hack para mostrar os PNG´s no IE6,
antigamente era todo um trabalho fazendo swf´s para tudo o que tinha
transparência, com o hack é só exportar o png bem levezinho e pronto.
Vocês que opinam?
On 12 ago, 17:32, "diego nunes" <dnu...@gmail.com> wrote:
> 2008/8/12 Romulo Marques <opiums...@gmail.com>:> Diego, por que não pode definir largura e padding no mesmo elemento?
Leandro Camargo
> E outra coisa, se os hacks dão certo porque é errado usar eles?, eu
> por exemplo achei ótimo o hack para mostrar os PNG´s no IE6,
> antigamente era todo um trabalho fazendo swf´s para tudo o que tinha
> transparência, com o hack é só exportar o png bem levezinho e pronto.
> Vocês que opinam?
Peguemos o exemplo do PNG citado.
Ele pode deixar a renderização bem lenta se você usá-lo em muitos
elementos (como seletores 'div, img' por exemplo) da página e se
houver muitos PNGs a serem "corrigidos". Foi justamente algo que eu já
presenciei. Mas é a única opção para quem não pode ficar sem tais PNG
transparentes pro IE6. Geralmente consideram hacks como resolver um
problema com um outro problema.
Usar comentários condicionais, por exemplo, pro IE e tudo mais parece
algo bem sensato e funciona. Esse é um tipo de hack que não afeta a
evolução dos navegadores nem interfere nos outros existentes. Mas
evite os que não preservem essa idéia. Você pode ter dor de cabeça num
futuro próximo.
Perroud
Marketeiros são foda.
-- Perroud
diego nunes
> Usar comentários condicionais, por exemplo, pro IE e tudo mais parece
> algo bem sensato e funciona. Esse é um tipo de hack que não afeta a
> evolução dos navegadores nem interfere nos outros existentes.
dos arquivos e toda vez que for efetuar uma alteração, você precisa
alterar nos dois (ou três, ou quatro...).
Se você pode fazer tudo funcionar com um só CSS, com um esforço
mínimo durante o desenvolvimento e não ter mais dor de cabeça com o
assunto, pra que o outro caminho? Ao menos quanto ao box model é
simples assim.
--
diego nunes
dnunes.com
Leandro Camargo
Nesses casos temos que simplesmente fazer funcionar.
Geralmente quem desenha o site tá mais preocupado com as cores e
formas do que com a funcionalidade e o conceito do site e *manda vê*
ou *alopra* no Photoshop. As gambiarras sobram pro CSS men.
2008/8/14 diego nunes <dnu...@gmail.com>:
Cleber Gouvêa
http://blog.html.it/layoutgala/
Cleber
2008/8/13 sjta <silvi...@yahoo.com.br>:
Fabio Ortolan
o Holly Grail!
Sim é o nome desta tecnica, assim é até bom para quem quer procurar na
internet
http://www.glish.com/css/7.asp
On Aug 14, 7:43 pm, "Cleber Gouvêa" <cleb...@gmail.com> wrote:
> Tem vários exemplos de layout aqui (Líuidos e Fixos e com três colunas):
>
> http://blog.html.it/layoutgala/
>
> Cleber
>
Thalis Valle
Riva Gon - Creativita Web
Caros amigos,
Venho através desse solicitar uma ajuda, em uma questão de cadastro de informações em um banco de dados.
Sistema de venda de DVDs.
Em uma tabela (Entidade) mantenho as produtoras dos filmes.
Em outra tabela (Entidade) mantenho todos os filmes.
É um relacionamento N:N, filme pode ter 1 ou N produtoras, a questão é a seguinte:
O administrador do sistema ao cadastrar o filme, já tendo feito o cadastro no controle de produtoras, precisa especificar quantas produtoras o filme tem, como faço isso no formulário?
Sendo assim se o filme possui 3 produtoras, queria três campos no formulário, para ele digitar, mas se o filme tem 5 produtoras, quero que tenha 5 campos de texto para isso.
Qual a melhor maneira de fazer isso na minha interface e que componentes do HTML posso utilizar para que o Administrador escolha q quantidade e as produtoras que ele irá cadastrar para cada filme.
Desde já obrigado pelas respostas.
Atenciosamente,
Rivaldo Gonçalves
Marco
--
Marco de Freitas
Felipe Djinn Asmodeu
vc pode fazer um select com a quantidade de cadastro que o adm pode fazer, e no onchange vc chama uma função javascript, nessa função vc faz um for( i=0; i <= "numero passado pelo select" ...... e essa função escreve n vezes o form de cadastro....
num sei se deu pra entender mais qlq coisa fala aee...
hehehe
Carlos R. L. Rodrigues
> usa javascript....ou até ajax....
Explica pra mim a diferença de javascript e ajax?
Perroud
Se não me engano, Ajax é um composto voltado a limpeza doméstica e JavaScript é aquela linguagem client-side pra fazer firulas no browser. Tenho uma leve impressão que é algo assim.
-- Perroud
Leandro Camargo
>> usa javascript....ou até ajax....
Dá-me dores no pâncreas quando leio umas coisas dessas.
Fora quando alguém chama de ajax certos recursos de camadas
sobrepostas com transparência e etc.
Perroud
Vamos fazer de conta que Ajax é aquilo que os designers firulentos amam nos frameworks. Fazer firulas, piruetas... ginástica olímpia e tal.
-- Perroud
Perroud
Anderson Kenji Mise
é vc usar um "componente" do html chamado SELECT dentro de um FORM
http://www.w3.org/TR/html401/interact/forms.html#h-17.6
(veja a forma de SELECT MULTIPLE)
Dessa forma você exibe todas as produtoras e o usuário seleciona uma
ou mais segurando o CTRL e clicando nas desejadas.
2008/8/15 Riva Gon - Creativita Web <efl...@efluxo.com>:
Perroud
-- Perroud
Israel Cefrin
>> usa javascript....ou até ajax....
>
> Explica pra mim a diferença de javascript e ajax?
>
[]'s
--
Israel Cefrin
diego nunes
> (veja a forma de SELECT MULTIPLE)
providencia um treinamento excepcional pra empresa ou vai receber
reclamações dizendo que não se pode selecionar mais de um por vez a
vida toda. Usuários simplesmente não são capazes de entender a coisa
do "segure o ctrl".
--
diego nunes
dnunes.com
Felipe Djinn Asmodeu
João Vagner
Alguém, sabe como usar um helper na home com o cake? Estou precisando usar o
helper time, porem a home fica em /views/pages/home.ctp, como importar, usar
um helper nessa home?
João Vagner
jo...@iw2.com.br
www.iw2servers.com.br
#IW² blog [ http://iw2servers.com.br/blog ]
011 3854-9308
011 3717-3148
011 8923-9648
011 7875-5656
Nextel ID: 82*46728
ricardo couto
que voce quer usar esse helper...
mas o ideal seria voce fazer o pages_controller e definir o uso do helper nele.
2008/8/16 João Vagner <joao....@gmail.com>:
Alessandro Ramos
||
||
\/
2008/8/14 Thalis Valle <thali...@gmail.com>:
[]'s & =*'s do lee
# Alessandro Ramos dos Santos @ Itaporanga @ SP @ Brasil
# MSN: lee.rain # Gtalk: edenfall # Orkut: 7093009035179968825
"A nação que resolve trocar um pouco de liberdade por um pouco de
ordem não consegue nenhuma das duas, e não merece a ambas" - Thomas
Jefferson