Ir para conteúdo

POWERED BY:

Arquivado

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

AndreFonseca

Algumas s muito básicas com CSS

Por , em Desenvolvimento frontend

Recommended Posts

AndreFonseca    0

AndreFonseca
Postado

Então galera... sou realmente MUITO novo em CSS... em programação tenho algum tempo, mas em CSS sou virgem ainda!

 

Eu tava tentando inventar alguma coisa... tipo uma "coluna" (não sei como chamar) no lado esquerdo, tipo um menu. Só que eu queria fazer cada link dentro de um caixa. Daí, se eu fizer isso a caixa pode ir p/ a direita ou para a esquerda demais. Eu li sobre margin e consegui arrumar um pouco, pra diminuir a distrância entre cada caixa, mas se eu aumento um pouco a distância, as caixas se movem para o lado :(

 

Outra dúvida que eu tenho é como fazer para mudar a cor do link quando eu passo o mouse por cima. Eu usei o a:hoover, mas não muda de cor... teria como fazer com a caixa toda isso ou eu teria que fazer uma nova caixa e agrupar tudo? (tipo um jpeg) :P

 

E outra dúvida... última... o quadrado azul... como faço para levar ele pra cima?

Meu amigo usou right, left, mas eu não consegui usar... só consegui ajeitar as coisas usando margin-left e coisarada.

 

Alguém me ajuda?

 

Valeu galera... nem que seja por mandarem um link.

 

Falou, abraço!!

 

 

Código:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Teste de CSS</title><style type="text/css">body{	background-color: #FFFFFF;}#menu1_fundo{	background-color: #A5FF8A;	border: solid thin #333333;	width: 150px;	height: 500px;}#menu2{	background-color: #333333;	color: #FFFFFF;	font-family: "verdana";	width: 120px;	height: 15px;	font-weight: bold;	font-size: 10px;	border-bottom: thin solid #000000;	border-left: thin solid #000000;	border-right: thin solid #000000;	border-top: thin solid #000000;	margin-left: 30px;	margin: 4px;}#quadrado{	background:	#0099FF;	width: 200px;	height: 200px;	border: solid thin #333333;	margin-left: 300px;	margin-bottom: 600px;	}a.link1{	color: #FFFFFF;	text-decoration: none;}a.link1:hover{	color: #33FF00;	text-decoration: none;}a:visited{	color: #FFFFFF;	text-decoration: none;}#texto1{	color: #FFFFFF;	font-family: "Verdana";	font-size: 10px;	font-weight: bold;}</style>	</head><body><div id="menu1_fundo"><div id="menu2" align="center"><a href="http://www.yahoo.com.br" id="link1">Yahoo!</a></div><div id="menu2" align="center"><a href="http://www.google.com.br" id="link1">Google</a></div></div><div id="quadrado"></div> </body>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Nícolas    4

Nícolas
Postado

Cara ao inves de responder cada uma da suas duvidas vo te passar um link que vai responder todas elas de uma vez, e te ensinar muuuita coisa.

 

Me ajudou pra caramba no inicio, se vai pegando toda a logica de montagem.

 

Logica cada pessoa tem a sua, mas se tem uma base de como fazer.

 

http://www.tableless.com.br/video-tutorial...me-da-visie-css

 

É uma video aula que tem cerca de 1 hora.

60mb, mas vale a pena.

 

Acontece umas coisas inevitaveis como se ouvir uma moto passando no fundo... e tal, mas é excelente.

 

O cara monta uma home toda em tableless.

 

Muito bom...

 

E todas as suas duvidas ja vão ser respondidas com essa video aula, e você vai aprender ainda muito mais.

 

E só um comentario...

 

O comando não é a:hoover... é a:hover http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

Flw

Compartilhar este post

Link para o post
Compartilhar em outros sites

RoXbY    3

RoXbY
Postado

eu até tava respondendo tua dúvida, mas meu pai pediu pra ler o e-mail dele e acabei perdendo a linha de raciocínio...na verdade eu, sem tirar nem por, estava refazendo toda a sua "programação".Cara, estude... vá lá no site do maujor.com e procure por menus,... exitem diversos que te explicam tudo e mais muita coisa que você quer saber.ou no link acima ;dsee ya

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

E só pra constar: pelo seu exemplo, está começando de maneira errada, meu caro AndreFonseca... Veja aqui nesse trecho:

<div id="menu1_fundo"><div id="menu2" align="center"><a href="http://www.yahoo.com.br" id="link1">Yahoo!</a></div><div id="menu2" align="center"><a href="http://www.google.com.br" id="link1">Google</a></div></div>
http://forum.imasters.com.br/public/style_emoticons/default/seta.gif O atributo align está em desuso segundo as normas do W3C (lógico, depende também do DTD utilizado, mas sempre oriento todos a "migrarem" assim que possível para os XHTMLs Stricts...)...

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Você está utilizando um mesmo id mais de uma vez... Isso não pode acontecer... id é único, ou seja, na página só pode haver 1! Se você precisa aplicar uma mesma formatação em 2 ou mais elementos, utilize class para tal...

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Não sei onde você leu sobre margin, mas tem um material que explica, além dessa propriedade, o padding e o border...

Atributos: border - padding - margin

Se você já leu este material, me desculpe pela "duplicação", mas se de repente precisar, tá na mão...

 

Boa sorte!

Compartilhar este post

Link para o post
Compartilhar em outros sites

webflex    0

webflex
Postado

Olá,

 

Só mais uma coisa, no caso do link em si era escusado colocar uma div para cada a.

 

Cumps \o/

Compartilhar este post

Link para o post
Compartilhar em outros sites

AndreFonseca    0

AndreFonseca
Postado

Galera muito obrigado por responderem tao gentilmente meu tópico. Se fossem #!@$!#@! chegaria e falariam que sou burro já.

 

Escusado? Não entendi essa frase ali webphlex.

Paulo, isso quer dizer que eu posso fazer 1 class e usar no lugar dos ids?

 

Valeu galera, brigado mesmo!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Nícolas    4

Nícolas
Postado

Ai André...

 

Relaxa velho... tem essa de burro não, todo mundo ta aqui pra responder duvidas e passar conhecimentos para quem ta aprendendo também, afinal, grande parte de nós aprendeu e deve muito aos fóruns.

 

Tem sempre uns palhaços que acham que sabem das coisas e menos prezam quem não sabe muito sobre determinado assunto, mas não deixe de postar suas duvidas por causa dessas pessoas.

 

Sempre tem alguem que tem a humildade pra reconhecer quem ta interessado em aprender.

 

E no imaster não acontece esse tipo de coisas, pois o forum tem regras assim como outros, e moderadores tomam conta de cada seção pra evitar isso, pois como eu disse.

 

Todos estão aqui tanto para ensinar, quanto pra aprender.

 

Legal do fórum é isso... todos se ajudam sem querer nada em troca.

 

Apenas para ajudar quem precisa =]

 

 

Quando o webphlex diz escusado...

 

Ele quer dizer que era desnecessário utilizar uma div para cada link.

 

Para isso você poderia utilizar as tags..

 

ul e li, que seria o mais correto =)

 

 

 

