Posicionamento e Fatiamento

[Kay_ 0]

Fiz no ps o topo do site que estou fazendo(primeiro site), podem opnar também quanto ao design, se achar que pode mudar algo, aí ele:

 

 

 

Para fazer esse topo eu recortei os 2 dragoes, recortei 1 botao, para usar em todos, e recortei a parte escrita. Porém tou com problema de alinhar os botoes no layout igual ao da foto, segue o link do site: (no link que segue, vai ter apenas 1 botao, quero deixa ele na mesma posição que o primeiro botao do lado do dragao esquerdo da foto)

 

Aí o site

 

Dá um help aí ;)

E tipo para ficar mais rapido o site, é melhor dividir como eu dividi, ? ou eu ja recorto todo o topo, e coloco lá?

 

OBS: não quero o jeito mais facil, e sim o jeito com melhor usabilidade ;) vlwss

[Thiago Retondar 18]

Não entendi o objetivo do tópico. :blink:

 

Não precisa criar uma div para cada dragão.

 

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

 

Fiz no ps o topo do site que estou fazendo(primeiro site), podem opnar também quanto ao design, se achar que pode mudar algo, aí ele:

 

 

 

Para fazer esse topo eu recortei os 2 dragoes, recortei 1 botao, para usar em todos, e recortei a parte escrita. Porém tou com problema de alinhas os botoes no layout igual ao da foto, segue o link do site:

 

Aí o site

 

Dá um help aí ;)

E tipo para ficar mais rapido o site, é melhor dividir como eu dividi, ? ou eu ja recorto todo o topo, e coloco lá?

 

OBS: não quero o jeito mais facil, e sim o jeito com melhor usabilidade ;) vlwss

[Kay_ 0]

É por que eu pensei que os atributos float e margin só prestavam em div hehe aí eu utilizei div para colocar as imagens.. Tipo cara tu viu o layout? aí tu viu la o botao home, porém eu nao consigo alinhar ele como na foto do topo que eu mostrei, queria uma ajuda nisso

[Thiago Retondar 18]

Não estou conseguindo ver o layout pela imagem que tu botou, mas pelo site da.

 

Se fizer o HTML bem feito, não vai precisar pensar tanto com o CSS.

 

Estude um pouco ambos.

 

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

[Kay_ 0]

Opa, vim aqui para avisar que consegui o que eu queria, que era colocar o botao perto do dragao, invadindo até um pouco a imagem do dragao. Fiz isso usando margin negativo. ex: margin: 30px -30px(aí o botao ficou no lugar que eu queria). Mais agora veiu outra duvida, que é quanto ao uso de divs e img.

 

1 duvida: No caso ali eu usei divs para as imgs, o correto seria usar a tag img ou continuo usando div mesmo??

Com a tag img, posso usar as propriedades de float e margin no css?

 

2 duvida: O topo do layout apresentado, eu fatiei da seguinte forma, recortando a figura dos 2 dragoes, do texto e de 1 botao. A melhor maneira de fatiar aquele topo foi do jeito que eu fiz? ou era melhor recortar logo todo o topo, para se tornar somente 1 imagem?? (obs: não quero o jeito mais facil, mas sim a forma que a navegação fique mais rapida).

 

 

Vlwss ai

[Henrique Barcelos 290]

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif http://forum.imasters.com.br/index.php?showtopic=341755

 

Bom, pra começar, vamos lá...

 

Imagem é um elemento de nível de bloco, assim como div, ou seja, todos (ou quase) todas as propriedades que funcionam em divs funcionam em imagens...

 

A posição dos dragões você pode definir facilmente com o position:absolute... um com left:0 e o outro com right: 0

[Kay_ 0]

Opa Rick, eu esqueci de mencionar que esse meu layout é centralizado, dessa forma que você me falou não iria funcionar.

 

Todas as propriedades que pode usar em div pelo css, eu posso usar na tag img tbm?? Então no meu codigo seria adequado usar a tag img para os dragoes, botao e a img do texto né?? Ao inves das divs? vlwss ;)

[Henrique Barcelos 290]

Claro que funciona...

 

