Jump to content

Layout google maps


taviroquai
 Share

Recommended Posts

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
Link to comment
Share on other sites

Á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 by taviroquai
Link to comment
Share on other sites

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.

"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Link to comment
Share on other sites

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 by taviroquai
Link to comment
Share on other sites

^

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 by brunoais

"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.