Layout google maps

taviroquai · June 25, 2012 at 12:54 AM

Viva,

Estou com dificuldades em criar um layout tipo google maps... por sinal até parece simples...

1. uma div como header

2. uma coluna a esquerda

3. uma coluna (mapa) à direita.

Dois problemas:

1. Não consigo dar um height 100% na div do mapa. Tentei com jQuery calcular o height mas mesmo assim aparece a barra do overflow e não quero a barra.

Por consequencia, com overflow hidden, o mapa não ocupa o resto do ecrã, fica cortado. Talvez já seja outro problema noutra div superior...

2. A coluna esquerda, dei height 100% e estica a página para baixo quando há muito conteudo. Não queria. Queria a barra de scroll como no layout do Google Maps.

Se pudessem colocar aqui o markup e o css para conseguir um layout como o do Google Maps era ótimo 😄

Fica aqui um screen do que tenho... Obrigado!

http://img33.imageshack.us/img33/5553/layouttipogooglemaps.png

taviroquai · June 25, 2012 at 01:55 AM

Ás voltas com isto... acho que consegui... ficou assim... provavelmente até se pode melhorar...


html, body {
		margin:0;
		width:100%;
		height:100%;
		overflow: hidden;
	}
	#map_editplacemap {
		margin: 0;
		width: 75%;
		height: 100%;
		float: right;
	}

	#editwrapper {
		margin:0;
		padding:0;
		width: 100%;
		height: 100%;
	}

	#content {
		float: left;
		max-width: 380px;
		width: 24%;
		background-color: white;
		padding: 0 0.5em 0.5em 0.5em;
		max-height: 100%;
		overflow: auto;
	}

Ah! E com ajuda de jQuery...

EDIT 2: Raios... mais um hack para o resize...

           // Fix map height
           $('#editwrapper').height($('body').height() - $('div.header').height());
           // Fix map width
           $('#map_editplacemap').width($('body').width() - $('#content').width() - 15);

Como é que se faz isto só com css? Obrigado.

Edited June 25, 2012 at 02:20 AM by taviroquai

brunoais · June 25, 2012 at 07:57 AM

Eu não sei ao que é que se aplica cada um desses id's.

Mas assumindo algumas coisas...

O div que é suposto estar à esquerda, pode ter um float left e o outro float right.

se queres os widths em percentagem, a percentagem do width da esquerda + a percentagem do width da direita <= 100%. De estes elementos tiverem um padding > 0 ou um margin > 0, então a soma anterior tem que ser estritamente menor que 100%.

Há uns quantos tutorials na internet que ensinam a meter divs lado a lado.

taviroquai · June 25, 2012 at 01:36 PM

Eu não sei ao que é que se aplica cada um desses id's.

Ops... aqui fica o html

<body>
<div class="header">
	<img src="web/data/mapigniter/milogo_131x70.png" alt="MapIgniter Logo" title="MapIgniter" />
</div>
<div id="editwrapper">
	<div id="content"><h2>Conteúdo</h2></div>
	<div id="map_editplacemap" class="divmap"></div>
</div>
</body>

Sim... a div #content tem float left e a div #map_editplacemap tem float right...

Sem jQuery, a div #editwrapper não sabe calcular o height (fica a zero).

Edited June 25, 2012 at 02:38 PM by taviroquai

brunoais · June 25, 2012 at 01:56 PM

^

Troca esse code de PHP para HTML4strict para o geshi pintar melhor, sff (depois edito esta mensagem. Vou ver se consigo responder ao teu problema)

Edit:

Não sei exatamente quando é um em. (acho que é relativo)

Experimenta reduzir o width do content para algo como 20% e vê o q dá. Vai por tentativa e erro 😉.

Edited June 25, 2012 at 02:01 PM by brunoais

Sign In

Layout google maps

Recommended Posts

taviroquai

taviroquai

brunoais

taviroquai

brunoais

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information