Ir para conteúdo

Arquivado

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

Vitor B.

[Resolvido] problema com posicionamento dentro da div

Por , em Desenvolvimento frontend

Recommended Posts

Vitor B.    0

Vitor B.
Postado

Então, eu sou meio noob gente mas preciso de uma ajudinha... a página que eu criei fica centralizada, tem um tamanho específico de 760 px e o espaço que sobra é igual na direita e esquerda. O meu problema é posicionar o menú e o conteúdo pra que eles fiquem na mesma altura. Mas que fique o menú à esquerda e o conteudo à direita. uma ajudinha... xD

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 
Transitional//EN">
<html>
<head>
<style type="text/css">
body {
margin:0;
padding:0;
background:#000;
text-align:center; 	
	}
#tudo {
width: 760px;
margin: 0.9em auto;			
text-align:left; 
background-color: #fff;
	}
#cont {
position: relative;
margin: 0 0 0 10em;
padding: 1em;
	}
	ul.navbar {
	list-style-type: none;
	padding: 0;
	margin: 0;
	position: relative;
	top: 1em;
	left: 1em;
	width: 150px;
	height: 90px;
}
ul.navbar li {
margin: 1em;}
ul.navbar a {
text-decoration: none }
</style>
</head>
<body>
<div id="tudo">
<ul class="navbar">
  <li><a href="index.html">Home page</a>
  <li><a href="pensamentos.html">Pensamentos</a>

  <li><a href="cidade.html">Minha cidade</a>
  <li><a href="links.html">Links</a>
</ul>
<div id="cont">
	<h1>CONTEÚDO CONTEÚDO CONTEÚDO CONTEÚDO CONTEÚDO CONTEÚDO CONTEÚDO CONTEÚDO CONTEÚDO CONTEÚDO CONTEÚDO CONTEÚDO CONTEÚDO CONTEÚDO CONTEÚDO CONTEÚDO CONTEÚDO CONTEÚDO CONTEÚDO CONTEÚDO CONTEÚDO</h1>

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Tenta agora:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
<html>
<head>
<style type="text/css">
body {
margin:0;
padding:0;
background:#000;
text-align:center;	 
	}
#tudo {
width: 760px;
margin: 0.9em auto;			
text-align:left;
background-color: #fff;
position: relative;
	}
#cont {
position: relative;
margin: 0 0 0 10em;
padding: 1em;
	}
	ul.navbar {
	list-style-type: none;
	padding-top: 9px;
	margin: 0;
	position: absolute;
	top: 1em;
	left: 1em;
	width: 150px;
	height: 90px;
}
ul.navbar li {
margin: 1em;}
ul.navbar a {
text-decoration: none }
</style>
</head>
<body>
<div id="tudo">
<ul class="navbar">
  <li><a href="index.html">Home page</a>
  <li><a href="pensamentos.html">Pensamentos</a>

  <li><a href="cidade.html">Minha cidade</a>
  <li><a href="links.html">Links</a>
</ul>
<div id="cont">
	<h1>CONTEÚDO CONTEÚDO CONTEÚDO CONTEÚDO CONTEÚDO CONTEÚDO CONTEÚDO CONTEÚDO CONTEÚDO CONTEÚDO CONTEÚDO CONTEÚDO CONTEÚDO CONTEÚDO CONTEÚDO CONTEÚDO CONTEÚDO CONTEÚDO CONTEÚDO CONTEÚDO CONTEÚDO</h1>

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

Coloquei #tudo com position: relative, e ul.navbar com position: absolute. Assim ul.navbar estará posicionada absolutamente em relação à #tudo.

 

Abraços.

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