div e container flutuante bootstrap.

[oscar009 0]

Olá Pessoal ,

 

Eu estou tentando fazer um template pessoal em bootstrap , mas estou encontrando a seguinte dificuldade para posicionar a div ou o container bootstrap.

 

Estou usando o modo responsive e preciso saber se alguem sabe como resolver essas encrencas .

 

 

As imagens abaixo ilustram o problema que estou tendo .

 

 

Em uma tela full quero que as div fiquem posicionadas nessa posição :

 

Agora o problema quando eu faço a diminuição do do navegador ou abro essa pagina no celular a div deveria ficar dessa forma como mostra na imagem abaixo :

 

Mas isso não está acontecendo , certamente porque sou iniciante em CSS e Bootstrap .

Alguem pode me ajudar com essa encrenca ?

 

 

Agradeço desde já a atenção de todos .

Oscar .

 

 

 

 

[LeoO_DF 22]

Cara eu acho que isso não é possível com css, com javascript sim, onde você iria pegar o tamanho da resolução do usuário e aplicar a css nas divs, você pode pegar a resolução usando:

<script language='javascript'>
    var width = screen.width;
	var height = screen.height;
</script>

Isso pega a resolução total, exemplo a minha é 1360x720, mais no navegador ela fica menor, a resolução do navegador você pode pegar:

<script language='javascript'>
    var width = $(window).width();
	var height = $(window).height();
</script>

E para mudar o css das div:

<script language='javascript'>
    $("#Div1").css();
</script>

para mais informações sobre a função css: http://api.jquery.com/css/

 

Com Css não sei um modo possível, você poderia usar display:inline-block; e usar width por %, assim ela irá se adequar a tela do usuário e se não me engano se ambas as div não couberam na resolução o display inline-block irá jogar uma para baixo, não sei, nunca testei mais com javascript iria ficar mais eficaz eu creio, Uma das formas que você poderia fazer é quando o usuario entrar na pagina você pega a resolução dele e monta 2 style.css uma com a div dentro e outro com a div em baixo.

Para usar a require você irá precisar da resolução em variaveis php para facilitar use:

<script language='javascript'>
	document.cookie = "resolucao="+screen.width+"x"+screen.height;
</script><?php
if(isset($_COOKIE['resolucao'])):
	$Resolucao = list($user_width,$user_height)=explode("x",$_COOKIE['resolucao']);
endif; 
?>

Assim você insere a resolução do usuário em um cookie e depois use:

<?php
$Tamanho_Minimo = 'TAMANHO MINIMO PARA A DIV FICAR IGUAL A IMAGEM 1';
if($user_width >= $Tamanho_Minimo):
	?>
    <link href="Css/style_1.css" rel="stylesheet" />
    <?php
else:
	?>
    <link href="Css/style_2.css" rel="stylesheet" />
    <?php
endif;
?>

Claro, existe formas muito mais eficazes e etc, mais de início essa serve :D

[oscar009 0]

Muito obrigado pela resposta Leo , um exemplo sobre esse problema que estou falando está nesse link.

 

Eu quero fazer igual esse mapa que é uma div de fundo e outra div superior que é essa busca , porém no meu template eu quero colocar um slide.

http://html.realia.byaviators.com/

 

 

Agradeço desde já.

Oscar

[LeoO_DF 22]

Realmente muito foda o Site, eles fazem isso com js, Não sei como, não tenho certeza se ao aumentar sua Tela a $(window).width(); irá se adequar ao zoom que você aplicar ao navegador, mais tenho quase certeza que não é possível fazer isso com css, Tenta postar na área de javascript do fórum e coloca o site como exemplo que alguém deve ajudar, com algum plugin ou algum código.

[William Bruno 1501]

cara.. antes o elemento tinha um position absolute,para ficar por cima e "dentro" do outro, e depois ele perdeu o absolute.

 

simples assim.

[oscar009 0]

Eu consegui baixar esse site inteiro , porém o css dele é muito embolado . mas ele inicia um container e coloca um top -300px para a span subir por cima daquela outra layer .

É complicado entender como o desenvolvedor fez . mas eu vou descobrir agora revirando esse codigo .

 

se quiserem uma cópia desse site , é só falar que mando para voces tentarem descobrir isso tbm .

 

Agradeço desde já .

Oscar

[vonzuben 12]

<div class="container">

<div class="row">

<div class="col-md-6">Div 1</div>

<div class="col-md-6">Div 2</div>

</div>

</div>

 

Usa Bootstrap 3 !