Publicado em 15 de dez.

Alinhar a DIV e a imagem de fundo.

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:

/applications/core/interface/imageproxy/imageproxy.php?img=http://img268.imageshack.us/img268/8947/luna1kb.jpg&key=c8b5dc5f69f04934074b64cad7f1929f3cd5f489b11cd0beaa852b1c8044b1b0" alt="Imagem Postada" />

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

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

Discussão (26)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

João Prado· 15 de dez.

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

;)

Gustavo Pereira SMLB· 15 de dez.

Ao utilizar a margin 0, a imagem sumiu.

João Prado· 15 de dez.

poste seu código

não utilize o margin na imagem e sim na div onde ela está

Gustavo Pereira SMLB· 15 de dez.

<!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">](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;

}

João Prado· 15 de dez.

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;
}

Gustavo Pereira SMLB· 15 de dez.

Desculpe a minha ignorancia, mas não adiantou nada.

João Prado· 15 de dez.

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 ;)

Gustavo Pereira SMLB· 15 de dez.

Eu não consigui compreender.

João Prado· 15 de dez.

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/ }

Gustavo Pereira SMLB· 15 de dez.

No caso, para globar tudo seria assim:

* {

margin:0 auto;

text-align:center;

background: url(lunafundo.jpg); /imagem que antes estava no body/

}

William Bruno· 15 de dez.

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

Gustavo Pereira SMLB· 15 de dez.

Então, como eu faço ?

João Prado· 15 de dez.

de uma estudada melhor em css

estes códigos que passei você aplica na div pai

Gustavo Pereira SMLB· 15 de dez.

Sim. Mas qual seletor eu uso ?

João Prado· 15 de dez.

<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

Gustavo Pereira SMLB· 15 de dez.

Qual código eu coloco pra inserir css na div ? Porque no caso, aparece "Aqui ficará a imagem no fundo".

João Prado· 15 de dez.

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%;
}

Gustavo Pereira SMLB· 15 de dez.

Não aconteceu nada. Ficou na mesma.

João Prado· 15 de dez.

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/

Gustavo Pereira SMLB· 15 de dez.

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">](http://www.w3.org/1999/xhtml)
<style type="text/css">

body {

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

}

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

}

</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" />
</head>

<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*/

#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">

</script>

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

<div style="position:absolute;color:white" id="test"></div>

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

</body>

</body>

</html>

CSS:

* {

 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;

}

Mas, eu estou estudando CSS, inclusive estou fazendo um curso de CSS Online, mas eu preciso muito colocar esse site no ar.

Thiago Retondar· 15 de dez.

Cara,

um conselho: estude um pouco mais primeiro. Depois tu aplica o que aprendeu em um projeto pessoal.

Você colocou o margin:0 auto no body, e isso não pode.

Outra coisa, utilize o CSS Reset para diminuir as diferenças entre os browsers.

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

João Prado· 15 de dez.

seguinte

primeiro tira esse codigo:

body {

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

}
segundo, você colocou um <body></body> dentro de outro, isso nao existe

terceiro, a div pai tem que ser assim:

Aqui dentro vai todos os seus códigos HTML. vai ficar tudo dentro desta div

</div>

Gustavo Pereira SMLB· 15 de dez.

Mais... quais esses códigos HTML, que eu coloco ?

João Prado· 15 de dez.

cara você esta com duvidas muito iniciantes

siga o conselho do Thiago

estude mais que você vai encontrar solução para seu problema ;)

Henrique Barcelos· 15 de dez.

Novamente, assista as 7 video aulas... não vai demorar mais que 2h assistindo:

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

Depois disso, talvez suas idéias clareem um pouco...