Ir para conteúdo

POWERED BY:

Arquivado

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

Gustavo Pereira SMLB

Alinhar a DIV e a imagem de fundo.

Por , em Desenvolvimento frontend

Recommended Posts

Gustavo Pereira SMLB    0

Gustavo Pereira SMLB
Postado

Olá Pessoal! Bem, primeiramente, quero agradece-lo a todos que estão me ajudando, sempre que estou com dúvida, eu percorro ao imasters, e como como sempre sou bem-vindo. Obrigado, se não fosse vocês eu não estaria criando meu site, pois sou webdesign iniciante, e criava sites no photoshop e fireworks . CSS, estou iniciando ainda. Enfim... Veja o site que estou criando:

 

 

Imagem Postada

 

 

Vejamos, a imagem do anjo, quero centraliza-lo no meio da tela.

 

Espero respostas.. e um grande abraços a todos!

Compartilhar este post

Link para o post
Compartilhar em outros sites

João Prado    64

João Prado
Postado

poste seu código para avaliarmos melhor

 

 

de inicio posso te falar que para alinhar a imagem ao centro se utiliza margin:0 auto;

coloque tambem um css reset no inicio de seu código css

 

;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Gustavo Pereira SMLB    0

Gustavo Pereira SMLB
Postado 

<!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">
<head>
<style type="text/css">

body {

background: url(lunafundo.jpg);
background-color: #000000; 
}

</style>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Luna - Produções e Eventos</title>
<link href="luna.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style1 {
	color: #FFFFFF;
	font-weight: bold;
	font-size: xx-large;
}
-->
</style>
</head>

<body>
<div id="topo">Cadastra-se</div>

<style type="text/css">
                            /*Menu Links*/

/*NOTE: anything not specified for the #(menu id's) a selector and its pseudo classes
may be inherited in some browsers from other 'a' element styles (if any) on the page*/

#menu1 a {color:black;background-color:white;text-decoration:none;text-indent:1ex;}
#menu1 a:active {color:black;text-decoration:none;}
#menu1 a:hover {color:black;background-color:#FFFF99}
#menu1 a:visited {color:black;text-decoration:none;}

#menu2 a {color:navy;background-color:white;text-decoration:none;text-indent:1ex;}
#menu2 a:active	{color:blue;text-decoration:none;}
#menu2 a:visited {color:blue;text-decoration:none;}
#menu2 a:hover {color:navy;background-color:#f0fea8}

#menu3 a { /*Menu3 Links*/
color:black;
background-color:white;
text-decoration:none;
text-indent:1ex;
}
#menu3 a:hover {
color:black;background-color:#FFFF99;
}
#menu3 a:active	{color:black;text-decoration:none;}
#menu3 a:visited	{color:black;text-decoration:none;}


                           /*End Menu Links*/
</style>
<script src="mmenu.js" type="text/javascript"></script>
<script src="menuItems.js" type="text/javascript">

/***********************************************
* Omni Slide Menu script - © John Davenport Scheuer: http://home.comcast.net/~jscheuer1/
* very freely adapted from Dynamic-FX Slide-In Menu (v 6.5) script- by maXimus
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full original source code
***********************************************/

</script>



<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>


</body>

</html>


* {
 
 padding: 0;
 margin: 0;
 
}

#topo {
   
	height:30px;
	background-image: url(topo.jpg);
	background-repeat: repeat-x;
    border-top:2px  #4A4A4A;
	border-bottom:2px dotted #4A4A4A;
	color:#fff;
	font-weight:bold;
	
	
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

João Prado    64

João Prado
Postado

seria esta a imagem do anjo? lunafundo.jpg

 

caso sim utilize margin no body:

body {
margin:0 auto;
background: url(lunafundo.jpg);
background-color: #000000; 
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

João Prado    64

João Prado
Postado

Amigo seria interessante se você postasse um link ai eu poderia avaliar melhor

 

 

tentei fazer o seguinte:

Crie uma div pai que irá englobar todo o conteúdo de seu site. Coloque a imagem que esta colocando no body como background desta div e aplique o margin:0 auto; nesta div

insira tbm text-align:center; nesta div

 

 

faça os testes e poste os resultados ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

João Prado    64

João Prado
Postado

ao invés de aplicar a imagem como bd no body faça assim:

 

crie uma div pai para englobar todo o seu site

nesta div coloque a imagem como bd

 

ai no seu css coloque +- assim:

#pai{
margin:0 auto;
text-align:center;
background: url(lunafundo.jpg); /*imagem que antes estava no body*/
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Não.

Não use o seletor global dessa forma não. Ai você estaria aplicando esse background à todos os elementos do HTML.. oque é um erro, até de lógica. http://forum.imasters.com.br/public/style_emoticons/default/natal_ohmy.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

João Prado    64

João Prado
Postado 

<style>
#pai{
margin:0 auto;
text-align:center;
background: url(lunafundo.jpg);
}
</style>
<body>
<div id="pai">Aqui ficará a imagem no fundo</div>
</body>

Man, tente inserir este código

Compartilhar este post

Link para o post
Compartilhar em outros sites

João Prado    64

João Prado
Postado

CSS:

#pai{
margin:0 auto;
text-align:center;
background: url(lunafundo.jpg);
}

HTML:

<div id="pai"></div>

defina um height e width para a div porque ela sem conteudo fica invisivel

exemplo:

#pai{
margin:0 auto;
text-align:center;
background: url(lunafundo.jpg);
width:100%;
height:100%;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

João Prado    64

João Prado
Postado

olha cara, um link ajudaria muito para eu ver onde está seu erro

 

 

aconselho que estude um pouco mais de css para ter um melhor desempenho em seus trabalhos

 

de uma olhada nestas video aulas, podem te ajudar bastante

http://forum.imasters.com.br/index.php?/topic/341755-serie-de-video-tutoriais-sobre-webstandards/

 

visite tbm o site do maujor

http://www.maujor.com/

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