É só você definir o position da sua div principal, que engloba todas as outras, como relative...

 

Nesse caso específico, acho que é mais oportuno usar div mesmo e colocar as imagens como fundo...

 

Basicamente: use a tag img para elementos que fazem parte da estrutura... Se for só decorativo, use outro elemento e a imagem como fundo...

[Kay_ 0]

rick poderia esclarecer melhor? o por que do uso da tag div aó inves da tag img. Não compreendi direito por que seria mais oportuno usar a tag div ao inves da img. Fazendo isso, usando as divs, eu estaria indo contra os padroes web, que é usar cada tag para sua função, no caso a tag img para colocar imagens.

 

Aguardo vlwss ;)

 

 

obs: Vejo muitos sites utilizando muitas divs como background de image, até sites grande. Isso me confundiu um pouco quanto aos padroes web.

 

Outra coisa, só para confirmar, ow Rick, pelo site maujor, a tag img é um elemento inline

 

Link para elementos inline

 

Vlwss ;)

[Thiago Retondar 18]

Eu não optaria pela escolha de colocar em div, pois assim estaria deixando ela vazia, aplicando somento CSS. Pode utilizar a img sem problemas.

 

E sim, a tag img é inline. Faça o teste colocando várias imagens, verá que vão ficar uma ao lado da outra.

 

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

[Kay_ 0]

Tipo eu troquei aquelas divs lá por imgs agora ; Porém o margin: 0 auto; Não está funcionando com a tag img. ele não está ficando centralizado. Por que?

[Thiago Retondar 18]

Definiu o width?

 

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

[Kay_ 0]

Não, eu não havia definido o width nem height, porém acabei de testar definindo e sem definir, das duas formas a img continua não cetralizando.

[Thiago Retondar 18]

Para centralizar com margin: 0 auto tem que definir o width.

 

Poste o HTML e CSS.

 

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

[Kay_ 0]

Tá aí o código, lembrando que os elementos que eu quero centralizar é o botaotopo e titulo_topo.

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
		<style type="text/css">
body {
	background-color: #efe3c6;
	margin: 0px;
}

#geral {
	width: 960px;
	height: 600px;
	margin: 0 auto;
	border: black solid thin;
}

#topo {
	height: 218px;
	border: black solid thin;
}

#dragao_topoesq {
	width: 271px;
	height: 218px;
	float: left;
}

#dragao_topodir {
	width: 271px;
	height: 218px;
	float: right;
}

#titulo_topo {
	border: black solid thin;
	width: 292px;
	height: 74px;
	margin: 0 auto;
}

#botaotopo {
	border: black solid thin;
	width: 132px;
	height: 79px;
	margin: 0 auto;
}
		</style>
	</head>
	<body>
		<div id="geral">
			<div id="topo">
				<img src="imagens/dragao.jpg" id="dragao_topoesq" >
				<img src="imagens/dragao.jpg" id="dragao_topodir" >
				<img src="imagens/titulo_topo.gif" id="titulo_topo" >
				<img src="imagens/botaotopo.jpg" id="botaotopo" >
			</div>
		</div>
	</body>
</html>

[Thiago Retondar 18]

Poderia disponibilizar as imagens ou um link? ;)

 

Feche as tags img corretamente e insira um alt.

 

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

[Henrique Barcelos 290]

Ah sim, falha minha... IMG é inline...

 

você resolve isso facilmente colocando

img { display:block }

[Kay_ 0]

Thiago, nem era problema de fechamento de tag, testei aqui não prestou.

Rick, agora com o display:block funcionou, eu até tinha conseguido antes, porém foi na sorte hehehe. Tem alguma explicação para a tag img necessitar de um display: block para sua centralização prestar?

 

Vlws aí galera

[Thiago Retondar 18]

Nem tinha percebido que estava sem display: block. :blink: :blink: :blink: Sorry, baby. ;)

 

Só centralizou devido margin só se aplicar em elementos de bloco.

 

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

[Henrique Barcelos 290]

Eu nem me lembrava disso, pq se você atribui uma altura e uma largura para a imagem ela "obedece"... e isso só funciona com elementos de nível de bloco...