Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

gilbertjuniors

Centralização em DIV Fluida

Por , em Desenvolvimento frontend

Recommended Posts

gilbertjuniors    1

gilbertjuniors
Postado

Galera, boa noite

 

Estou montando um layout com 2 colunas, uma fixa para o menu lateral e outra fluida para o conteudo, esta div fluida ficará centralizada no espaço a direita da div menu, tentei centralizá-la com margin: 0 auto mas não deu certo.

 

o código ficou assim:

 

#menu_lateral {
float: left;
width: 225px;
}
#conteudo {
float: left;
margin: 0 auto;
width: 76%;
}

esta 2 divs estão dentro da largura total do site será:

#tudo {
max-width: 1360px;
width: 100%;
}

 

Como centralizar então esta DIV CONTEUDO no espáço que sobra a direita do MENU?

 

 

Grato

 

 

Gilberto

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Oderdenge    42

Guilherme Oderdenge
Postado

Olá.

 

Primeiro, nunca trabalhe divs containers com porcentagem. Utilize a medida px (pixels).

 

Segundo, para você centralizar uma div em relação a outra, o margin: 0 auto; não é a solução. Digamos que sua div tenha 950px de largura (width), então divida-a por dois e jogue o resultado em um margin-left. No caso de 950px, ficaria: margin-left: -475px; Para ficar proporcionar, dê um position: relative e um left de 50%.

 

Terceiro: ambas as divs devem flutuar à esquerda e serem dimensionalmente proporcionais (float: left;).

 

Um abraço!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Mateus Avila Isidoro    8

Mateus Avila Isidoro
Postado

Centralizar uma div em css tu tem que calcular o tamanho da div. Mas tem um jeito mais seguro que é via javascript.

 

$(document).ready(function(){
function sizer(){
var larguraJanela = $(window).width();
var alturaJanela = $(window).height();
var larguraObjeto = $('SELETOR_DESEJADO').width();
var alturaObjeto = $('SELETOR_DESEJADO').height();
$('#loginForm').css({'top':(alturaJanela-alturaObjeto)/2, 'left':(larguraJanela-larguraObjeto)/2});
}
sizer();$(window).resize(function(){sizer();});
});

 

Se você reparar, eu uso resize, quando o indivíduo quiser mexer na página, ele automaticamente irá centralizar na página. A vantagem desta tecnica é que tu pode aplicar para qualquer div.

 

Abração

Compartilhar este post

Link para o post
Compartilhar em outros sites

gilbertjuniors    1

gilbertjuniors
Postado

Olá.

 

Primeiro, nunca trabalhe divs containers com porcentagem. Utilize a medida px (pixels).

 

Segundo, para você centralizar uma div em relação a outra, o margin: 0 auto; não é a solução. Digamos que sua div tenha 950px de largura (width), então divida-a por dois e jogue o resultado em um margin-left. No caso de 950px, ficaria: margin-left: -475px; Para ficar proporcionar, dê um position: relative e um left de 50%.

 

Terceiro: ambas as divs devem flutuar à esquerda e serem dimensionalmente proporcionais (float: left;).

 

Um abraço!

 

Guilherme, o que eu quero é um Layout ao estilo Responsive Web Design Site Tableless, exemplos: Exemplos, um layout que se adapte da resolução 1024px a resolução 1366px de largura, e um CSS especifico para mobile (resoluções menores).

 

Será uma loja virtual e quero o menu com largura fixa e a parte conteudo com os produto varie, na resolução 1024px terá umas 3 ou 4 colunas de produtos e nas de 1280px e 1366px terá uma coluna a mais de produtos, por isto pensei na largura variável.

 

As tecnicas básicas que pesquisei estão no site Técnicas

 

Mas quando não defino largura nenhuma na DIV conteúdo, ela não aparece, e a largura não pode ser fixa pois vai depender da resolução, se olhar nos sites de exemplo ao variar a largura do navegador, o layout se adapta automaticamente

Compartilhar este post

Link para o post
Compartilhar em outros sites

Anilton Veiga    0

Anilton Veiga
Postado

Pelo que eu intendi, é isso que você quer!

 

