Ir para conteúdo

POWERED BY:

Arquivado

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

Liriu

Posicionamento do Menu

Por , em Desenvolvimento frontend

Recommended Posts

Liriu    0

Liriu
Postado

aff ja to ficanso sem graça de tantos posts, mas la vai mais um. Bom pessoal adicionei um box do lado direito do corpo do meu layoute, e esperava que ele ficasse no topo da pagina como mostra a imagem abaixo:

 

problemas.png

 

Uploaded with ImageShack.us

 

 

no entando ele fica posicionado no rodape da pagina, aff ja tentei de tudo, e debaixo deste box que coloquei , vou colocar outros.. segue a imahem mostrando onde esta ficando:

 

problemas2.png

 

Uploaded with ImageShack.us

 

 

esse e o codigo que estou usando para o menu

 

#tp {  
 background-color:#FFFFFF;
 width:310px;
 background-image:url("imagens/bdfooter.png");
 background-position:bottom;
 background-repeat:no-repeat;
 float: right;}

 

ja tentei fazer de varias outras formas mas nada....

Compartilhar este post

Link para o post
Compartilhar em outros sites

Liriu    0

Liriu
Postado

Html

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>


<div id="conteiner">

<div id="header">
</div>

<div id="nav">
</div>


<div id="post">
</div>



<div id="tp">
<center>

<br>
</center>
</div>


</div>
</body>
</html>

 

 

CSS:

/* CSS Document */

/* --------------- */

/*header*/
#header {
background-image:url("imagens/hd.png");
background-repeat:no-repeat;
margin-top: 2px;
margin-top:0px;
margin-left: 136px;
height: 298px;
width: 641px;
padding: 0px;
z-index:1;
}
/*-----------------*/

/* Body */

body { background-color:#2F0750;
  	background-image:url(imagens/bg.gif);
      font-family:"Trebuchet MS", sans-serif;
      font-size:medium;
      margin:0px;
      padding:0px;
      }
/* --------------- */

/*Menu Superior */
#nav {
background-image:url("imagens/borda.png");
background-position:top;
margin-right: 446px;
margin-left:137px;
width:659px;
height: 57px;

}       

/* --------------- */       
/* Post */       
#post { background-color:#FFFFFF;
background-image:url("imagens/footer.png");
background-position:bottom;
background-repeat:no-repeat;
margin-top: 0px;
margin-right: 446px;
margin-left:137px;
width:659px;
height: 1000px;
} 

/* --------------- */

/* menus */

#tp {
background-color:#FFFFFF;
margin-right:90px;
float:right;
width:300px;
height:300px;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Liriu    0

Liriu
Postado

Qual caixa cara? to ocmeçando com css agora pode me da uma dica pra melhora?

 

ha entendi coloquei ja mas nao deu certo =/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ramael    0

Ramael
Postado

Olha..... fiz um "mais ou menos" pra você dar uma olhada:

 

CSS

body {
background: #2F0750 url("imagens/bg.gif");
font-family: "Trebuchet MS", sans-serif;
font-size: medium;
margin:0px;
padding:0px;
}

.conteiner {
display: table;
position: relative;
margin: 10px;
width: 98%;
}

.header {
background: green url("imagens/hd.png") no-repeat;
height: 298px;
width: 100%;
padding: 0px;
}

.nav {
background: yellow url("imagens/borda.png") center top no-repeat;
width:100%;
height: 57px;
}

.post {
background: #fff url("imagens/footer.png") center bottom no-repeat;
width: 641px;
height: 1000px;
float:left;
}

.tp {
background:blue;
float:right;
width:300px;
height:300px;
text-align: center;
}

 

HTML

<?xml version="1.0" encoding="iso-8859-1"?>
<!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" xml:lang="pt">
 <head>
<title>Site de teste</title>
<link rel="stylesheet" href="teste.css" type="text/css" media="screen" />
 </head>
 <body>

<div class="conteiner">
<div class="header">header</div>
<div class="nav">menu de navegação nav</div>
<div class="post">post</div>
<div class="tp">tp</div>
</div>


 </body>
</html>

 

Mas isso é pra te servir de base de apoio, não só ctrl+c e ctrl+v.... ^^

 

Muitas regras, você poderia ter declarado em uma linha só, como o "margim" para todos os lados e tambêm todo o "background", ao invés de usar uma linha pra cada modificação... entendeu ??

 

Recomendo dar uma lida, além dos posts aqui do fórum, no site do Maujor, é ótimo para quem está começando.

 

 

t+

Ramael

 

ps.: O float não funcionou contigo pq tinha uns margins gigantes. ^^

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