posicionar imagem

[junaooaks 3]

ola pessoal

 

estou aprendendo css e preciso de uma ajuda de vocês.

 

coloquei uma imagem de fundo e coloquei pra na repetir

/*colocar imagem de fundo*/
background-image:url(../imag/ativo.png);
/*nao deixar a imagem repetir*/
background-repeat:no-repeat; 

 

so que quero colocar esta imagem longe uns 10px do top e 10px da lateral

nao sei como fazer isto

 

quero fazer a imagem andar para direita

 

#titulo-login {  
margin: 0.em auto;
/*altura*/
height: 100px;  
/*largura*/
width: 100%;  
/*cor azul do fundo*/
background: #3B5998;
/*colocar imagem de fundo*/
background-image:url(../imag/ativo.png);
/*nao deixar a imagem repetir*/
background-repeat:no-repeat;

} 

 

e aproveitando ja o topico, estou tentando criar um layout assim

#titulo

#form

#cont1

#cont2

#cont3

#rodape

 

o form e os conteudo fica um do lado do outro assim

titulo

fomr / cont1 / cont2 / cont3

rodape

 

nao consegui montar os form com os cont um do lado do outro

 

/*criar formulario login usuaio e senha*/
#form{
float:left;
width:165px;
background:#F2F2F2;
font-size:16px;
font-family:Georgia, "Times New Roman", Times, serif;
font-weight:bolder;

}
#cont1{
float:left;
margin-left: -400px;
width: 245px;  
background: #000;  
font-size:12px;
font-family:Georgia, "Times New Roman", Times, serif;
margin-left: 6px;
}
#cont2{
float:left;
width: 245px;  
background: #000;  
font-size:12px;
font-family:Georgia, "Times New Roman", Times, serif;
}
#cont3{
width: 245px;  
background: #000;  
font-size:12px;
font-family:Georgia, "Times New Roman", Times, serif;
}

 

html

 

<div id="titulo-login">
<div id="topo">ativo</div>

<div id="principal">
<div id="form">Entrar</div>
<div id="conte1">conteudo 1</div>
<div id="conte2">conteudo2</div>
<div id="conte3">conteudo3</div>
</div>

<div id="rodape">

 

e como faço para centralizar a pagina

vo mandar o css todo

body  {
/*tirar a margem*/
margin: 0;     
padding: 0;    
/*cor de fundo da pagina de login*/
background: #FFF; 

}   

/*pertence a barra azul do login*/
#titulo-login {  
margin: 0.em auto;
/*altura*/
height: 100px;  
/*largura*/
width: 100%;  
/*cor azul do fundo*/
background: #3B5998;
/*colocar imagem de fundo*/
background-image:url(../imag/ativo.png);
/*nao deixar a imagem repetir*/
background-repeat:no-repeat;
left:10px;	
} 

/*cor e tamanha das letras do titulo*/  
#topo{
/*tipo da fonte escolhida*/
font-family:Georgia, "Times New Roman", Times, serif;
/*tamanho da fonte*/
font-size:50px;
/*colocar a fonte em negrito*/
font-weight:bolder;
/*cor escolhido*/
color: #FFF;
/*posição da letra na tela*/
text-align:left;
/*margem da posição da letra do titulo*/
margin:25px;

}
/*conteudo da parte principa tamanho*/
#principal {  
margin: 2em auto;  
width: 900px;  
position:absolute;
left:50px;
display:inline;
}   

/*criar formulario login usuaio e senha*/
#form{
float:left;
width:165px;
background:#F2F2F2;
font-size:16px;
font-family:Georgia, "Times New Roman", Times, serif;
font-weight:bolder;

}
#cont1{
float:left;
margin-left: -400px;
width: 245px;  
background: #000;  
font-size:12px;
font-family:Georgia, "Times New Roman", Times, serif;
margin-left: 6px;
}
#cont2{
float:left;
width: 245px;  
background: #000;  
font-size:12px;
font-family:Georgia, "Times New Roman", Times, serif;
}
#cont3{
width: 245px;  
background: #000;  
font-size:12px;
font-family:Georgia, "Times New Roman", Times, serif;
}

/*criar linha na horizontal*/
hr {   
color:#3B5998;
position:fixed;
border-width: 0;
height: 1px;
border-top-width: 1px;
}


/*rodaper*/
#rodape {
/*tamanho da fonte*/
font-size:10px;
/*estilo da fonte*/
font-family:Verdana, Geneva, sans-serif; 
/*posicionar na parte inferior da tela*/
position: absolute;
bottom: 0;
/*cor de fundo*/
background:#DDD;
/*altura*/
height: 30px;  
/*largura*/
width: 100%;  
/*cor da fonte escrita*/
color:#FFF;
}

 

se puder me ajudar agradeço

[Anilton Veiga 0]

/*colocar imagem de fundo*/
       background-image:url(../imag/ativo.png);
       /*nao deixar a imagem repetir*/
       background-repeat:no-repeat; 

Para essa parte, basta você colocar um

padding: 10px;

 

e em relação a estrutura da sua pagina, tente criar um tabela com duas colunas e dentro dela insera a div que voce esta trabalhando com o form!

 

Espero ter ajudado, Até mais!

[Giovani 104]

Centralizar a página: http://forum.imasters.com.br/topic/201365-centralizar-site-em-qualquer-resolucao/page__view__findpost__p__735132

 

Propriedade Background: http://maujor.com/tutorial/backtut.php

 

Recomendo um bom estudo das css + html.