Aquivo .css

body{
background-color:#CCC;
margin:0;}
.topo{
height:250px;
background-color:#030;
}

.conteudo{
background-color:#F00;
float:left;
width:100%;
}

#menu{
background-color:#036;
width:15%;
float:left;}

#meio{
background-color:#FFF;
float:left;
width:85%;
}

#rodape{
background-color:#C00;}

 

 

arquivo .html

 

<body>
<div class="topo">Topo</div>
<div class="conteudo">
 <div id="menu"> 
   <p>Menu</p>
 </div>
 <div id="meio"> 
   <p>Aqui vira o conteudo do seu site</p>
 </div>
 <div class="rodape">
 rodape
 </div>  
</div>
</body>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Diéssica    140

Diéssica
Postado

No inglês oficial (Responsive Web Design) capaz de tu achar mais fontes ainda!

Mas estudar o que eu te falei, mesmo que pouco, já vai te dar bastante resultado Gilberto. Acho que vídeo aula deixa muita coisa escapar.

 

Tenta usar o termo "layout adaptável", senão vão acabar entendendo fluído por layouts 100%.

 

Boa sorte!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado
Primeiro, nunca trabalhe divs containers com porcentagem. Utilize a medida px (pixels).

Por que?

O próprio layout do fórum aqui já foi fluido e hoje em dia tem essa opção disponíveis para admins e moderadores para fins de teste...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Oderdenge    42

Guilherme Oderdenge
Postado

Por que?

O próprio layout do fórum aqui já foi fluido e hoje em dia tem essa opção disponíveis para admins e moderadores para fins de teste...

 

Henrique, trabalhar com medidas percentuais no CSS exige uma certa responsabilidade. No caso dele a medida percentual é viável - mas como eu disse, exige certa responsabilidade. E assim, não só o iMasters como muitos (e muitos) fóruns que utilizam IPB ou não utilizam a técnica do "fluído" (sim, eu sei!).

 

Eu meio que me equivoquei lá encima falando para não usar porcentagem, o correto seria: evite! Quando puder, use pixels.

 

Analise em questão de detalhes: tenho 2 camadas de div (#wrapper>#content) - se eu não tiver uma projeção de layout boa, o trabalho com a porcentagem vai ter um resultado "feio". E assim, utilizando essas camadas como exemplo ainda é-se pensável, mas pense em possibilidades mais específicas onde você trabalha com a porcentagem em cada div que faz.

 

Em resumo: a possibilidade de se trabalhar com porcentagem e ficar bom apenas na sua resolução é maior do que com relação aos pixels. Estou analisando este todo por questões de segurança.

 

Entendeu?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Honiesty    0

Honiesty
Postado

Em relação ao Resposive Web Design, você não precisa fazer, necessariamente, um layout "fluido", que se encaixe, naturalmente, a todas as resoluções. Eu não me lembro se foi em HTML mesmo, ou se eu usei JS, mas eu tinha feito o layout antigo do meu projeto, com um if no inicio do index, que verificava a width do usuário, e redirecionava para ou página, exemplo:

 

index.html, eu abro utilizando uma resolução de 1600x900, o site me redireciona para o arquivo index_1600.html, ou eu abro do meu smartphone, que usa resolução de 480x320, então o site me redireciona para index_480.html ou m.index.html....

É uma boa solução para layouts maiores, não aconselho muito, pois isso não é uma pratica muito moderna, mas que é eficiente é, mais trabalhosa, é claro, mas funciona.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Oderdenge    42

Guilherme Oderdenge
Postado

Honiesty, isso é totalmente incorreto.

 

A utilização dessa prática só é recomendada se você trabalha com imagens dimensionais, ou seja, com imagens delicadas que requerem tamanhos específicos para as diferentes resoluções.

 

Mas ainda assim, o correto não é utilizar isso. Um if na exibição das imagens resolve.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Diéssica    140

Diéssica
Postado

Em relação ao Resposive Web Design, você não precisa fazer, necessariamente, um layout "fluido", que se encaixe, naturalmente, a todas as resoluções.

Ué, pq?

 

CSS3 tá aí pra isso. :)

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito