Ir para conteúdo

POWERED BY:

Arquivado

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

André do Vale

Quebra-cabeças

Por , em Desenvolvimento frontend

Recommended Posts

André do Vale    76

André do Vale
Postado

E ae galera, beleza?

 

Bom, sou novo no site, e postei um tópico em outra sessão sobre erros que meus sites estão dando no firefox...

Então me indicaram o "tal do tableless" que usa outros tais "DIV" hehe...

 

Bem, dei uma lida rápida, mas não dei conta de pegar muita coisa (sou meio devagar com essas coisas de código)

 

Bom, vou direto ao assunto... eu sempre exportei meus layouts usando tabelas (não me xinguem por isso hahaha)

Mas agora chegou a hora, tenho que aprender como deixar meus sites "OK"...

 

Bom, vou mandar imagens de estruturas básicas que eu utilizo nos meus layouts, gostaria que vocês (se puderem claro né)

me explicassem como faço a estrutura "html" deles:

 

 

Imagem Postada

 

Imagem Postada

 

Imagem Postada

 

Quem puder me auxiliar, eu agradeço desde já...

 

abraço a todos

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

Alkaeda, você quer aprender a trabalhar com as css?

Então leia a seguinte sequência de links: http://forum.imasters.com.br/index.php?s=&...st&p=536888

 

Em relação as suas dúvidas com layout, vá até o site do maujor que lá tem alguns exemplos de como construir layout´s de duas colunas.

 

[]´s

Compartilhar este post

Link para o post
Compartilhar em outros sites

André do Vale    76

André do Vale
Postado

Obrigado pelos links Gio, na hora do almoço vou dar uma lida mais séria nos respectivos sites.Mas eu queria mesmo é saber como fica o código (só pra eu ter como base) dos layouts que postei anteriormente.Assim, o código HTML - com as DIVs separadas e tal -, e o código CSS - com o posicionamento, estilo e tal dos DIVs -.Obrigado novamente, e abraços.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Hunter_    0

Hunter_
Postado

INSIDE,Cara gostei desse teu tuto, foge um pouco do comum, afinal ele "simula um projeto real", muito bom para ajudar quem ta começando parabéns brother!![]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

Ah o negócio comigo eh prático, realidade ^^Valeu aeh, pode ver no meu blog um video-tuto de montagem de css, tbm fico bacaninha[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

Agora só falta o tutorial para criar o tutorial...hehehe

Lembra #INSIDE#?

 

Grande abraço!

Compartilhar este post

Link para o post
Compartilhar em outros sites

DarkWanderer    0

DarkWanderer
Postado

O seguinte... eu li o site do Maujor e foi quando eu comecei a mexer em WebDesign e eu recomendo voce ler desde o começo mesmo. Não é difícil, toda a minha página eu fiz pelo codigo e ficava testando (apertando f12 no dreamweaver) e deu tudo certo mas leia os artigos aqui no fórum sobre posicionamento porque foi aonde ue senti mais dificuldade... e olhe tambem quando estiver fazendo o resultado no firefox, causa alguns problemas de padding e border, Abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

Tableless eh facil de aprender na teoria, o problema é pegar a prática pra resolver os problemas mais comuns, etc... Por isso que eu gosto de mostrar(fazer videos) mais do que falar(escrever)[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

André do Vale    76

André do Vale
Postado

Nossa galera, super ajudas, obrigado mesmo.Obrigado principalmente a você Inside, um tuto super bacana, que vai quebrar um galhão...PS.: Não sei se é só comigo, mas o link parece que saiu do ar. Pode rever por favor?Valeu ein galera, agora é partir para os estudos hehe.

Compartilhar este post

Link para o post
Compartilhar em outros sites

André do Vale    76

André do Vale
Postado

Bom, nesse tempinho li bastante coisa, e entendi "mais ou menos" como funciona tableless.

 

Até aí beleza... agora, fui por em prática, um layout de 4 segmentos horizontais (topo, menu, conteúdo e rodapé).

 

Não sei se é recomendado, mas usei da seguinte maneira:

 

HTML

 

<body><div id="tudo"><div id="topo"><? include("topo.php"); ?></div><div id="menu"><? include("menu.php"); ?></div><div id="conteudo">	<IFRAME id=conteudo		name=stats		marginWidth=0		marginHeight=0 		src="principal.php"		frameBorder=0 		width="100%"		scrolling=no		onload=resizeMe(this)>	</IFRAME></div><div id="rodape"><? include("rodape.php"); ?></div></div></body>
Digamos que de início usar o include foi a forma mais fácil para mim, porque com ele,

eu pude usar tabelas nas páginas... e não houve quebra de posicionamento no FireFox.

 

e

 

CSS:

 

/* CSS Document */body {	margin:0;	margin-top:2px;	margin-bottom:2px;	padding:0;	border:none;	font: 11px Verdana;	background-image:url(fundo.gif);	color:#FFFFFF;	text-align:center;	}#tudo {	width:770px;	 	margin:0 auto;	text-align:left;	border: solid #000000 1px;	border-bottom: solid #000 1px;	border-top: solid #000 1px;	}#topo {	height:247px;	}#menu {	height:36px;	}#conteudo {	margin:0;	padding:0;	background-color:#FFF;	}#rodape {	text-align:center;	height:57px;	}
Agora que mostrei como estou fazendo a página de testes, vou expor o problema e a dúvida consequente.

 

Problema:

 

O menu, é um flash horizontal, com menu em cascata, que se abre na vertical.

A altura TOTAL do flash é de 160 px, mas a altura do menu horizontal nele é de apenas 36 px.

 

Com isto, tentei definir a altura do div para 36 px, com esperanças de que o flash abra corretamente.

Minha surpresa, foi até que o menu vertical se expandiu, MAS... se expandiu por baixo do div "conteúdo"...

 

 

Dúvida:

 

Bom, minha intenção, claro, não é de que o menu se expanda por baixo do conteúdo (de forma escondida),

mas sim acima do conteúdo.

 

Como é que eu posso resolver esse problema? Seria dentro do DIV? Ou seria no CSS? Ou seria no próprio flash?

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