Jump to content


Photo

Posicionamento


  • Faça o login para participar
8 replies to this topic

#1 mkboy

mkboy

    12 Horas

  • Usuários
  • 133 posts
  • Sexo:Não informado

Posted 24/01/2008, 10:20

Olá amigos,

Este é o primeiro layout que estou arriscando desenvolver com CSS.

Posted Image

Montei a div do conteúdo, centrada com 778px.
Dentro dela, montei a div do topo, onde coloquei outra div, para o logotipo, onde eu queria, a 20px do limite da esquerda, e 20px do limite do topo.
Ainda dentro da div do topo, eu criei outra div, para o telefone, que não apareceu como eu queria, a 20px também do topo, e a 20 do limite da direita.

Podem me ajudar a entender porque não ficou no lugar que deveria.
(Estou usando com base de pesquisa o site do majour)

Meu HTML

<XHTML; 1.0 Strict !DOCTYPE html PUBLIC "-//W3C//DTD XHTML; 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
	<head>
		<title>mkhost | HOSPEDAGEM PROFISSIONAL DE SITES</title>
		<link href="includes/estilos.css" media="all" rel="stylesheet" type="text/css">
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	</head>

	<body>
	<div id="conteudo">
		<div id="topo">
			<div class="logo"><img src="imagens/logo.gif" /></div>
			<div class="telefone">11 6198-3927</div>
		</div>
	</div>
	</body>
</html>

O Css referente ao topo:

#conteudo 
{margin: 0 auto; 
border-left: 2px solid #ffffff; 
border-right: 2px solid #ffffff; 
width: 778px; height:100%; 
background-color: #8DB0BF;  }

/* Definindo o topo do site */

	#topo 
	{margin: 0 auto; 
	border-left: 1px solid #ffffff; 
	border-right: 1px solid #ffffff; 
	width: 765; height:81px; 
	text-align:left; 
	background:#fff url("../imagens/backTopo.gif"); /* "remédio" para o hack do IE */}
	.logo 
	{position: relative; 
	top: 20px; 
	left: 20px;}
	.telefone { 
	position: relative; 
	top: 24px; 
	left: 651px;}

A página está em http://www.mkhost.com.br/index.asp

Tentei validar no http://validator.w3.org/, só que da erro, não entendi onde esta o erro.
Estou escrendo em Xhtml strict, para aprender a escrever da forma correta.

#2 Patric Costa

Patric Costa

    Turista

  • Usuários
  • 27 posts
  • Sexo:Não informado

Posted 24/01/2008, 10:57

Joga o código <div class="telefone">11 6198-3927</div> uma linha acima, vê se funciona, caso contrário retorne aqui que tentamos novamente.

abraços.

[edição]
Desculpa pela intromissão, mas o logo.gif é a imagem principal inteira? Caso seja, seria uma boa idéia edita-lá e inserir o telefone na mesma, caso não fosse alterado, e aumentar um pouco o tamanho do tel, lógico que isso é só uma idéia, mas ficaria legal.

abraços.

"As duas coisas infinitas: o Universo e a tolice dos homens."


#3 Andreia Regina

Andreia Regina

    Veterano

  • Conselheiros
  • 1347 posts
  • Sexo:Feminino
  • Localidade:PR
  • Interesses:PHP; MySQL; Javascript; CSS; tudo ligado ao desenvolvimento web.

Posted 24/01/2008, 10:58

Utilize margin em vez de top, left,...

Uma dica não precisa criar a div para a logo e outra para o telefone.
Você pode criar definições para a imagem e definições diferentes para o texto que você pode colocar dentro de um parágrafo com as margens definidas como você precisa.

Para você estudar:
Margin
Posicionamento Absoluto e Relativo
Como escrever seu CSS

Parece uma coisa de outro mundo no começo, mas logo, logo você não conseguirá desenvolver de outra forma.

Boa sorte :)

Fórum WMO - Conselheira - Na equipe desde 31/01/2006.
Links importantes: Regras de conduta - Busca do fórum


#4 mkboy

mkboy

    12 Horas

  • Usuários
  • 133 posts
  • Sexo:Não informado

Posted 24/01/2008, 11:12

Obrigado pelas dicas... vou ler os artigos citados!
To gostando muito... só de ver meu HTML limpinho já bom demais!

Patric, o logo é um pequeno gif... o restante é um background de uma fatiazinha exibido horizontalmente!
Veja: http://www.mkhost.co...magens/logo.gif

Valeu turma... vou prosseguir!

Absw

Edição feita por: mkboy, 24/01/2008, 11:13.


#5 mkboy

mkboy

    12 Horas

  • Usuários
  • 133 posts
  • Sexo:Não informado

Posted 26/01/2008, 22:20

Você pode criar definições para a imagem e definições diferentes para o texto que você pode colocar dentro de um parágrafo com as margens definidas como você precisa.


Tentei... e nada...
Rola um exemplinho? :assobio:

Veja o que fiz:

<div id="conteudo">
			<div id="topo"> 
				<img src="imagens/logo.gif" id="logo" alt="Voltar para página inicial" /> 
				<span id="telefone">11 6198-3927 </span> 
			</div>
		</div>


#logo {position: relative; margin-top: 15px; margin-left: 20px;}
	#telefone { position: relative; margin-toptop: 24px;  margin-right: 15px;  }

O logo ta onde quero!

:wacko:

Edição feita por: mkboy, 26/01/2008, 22:21.


#6 Alex Hiroshi

Alex Hiroshi

    Super Veterano

  • Ex-Admins
  • 4923 posts
  • Sexo:Masculino
  • Localidade:São Paulo - SP

Posted 27/01/2008, 04:50

Primeiro vamos ao seu xhtml.
<XHTML; 1.0 Strict !DOCTYPE html PUBLIC "-//W3C//DTD XHTML; 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Troque isso aí, por isso:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
E as tags link e meta, como não existe uma tag de fechamento, feche com uma barra no final:
<link href="..." />
<meta .... />
Outra coisa, ao invés de colocar uma imagem no logo, seria melhor usar um título com o link em texto e fazer um image replacement para mostrar o logo.
/* Logo Css */
#topo h1 {background:url(http://www.mkhost.com.br/imagens/logo.gif) no-repeat center center; overflow:hidden; text-indent:-9000px; width:376px; height:53px; padding:20px 0 0 20px;}
#topo h1 a {display:block;} 

<!-- Logo html -->
        <div id="topo">
            <h1><a href="/">mkhost</a></h1>
            <div class="telefone">11 6198-3927</div>
        </div>
Fica mais bonito assim.

Quando eu comecei a usar css para posicionar elementos, eu fui logo nos position relative e absolute. Porém, assim como muitos, inclusive você, eu tive muitos problemas, nunca fica certo. Aí eu fui reparando nos css de outros sites e vi que muitos não usam position, usam apenas float, margin e padding.
#topo .telefone {float:right; padding:20px 20px 0 0;}
E coloque um float:left no css no h1 que eu postei.
Fórum WMO - Equipe de Desenvolvimento / Banco de Dados - Ex-Administrador

#7 mkboy

mkboy

    12 Horas

  • Usuários
  • 133 posts
  • Sexo:Não informado

Posted 27/01/2008, 10:41

Valeu pelas dicas, corrigido!

No topo, preciso usar o logo em imagem, para seguir o layout que foi desenhado... então eu fiz assim:

1. Criei uma div com o topo, um background com um gif de 2px de largura. Assim o topo estaria feito, e sobre o topo colocaria o logo e o telefone.
Eu coloquei o CSS com float... e o logo colou em cima de novo... :rolleyes: veja:

CSS
* { margin:0px; padding:0px; border:0px; list-style-type:none; }
html { }
body { font:11px Verdana, Arial, Helvetica, sans-serif; color:#ff0000;  background:#8DB0BF url("../imagens/back.gif") top repeat; cursor:default;  height:100%; text-align:center; /* hack para o IE centrar o layout */	}

#conteudo {margin: 0 auto; border-left: 2px solid #ffffff; border-right: 2px solid #ffffff; width: 778px; height:100%; background-color: #8DB0BF;  }

/* Definindo o topo do site */

	#topo {margin: 0 auto; border-left: 1px solid #ffffff; border-right: 1px solid #ffffff; width: 765; height:81px; text-align:left; background:#fff url("../imagens/backTopo.gif"); /* "remédio" para o hack do IE */}
	#logo .telefone {float:right; padding:20px 20px 0 0;}

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
	<head>
		<title>mkhost | HOSPEDAGEM PROFISSIONAL DE SITES</title>
		<link href="includes/estilos.css" media="all" rel="stylesheet" type="text/css" />
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	</head>

	<body>
		<div id="conteudo">
			
  <div id="topo"> <img src="imagens/logo.gif" id="logo" alt="Voltar para página inicial" /> 
	<span id="telefone">11 6198-3927 </span> </div>
		</div>
	</body>
</html>

Estou bem confuso ainda.. hehe.. anos de tabelas... hehe :notme:

#8 Alex Hiroshi

Alex Hiroshi

    Super Veterano

  • Ex-Admins
  • 4923 posts
  • Sexo:Masculino
  • Localidade:São Paulo - SP

Posted 27/01/2008, 12:15

Você testou o que eu postei?
Fórum WMO - Equipe de Desenvolvimento / Banco de Dados - Ex-Administrador

#9 mkboy

mkboy

    12 Horas

  • Usuários
  • 133 posts
  • Sexo:Não informado

Posted 27/01/2008, 14:37

Agora caiu a ficha Alex... hehehe
Consegui!

Valeu!




1 user(s) are reading this topic

0 membro(s), 1 visitante(s) e 0 membros anônimo(s)

IPB Skin By Virteq