Ir para conteúdo

POWERED BY:

Arquivado

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

David Ramires

Construindo uma Janela

Por , em Desenvolvimento frontend

Recommended Posts

David Ramires    1

David Ramires
Postado

Galera Tudo beleza, preciso de uma ajudinha! =Dconstruindo com css uma janela, estilo essas do windows, mas bem simples, apenas com osbotões de fechar, minimizar, e um local para os textos.(ao decorrer dos tópicos eu usarei imagens para deixa - la com um visual melhor).eu vou postando meu script aqui e queria saber se o caminho é esse mesmo... okesse script serve para deixar a minha janela bem no meio da página, ou onde eu precisar

estilos.css

#posicao {	width:400px;	left:50%;	top:50%;	position:absolute;	margin-left:-200px;	margin-top:-200px;	background-color:#66CCFF;}

OBS: eu coloquei uma cor de fundo para poder ver onde ela está.

--

index.html

<html><head><title> Janela </title><link rel="stylesheet" href="estilos.css" type="text/css"></head><body><div id="posicao"></div></body></html>
PS: com id="posicao" eu usarei para posicionar minha janela na página, e dentro dessa Div, eu vou colocar um class onde vou montar uma barra de título com seus botões.alguma dica ? sugestão, melhoria ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

David Ramires    1

David Ramires
Postado

Eu não entendi exatamente o que você quer fazer. Você tem algum link que possa demonstrar o que seria?Não é nada parecido com um popup?boa tarde.

opa Boa Tarde brother, tem simveja:http://www.davidramires.com/css/janelas/janela.htmlsim seria uma janela pop.. =)

Compartilhar este post

Link para o post
Compartilhar em outros sites

David Ramires    1

David Ramires
Postado

Bom eu sai pesquisando, e fiz uma janela bem simples, até agora ficou assim:

estilos.css

#posicao {	width:400px;	left:50%;	top:50%;	position:absolute;	margin-left:-200px;	margin-top:-200px;}<!--[if IE]>#cols { height:24px; }#cols div { height:24px; float:left; }<![endif]-->#cols { display: table; height:24px;}#cols div { display:table-cell; vertical-align:top;} #barra-titulo {		padding-left:5px;	width:360px;	background-color:#333399;	padding-top:4px;	font-size:14px;	color:#FFFFFF;	font-weight:bold;}#fechar {	cursor:pointer;	width:20px;	padding-top:4px;	background-color:#333399;	}#mini {		cursor:pointer;	width:20px;		background-color:#333399;	padding-top:4px;	}#texto {	padding-top:4px;	padding-left:5px;	width:391px;	_width:400px;	height:100px;	margin-top:0px;	margin-left:0px;	background-color:#9999FF;	border:2px solid #333399;	font-size:13px;}

janela.html

<head><title> Janela </title><link rel="stylesheet" href="estilos.css" type="text/css"></head><body>		<div id="posicao">		<div id="cols">			<div id="barra-titulo">Título</div>			<div id="mini"><img src="mini.gif" width="16"></div>				<div id="fechar"><img src="close.gif" width="16"></div>		</div>				<div id="texto">		Teste para estudos de CSS. Agora vou colocar ações na minha janela, e claro vou tirar essa		cor feia.		</div>		</div>	</body></html>
Vejam um exemplo de como está ficando.

http://www.davidramires.com/css/janelas/janela.html

 

testei no IE e FF

 

alguma sugestão... :rolleyes:

Compartilhar este post

Link para o post
Compartilhar em outros sites

David Ramires    1

David Ramires
Postado

Tá ficando bem legal hein, David!

opa.. beleza Prog_web, então eu estava querendo uma janela para interagir junto com minha programação, ai eu resolvi tentar fazer uma.. :rolleyes: . Não conheco muito de CSS, ai eu vuo fazendo e postando aqui, ai quando alguém achar alguma brecha vão me dar um toque.... vou tentar colocar efeitos agora...

