Ir para conteúdo

Arquivado

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

eng442

Posicionar imagens

Por , em Desenvolvimento frontend

Recommended Posts

eng442    0

eng442
Postado

Olá! Estou começando com HTML e não estou conseguindo posicionar as imagens em meu site.

 

Posso não ter feito o layout da melhor maneira, mas por hora quero apenas aprender a posicionar imagens de maneira que elas acompanhem o tamanho da janela. O problema que vem ocorrendo é o seguinte:

 

http://www.youtube.com/watch?v=6SSGZmtIf20

 

Quando a janela não está maximizada as imagens aparecem no lugar onde deveriam. Com a janela maximizada ou em qualquer outra dimensão a página "desconfigura". Estou usando o seguinte para o posicionamento:

 

HTML:

<img src="img/header.png" id="header">

 

CSS:

#header {
position:absolute;
top: 9px;
left: 203px;
}

 

Como devo fazer para posicioná-las sem ocorrer o problema acima?

Se ficar mais fácil disponibilizei aqui o download dos arquivos:

www.teste442.xpg.com.br/nao_usado/Filmes.7z

 

ps: Usando position:relative fica pior ainda...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado
http://forum.imasters.com.br/index.php?/topic/419368-css-mudancas-de-posicoes-com-novos-conteudos/page__view__findpost__p__1652198

Compartilhar este post

Link para o post
Compartilhar em outros sites

eng442    0

eng442
Postado

Valeu. Usei margin e funcionou perfeitamente com imagens. Mas agora estou tendo exatamente o mesmo problema quanto tento posicionar textos com margin.

 

#txt_principal {
font: italic normal 14px Verdana, sans-serif;
color: #DDD;
text-align:justify;
position:absolute;
margin-top: 25px;
margin-left: 205px;
margin-right: 400px;
}

 

No caso o texto deveria ficar dentro do "quadrado" grande, que pode ser visto no vídeo ou por aqui:

http://www.teste442.xpg.com.br/filmes/index.html

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

Mostre a marcação, como fez, também.

 

Se estiver utilizando elementos de linha - como span, strong, b, etc - dê preferência para padding ao invés de margin.

Compartilhar este post

Link para o post
Compartilhar em outros sites

eng442    0

eng442
Postado

Obrigado pela ajuda, os arquivos estão aqui:

http://www.teste442.xpg.com.br/download/Web.7z

 

Botei o index.html e o styles.css em um pastebin se não quiser baixar:

 

HTML

http://paste.ubuntu.com/550880/

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<!-- O código está meio bagunçado pois ainda não está pronto
adicionei algumas marcações para ficar mais fácil -->


<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br">

<head>
	<title>Filmes - Home</title>
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<META Name="descrição" Conten="Página sobre filmes">
	<META Name="keywords" Content="filmes, movies">
</head>
<body>
	<center>		
	<img src="img/header.png" id="header">		
	<!-- INÍCIO figuras de filmes -->
	<a href="http://www.imdb.com/title/tt0068098/"><img src="img/f1.png" name="f1" id="f1" onMouseOver="document.images['f1'].src='img/f1a.png'"
onMouseOut="document.images['f1'].src='img/f1.png'"/></a>
	<a href="http://www.imdb.com/title/tt0083658/"><img src="img/f2.png" name="f2" id="f2" onMouseOver="document.images['f2'].src='img/f2a.png'"
onMouseOut="document.images['f2'].src='img/f2.png'"/></a>
	<a href="http://www.imdb.com/title/tt0080801/"><img src="img/f3.png" name="f3" id="f3" onMouseOver="document.images['f3'].src='img/f3a.png'"
onMouseOut="document.images['f3'].src='img/f3.png'"/></a>
	<a href="http://www.imdb.com/title/tt0033467/"><img src="img/f4.png" name="f4" id="f4" onMouseOver="document.images['f4'].src='img/f4a.png'"
onMouseOut="document.images['f4'].src='img/f4.png'"/></a>
	<!--FIM figuras de filmes -->
	<!-- INÍCIO botões menu -->
	<a href="index.html"><img src="img/b1.png" name="b1" id="b1" onMouseOver="document.images['b1'].src='img/b1a.png'"
onMouseOut="document.images['b1'].src='img/b1.png'"/></a>
	<a href="http://www.teste442.xpg.com.br/"><img src="img/b2.png" name="b2" id="b2" onMouseOver="document.images['b2'].src='img/b2a.png'"
onMouseOut="document.images['b2'].src='img/b2.png'"/></a>
	<a href="contrucao.html"><img src="img/b3.png" name="b3" id="b3" onMouseOver="document.images['b3'].src='img/b3a.png'"
onMouseOut="document.images['b3'].src='img/b3.png'"/></a>
	<a href="http://www.imdb.com/mymovies/list?l=41298095"><img src="img/b4.png" name="b4" id="b4" onMouseOver="document.images['b4'].src='img/b4a.png'"
onMouseOut="document.images['b4'].src='img/b4.png'"/></a>
	<a href="#footer"><img src="img/b5.png" name="b5" id="b5" onMouseOver="document.images['b5'].src='img/b5a.png'"
onMouseOut="document.images['b5'].src='img/b5.png'"/></a>
	<!-- FIM BOTÕES MENU -->
	<!-- Boxes -->
	<img src="img/principal.png" id="principal">
	<a href="#header"><img src="img/b_p.png" id="b_p"></a>		
	<img src="img/m_cima.png" id="m_cima">
	<img src="img/m_baixo.png" id="m_baixo">	
	<img src="img/footer.png" id="footer">
	<!-- /Boxes -->
	</center>
	<!-- AQUI A PARTE DO TEXTO, segui a sugestão de alguns usuários de outro fórum e tirei do <center> -->
	<p id="txt_principal">Lorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?

[33] At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. et harum quidem rerum facilis est et expedita distinctio. nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
</body>
</html>

 

 

CSS

http://paste.ubuntu.com/550881/

 

/* Menus & Buttons */

body {
background: url("../img/bg.png") repeat;
}
#f1 {
position:absolute;
margin-top: 34px;
margin-left: -604px;
}
#f2 {
position:absolute;
margin-top: 34px;
margin-left: -454px;
}
#f3 {
position:absolute;
margin-top: 34px;
margin-left: -304px;
}
#f4 {
position:absolute;
margin-top: 34px;
margin-left: -153px;
}
#b1 {
position:absolute;
margin-top: 147px;
margin-left: -595px;
}
#b2 {
position:absolute;
margin-top: 147px;
margin-left: -479px;
}
#b3 {
position:absolute;
margin-top: 147px;
margin-left: -360px;
}
#b4 {
position:absolute;
margin-top: 147px;
margin-left: -233px;
}
#b5 {
position:absolute;
margin-top: 147px;
margin-left: -113px;
}

#b_p {
position:absolute;
margin-top: 745px;
margin-left: -250px;
}

#principal {
position:absolute;
margin-top: 195px;
margin-left: -605px;
}

/* Text */

#txt_principal{
font: italic normal 14px Verdana, sans-serif;
color: #DDD;
text-align:justify;
position:absolute;
margin-top: 25px;
margin-left: 205px;
margin-right: 400px;
}

/* Menus & Buttons */

#m_cima {
position:absolute;
margin-top: 195px;
margin-left: -175px;
}
#m_baixo {
position:absolute;
margin-top: 435px;
margin-left: -175px;
}
#footer {
position:absolute;
margin-top: 785px;
margin-left: -595px;
}

 

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