Ir para conteúdo

POWERED BY:

Arquivado

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

Vituu

Float

Por , em Desenvolvimento frontend

Recommended Posts

Vituu    0

Vituu
Postado

Ola, sou novo aqui e estou escrevendo esse primeiro topico pois preciso de ajuda, eh o seguinte:Estou aprendendo a usar css e estou criando um site, pois bem, usando o IE6, tudo aparece normal, do jeito q deveria, mas se o site for visualizado com o IE7 ou o Firefox 2 fica tudo desordenado, peço q vcs me ajudem, por favor... o site eh esse, www.robertopitta.kit.net e o css esta aqui,/* CSS Document */body { font-family: Verdana; font-size: 12px; color: #000000; background-color: #E1BC13;}#quadro1{ height: 350px; width: 820px; background-color: #FFFFFF; align: center; margin-top: -2px;}#conteudo{ width: 580px; margin-left: 200px; margin-top: -319px;}#foto1{ margin-top: 10px; margin-bottom: -5px; }#foto2{ margin-top: 20px; margin-left: 10px; margin-bottom: 10px;}#borda { margin-top: 0px;}#links{ margin-left: 150px; margin-top: 10px; margin-bottom: -15px; align: center; }a:link { font-family: Verdana; font-size: 15px; color: #000000; text-decoration: none; font-weight: bold;}a:visited {font-family: Verdana; font-size: 15px; color: #000000; text-decoration: none; font-weight: bold; } a:hover { font-size: 15px; font-weight: bold; color: #000000; background-color: #E1BC13; }

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

Vituu, seja muito bem vindo ao fórum iMasters!!!

Por favor, leia esse link: Como criar um tópico para o seu problema

 

Em relação a sua dúvida, procure por float aqui no fórum, vai encontrar muitos posts explicando.

Outra dica, vá até o site do maujor e pesquise sobre layout.

 

[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rasp    3

Rasp
Postado

Fala Vituu,

Seguinte... dei uma olhada no seu css e no site tambem... e o problema em relação a posição do texto não estava somente no css mais tambem no codigo fonte do seu projeto.

Como eu observei você fez o que eu chamo de DIVmania, e nem todas as divs que estavam lá eram necessarias e algumas tambem não estavam fechadas...

Mas como você disse que esta aprendendo CSS, te dou parabens, pois você já esta muito bem, agora é questão de pratica que você pega os macetes...

Mais vamos ao que interessa:

 

 

Como falei alterei os codigos fontes de seu site e o css, segue abaixo os codigos:

 

 

index.html

<!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>Roberto Pitta</title><link href="css.css" rel="stylesheet" type="text/css"></head><body>	<div id="quadro1">	  <img src="beto_site.jpg" alt="" width="800" height="274" id="foto1" border="0" />	<div id="links">	  <a href="www.google.com.br" target="_blank">Principal</a> | <a href="www.google.com.br" target="_parent">Carreira</a> | <a href="www.google.com.br" target="_blank">Agenda</a> | <a href="www.google.com.br">Fotos</a> | <a href="www.google.com.br" target="_parent">Patrocinadores</a> | <a href="www.google.com.br" target="_parent">Contato</a>	</div>	  <img src="beto1.jpg" alt="" width="200" height="305" id="foto2" border="0" />	<div id="conteudo">	  <span>Dando uma olhada adiante podemos constatar que existem seletores bem mais poderosos previstos nas CSS3 esperando para serem implementados e usados. Muitos dos seletores CSS3 já foram implementados e são suportados em navegadores modernos, mas em geral o suporte ainda é muito precário para que os desenvolvedores possam usar tais seletores. Contudo, há casos onde eles podem ser empregados para adicionar futuras melhorias em funcionalidades e assim sendo eu acredito que poderá ser útil dar uma olhada no funcionamento dos seletores CSS3. Esta página foi desenvolvida para o “Zen Garden do Maujorâ€.	  Uma proposta desafio neste site, visando a estimular suas pesquisas, estudos, habilidades e interesse pelas CSS.	  Você faz o download do código HTML e da CSS do tema desta página.	  Construa um outro layout para a página, modificando a vontade o arquivo CSS. Mas, nada, nada mesmo do código HTML deverá ser modificado. Minha motivação maior ao projetar o site foi a de compartilhar com meus visitantes o resultado dos meus estudos e pesquisas sobre o assunto, proveniente quer de material extraido da própria Internet, quer de livros e literatura pertinentes, a maioria em língua inglesa.	  Sou auto-ditada no assunto e continuo em fase de pesquisas e estudos. Assim sendo, tenho também a pretensão de através do site, abrir um canal de comunicação para troca de experiências e informações sobre o assunto, visto que a literatura disponível em língua portuguesa é bastante exígua e restrita. As técnicas de construção de páginas Web com a utilização das CSS - Cascading Style Sheet. obrigatoriamente terão que ser dominadas por tantos quanto queriam projetar a "Web do Futuro".	  Folha de estilo em cascata é um mecanismo simples para adicionar estilos (p.ex.,   fontes, cores, espaçamentos) aos documentos <abbr title="World Wide Web" xml:lang="en">Web</abbr>.</span>	</div>	  <img src="borda.jpg" alt="" width="820" height="10" id="borda" border="0" />	</div></body></html>

css.css

/* css document */body {	margin: 0;	padding: 0;	position: absolute;	margin-left: -420px;	left: 50%;	font: 12px Verdana;	color: #000000;	background-color: #E1BC13;}#quadro1 {	width: 820px;	height: auto;	background-color: #ffffff;}#conteudo {	width: 580px;	margin-top: -319px;	margin-right: 10px;	_display: inline;	float: right;}#foto1 {	padding-left: 10px;}#foto2 {	margin: 20px 10px 10px;}#links {	padding: 10px;	text-align: center;	border-bottom: 3px solid #E1BC13;}a:link {	color: #000000;	font-size: 14px;	font-weight: bold;	text-decoration: none;}a:visited {	color: #000000;	font-size: 14px;	font-weight: bold;	text-decoration: none;}a:hover {	color: #000000;	font-size: 14px;	font-weight: bold;	background-color: #E1BC13;}

 

 

Como você pode observar, eu alterei o nome /*css documente*/ para minusculo. É recomendado que não sejam utilizadas letras maiusculas nos comentarios do css.

E no codigo fonte do site, eu retirei a tag 'center' e inclui no css, retirei tambem a imagem 'barra' e coloquei como border-bottom da div 'links', e fiz algumas outras alterações como retirada das divs e algumas tags pois eram desnecessarias, como falei la em cima.

 

É claro que existem maiores recursos de como otimizar o css deste site mais com o tempo você pega os macetes e melhora mais ainda.

 

Vlw cara

[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

Vituu    0

Vituu
Postado

Ainda Naum Verifiquei Como Ficou, Pois Estou Tendo Alguns Problemas Em Meu PC, Mas Desde Jah Agradeço Pela Atenção e Ajuda!! Obrigado!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Vituu    0

Vituu
Postado

Ola!Soh hj pude verificar as alterções feitas, a imagem borda existe pq a borda tem os cantos arredondados.e uma outra coisa eh... entre a imagem de topo(a maior) e o fundo branco ha um espaço de 10 pixels no topo, mas com o novo codigo que você colocou, fica sem esse espaçamento... como consigo colocar esse espaçamento?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado
Vituu, para colocar esse espaço no topo, altere essa linha aki no CSS:
body {	margin: 10px 0 0; /* com isso, será atribuído um valor de 10px à margem do topo, 0 (zero) à direita e esquerda e 0 (zero) à margem do bottom ("pé") */	padding: 0;	position: absolute;	margin-left: -420px;	left: 50%;	font: 12px Verdana;	color: #000000;	background-color: #E1BC13;}
Ok? Qq coisa, tamu a e...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rasp    3

Rasp
Postado

Vituu,

Eu não retirei a imagem "BORDA" do seu codigo fonte e sim a imagem "BARRA" aquela barrinha amarela que você tinha feito, porque da pra fazer a mesma com css, logo seu layout fica mais leve, e isso é uma coisa que conta bastante né...

caso você queira ver aonde esta a parte do css que amarra a borda é essa aqui:

 

#links {	padding: 10px;	text-align: center;	border-bottom: 3px solid #E1BC13;}

Quanto a alteração da margin do topo do site, basta fazer a que o Paulo de Tarso falou, por falar nisso valeu pela ajuda Paulo.

Qualquer coisa é so postar.

Abraços.

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