Compartilhar este post

Link para o post
Compartilhar em outros sites

David Ramires    1

David Ramires
Postado

Galera coloquei alguns efeitos com JQuery (js)... :rolleyes:agora fiz o teste IE ... to arrumando para funfar no FF

Compartilhar este post

Link para o post
Compartilhar em outros sites

David Ramires    1

David Ramires
Postado

Mudei algumas coisas para fica funcionando do IE e no FF ficou assim:

 

#posicao {	width:400px;		left:50%;	top:50%;	position:absolute;	margin-left:-200px;	margin-top:-200px;	}<!--[if IE]>#cols { height:24px; }#cols div { height:24px; float:left; }<![endif]-->#cols { display: table; height:24px;}#cols div { display:table-cell; vertical-align:top;} #barra-titulo {		padding-left:5px;	width:350px;	_width:360px;	background-color:#333399;	padding-top:4px;	font-size:14px;	color:#FFFFFF;	font-weight:bold;}#fechar {	cursor:pointer;	width:20px;	_width:20px;		padding-top:4px;	background-color:#333399;	}#mini {		cursor:pointer;	width:20px;		_width:20px;		background-color:#333399;	padding-top:4px;	}#restau {		cursor:pointer;	width:20px;		background-color:#333399;	padding-top:4px;	}#texto {	padding-top:4px;	padding-left:5px;	width:386px;	_width:400px;	height:80px;	position:relative;	top: 28px;	_top: 0px;	left: -395px;	_left: 0px;	overflow: auto;	margin-top:0px;	margin-left:0px;	background-color:#BCBCDE;	border:2px solid #333399;	font-size:13px;}/*só para teste*/#mostrar {	cursor:pointer;			color:#FFCC99;	width:100px;	text-decoration: underline;}

ainda falta mais um detalhe para arrumar no Fire fox...

veja como está ficando

http://www.davidramires.com/css/janelas/janela.html

 

alguma dica para o CSS ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

programador php    0

programador php
Postado

muito legal esse topico, era extamente o que eu precisava,e viva a busca!!!porem apenas por curiosidade, gostaria de saber como faço para ele aparecer no centro da tela, independente de ter barra de rolagem ou nãovaleu

Compartilhar este post

Link para o post
Compartilhar em outros sites

programador php    0

programador php
Postado

voltarei esse topico, para não criar outro!

tentei redimensionar mas não funfa, no FF esta beleza, mas no IE para variar ficou estranho

 

segue o codigo CSS para vocês verem

 

abraço

 

#posicao {	width:300px;		left:50%;	top:50%;	position:absolute;	margin-left:-200px;	margin-top:-200px;	}<!--[if IE]>#cols { height:24px; }#cols div { height:24px; float:left; }<![endif]-->#cols { display: table; height:24px;}#cols div { display:table-cell; vertical-align:top;} #barra-titulo {		padding-left:5px;	width:250px;	_width:260px;	background-color:#333399;	padding-top:4px;	font-size:14px;	color:#FFFFFF;	font-weight:bold;}#fechar {	cursor:pointer;	width:20px;	_width:20px;		padding-top:4px;	background-color:#333399;	}#mini {		cursor:pointer;	width:20px;		_width:20px;		background-color:#333399;	padding-top:4px;	}#restau {		cursor:pointer;	width:20px;		background-color:#333399;	padding-top:4px;	}#texto {	padding-top:4px;	padding-left:5px;	width:286px;	_width:0px;	height:80px;	position:relative;	top: 28px;	_top: 0px;	left: -295px;	_left: 295px;	overflow: auto;	margin-top:0px;	margin-left:0px;	background-color:#BCBCDE;	border:2px solid #333399;	font-size:13px;}/*só para teste*/#mostrar {	cursor:pointer;			color:#FFCC99;	width:100px;	text-decoration: underline;	display: inline; }

ah mais uma coisa!!!

 

para que serve este comando

_width: valor:

 

abraço

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