E sobre o comentário do Paulo, vou dar um exemplo simples.

 

um CPF por exemplo.

 

Digamos que o cartão de plastico seja uma class

E o número do CPF o ID

 

 

Cartão de CPF (Plástico) você pode ter vários iguais.

Agora o número do CPF é um identificação única.

 

Que só pode pertencer aquele individuo, no caso elemento.

 

 

É errado você usar id's duplicados para obter o mesmo efeito para mais de um elemento, o certo é utilizar classes para isso =)

 

 

Os ID's devem ser utilizados para estrutura.

 

Elementos que não vão se repetir.

 

 

<html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Titulo</title><style type="text/css">	#menu {		margin-left: 350px;		margin-top: 200px;	}		#menu ul {		list-style: none;		margin: 0px;		padding: 0px;	}		#menu ul li a{		background-color: #F1F1F1;		border: 1xp solid #CCC;		color: #000;				display: block;		width: 150px;		height: 25px;		line-height: 25px;		margin-bottom: 2px;		padding-left: 10px;	}	#menu ul li a:hover {		background-color: #CCCCCC;	}	</style></head><body>	<div id="limite">		<div id="topo">			<!--	MENU POSICIONADO DENTRO DO TOPO  -->			<div id="menu">				<ul>					<li><a href="#">link</a></li>					<li><a href="#">link</a></li>					<li><a href="#">link</a></li>					<li><a href="#">link</a></li>				</ul>			</div>				</div>				<div id="conteudo></div>				<div id="rodape"></div>		</div></body></html>
Aii por exemplo eu utilizei o ID em elementos do site que fazem parte da estrutura.

 

Agora só não utilizei as class, porque a apartir do ID menu... eu fiz com CSS o caminho de cada item que eu queria tratar.

 

Isso polpa muito código html, e deixa mais limpo.

 

 

Esse é um exemplo meia boca, mas da pra você entender de leve oq ue quero dizer.

 

 

Tem momentos que você verá necessário utilizar class.

 

Como para definir cores de links perdidos no conteudo e etc.

 

 

Existem varios momentos para se utilizar class, você sabendo utilizar os ID's da forma correta, e sabendo traçar o caminho dos itens que você quer tratar (como fiz no menu), você saberá quando deve ou não utilizar classes.

 

=)

 

Obs: ID's tb são utilizados para tratar determinados campos ou itens via javascript, como campos de formulários e etc.

------

 

Editando

Mas uma coisa...

 

Vendo seu código css la em cima.

 

Mais especificamente esse trecho.

border-bottom: thin solid #000000;	border-left: thin solid #000000;	border-right: thin solid #000000;	border-top: thin solid #000000;	margin-left: 30px;	margin: 4px;
Você pode fazer isso em bem menos linhas.

 

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

Assim:

border: thin solid #000000;	margin: 4px 4px 4px 30px;
ou assim:

 

border: thin solid #000000;	margin: 4px;	margin-left: 30px;

Lembrando que você errou a ordem, você jogou o margin-left de 30px e depois sobrescreveu com o margin: 4px.

 

O certo seria você definir 4px para todos os lados, e depois definir os 30px para left em especifico =]

 

 

Da uma lida nesse link aeee, vai te ajduar muito sobre abreviar códigos =)

http://www.maujor.com/tutorial/abreviacss.php

 

Flw cara

Compartilhar este post

Link para o post
Compartilhar em outros sites

webflex    0

webflex
Postado

Olá,Era isso mesmo que o nosso amigo nick171 falou.Cumps \o/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Se fossem #!@$!#@! chegaria e falariam que sou burro já.

Como nosso amigo nick171 já disse, todos estamos aqui para ajudar e aprender... Hoje você pode não saber como se faz tal coisa, mas amanhã ou depois você aprende, assim como um dia eu, o nick171, o webphlex, enfim, todos, não sabíamos e até que chegou um momento em que aprendemos... Já diz a frase "ninguém nasce sabendo"... Pode contar com o apoio daqueles que um dia já aprenderam para aprender também... Ok? http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

Paulo, isso quer dizer que eu posso fazer 1 class e usar no lugar dos ids?

Nosso amigo nick171 também já deu um embasamento legal sobre o que é id e o que é class, mas respondendo sua pergunta, no seu exemplo sim, você criaria uma class que seria responsável por formatar os 2 links... Por exemplo, eu posso criar uma class da seguinte maneira:
a.links {	color: #f00;	text-decoration: none;}
E meu HTML teria:
<div id="menu">	<a href="http://www.yahoo.com.br" class="links">Yahoo!</a>	<a href="http://www.google.com.br" class="links">Google</a></div>
O resultado disso no browser é que os 2 links terão a cor vermelha e não terão a linha embaixo do texto...

 

Compreende?

 

Bom, é isso a e... Boa sorte nos estudos! E precisando de mais ajuda, mano, volte a postar! Abraço!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Nícolas    4

Nícolas
Postado

hehehhe bom o Paulo aeee simplificou o que eu queria dizer... porem eu quis explicar uma maneira um pouquinho mas diferente. =)

 

Mas acho que me empolguei um pouco, aeheahueahueahuea

 

Mas é issu aee...

 

Precisar de help... só postar... tem erro nã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