[Resolvido] Div com Frame no Meio da Página

[Dee 0]

Boa Tarde. Quero atrapalhar o almoço de vocês. Há!

 

Eu tenho essa página aqui: http://www.salcam.com.br/casa_agricola_ecommerce

 

Percebam que ao lado tem a caixa da de Login e na outra um Menu.

Eu queria por um iFrame dentro de uma Div entre essas caixas. Mas toda vez que coloca, desconfigura o Layout.

Que vai até o final também (height).

Algúem pode me ajudar ?

 

Para ver o código fonte, vai pela página mesmo. Mas se quiserem que eu coloque aqui, tanto faz.

 

Obrigado.

[João Prado 64]

Qual é a real necessidade de se colocar um iframe?

 

caso seja realmente necessário (o que duvido) basta definir seu tamanho com width e height deixando de acordo com o layout

[Dee 0]

Vai abrir página dentro dele.

Qual outra forma ? uma div que abra uma página dentro ?

É que com Div, vou ter muito trabalho com AJAX, pq vai ter formulários em algumas páginas.

=\

 

Entao, eu fiz isso, mas nao deu certo.

Preciso de ajuda, nao sei muito de design.

 

você viu a página ? Quero por o frame ou qualquer outra coisa entre as caixas.

[João Prado 64]

Porque não trabalha com includes?

 

pode fazer isso usando uma linguagem server side

 

iframes não são mais utilizados hoje em dia http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Dee 0]

beleza cara. to usando php

como faço agora pra colocar a div entre as caixas. essa eh a pergunta ?

o resto eu me viro.

 

orbigado.

[João Prado 64]

     <div id="login">Conteúdo do login</div>
     <div id="centro">Conteúdo da div central</div>
     <div id="menu">Conteúdo do menu</div>

o Código base é esse

 

depois só aplicar no css um float:left pra todos http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Dee 0]

Como float:left a todos ?

 

você viu a página ?

O login do lado esquerdo, o menu do lado direito, a div centro no meio...

 

nao entendi! :S

 

mas vou tentar fazer

 

alá cara... eu fizz, vai la ver

ele desce a caixa de login. pera e

[João Prado 64]

Você pode trabalhar com porcentagem em seu CSS ficando mais ou menos assim:

 

 

<style>
	*{margin:0; padding:0}
	#tudo{
		width:100%;
		margin:0 auto;
	}
	#login{
		width:20%;
		height:auto;
		float:left;
	}
	#centro{
		width:60%;
		height:auto;
		float:left;
	}
	#menu{
		width:20%;
		height:auto;
		float:left;
	}
</style>

 

 

<div id="tudo">
        <div id="login">Conteúdo do login</div>
        <div id="centro">Conteúdo da div central</div>
        <div id="menu">Conteúdo do menu</div>
    </div>

Deste jeito o menu sempre estará grudado no canto direito, o login no canto esquerdo e o conteúdo irá ocupar todo o centro

[Dee 0]

Bom

Deu certo cara... eu entendi tbm o que você fez.

Mas outra coisa, pq no dreamweaver nao fica certo ?

[João Prado 64]

Como assim não fica certo? você esta fazendo pelo modo Design?

 

Fiz aqui pelo DW no modo Code e visualizei no Firefox

[Dee 0]

mas veja lah agora

o menu da direita nao ta ficando depois da div conteudo ou centro...

 

pq ?

coloquei as 3 float:left

 

eu fiz por code mesmo

mas quando clico em design, fica desconfigurado.

 

e outra, quando faz o login

abre outro menu embaixo do de login.

antes abria certo

mas com essas alterações agora ele nao abre mais do lado esquerdo em baixo

como faço ? pra outro menu ficar ali embaixo ?

[João Prado 64]

tenta tirar esta parte destacada em vermelho do código:

 

#menu_direita

{

width:20%;

height:auto;

list-style:none;

float:left;

position:relative;

top:0px;

border-left:1px solid black;

border-bottom:1px solid black;

}

 

 

O que faz ele quebrar a linha são as bordas pois elas aumentam o tamanho da div

 

diminua o tamanho da div centro pra 58%, caso não funcione vá diminuindo assim até se alinhar ;)

[Dee 0]

Eh deu certo

mas está com 'borda' na direita do menu da direita, nao tem como tirar ?

 

eh obvio

coloquei um float:right no menu da direita

 

enfim, agora ficou um tipo de borda branca no canto esquerdo da caixa de login, nao consegui ver o que eh

[João Prado 64]

esquece o float:right

 

insira na div menu um padding-right:1%

 

aqui deu certo :)

 

 

OBS: coloquei 1% pois minha div centro esta com 59%. Caso a sua esteja por exemplo com 58% utilize 2% de padding http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Dee 0]

fiz o que você falou

mas nao virou

 

eu coloquei padding-right na div menu_direita, nem eh div, eh um UL

acho que nao faz diferença neh

 

mas enfim, nao foi

[João Prado 64]

coloque a UL dentro de uma div para melhor organização http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Dee 0]

dae o float:left e o padding-right eu declaro para essa div que vai encobrir a UL ?

[João Prado 64]

sim e tira a declaração destas propriedades pra UL http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[angelorubin 142]

Bom dia,

 

Ao invés de utilizar o elemento FRAME ou IFRAME que como nosso amigo já explanou esta caindo em desuso (deprecated).

 

Minha sugestão e a que eu acho a mais adequada é esta aqui do Mauricio Sammy (MAUJOR) - http://www.maujor.com/blog/2006/12/21/inserindo-pagina-html/

 

Espero que ajude.

[Thiago Retondar 18]

Angelo, seria uma boa solução, mas lembro de já ter testado e ela não foi portável em todos os browsers. =/

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif