Ir para conteúdo

Arquivado

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

Vitor B.

Novamente problemas de espaçamento

Por , em Desenvolvimento frontend

Recommended Posts

Vitor B.    0

Vitor B.
Postado

Então, eu já aportunei vocês com esses códigos xD Mas não tem jeito de isso terminar bem, O layout fica como eu quero no IE mas no Mozila não =/

 

O menú avança no conteúdo e eu não joguei ele lá, xD

Alguém conhece uma maneira melhor de fazer essa diagramação?

 

Abaixo o código:

<!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.5em auto;			
text-align:left;
background-color: #fff;
position: relative;
	}
#cont {
position: relative;
margin: 10px 10px 10px 170px;


	}
	ul.menu {
	list-style-type: none;
	position: absolute;
	padding-right: 10px;
	margin: 10px;
	width: 150px;
	height: 155px;
	
}
#quinaesq {
	position:absolute;
	top: 0;
	left: 0;
}
#quinadir {
	position:absolute;
	top: 0;
	right: 0;
}
ul.menu li {
line-height:160%;;
text-align:right;}
ul.menu a {
text-decoration: none;
}
</style>
</head>
<body>
<div id="tudo">

<ul class="menu">
  <h3><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></li></h3>
</ul>
<img  id="quinaesq" src="quinaesq.gif" width="10" height="10">
<img  id="quinadir" src="quinadir.gif" width="10" height="10">
<div id="cont">
	esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste esse texto é um texto teste </div>
</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Melhor posicionar o menu e o "cont" com floats.

E o menu não será único na página? eu prefiro usar ID nesse caso

Compartilhar este post

Link para o post
Compartilhar em outros sites

Vitor B.    0

Vitor B.
Postado

Eu tentei com floats, não funcionou legal também, mas dai eu descobri onde tava conflitando... enfim ajustei as paradas.

Troquei no "cont" a Margin por Padding.

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
<html>
<head>
<style type="text/css">
* {
padding:0;
margin:0;
}
body {
background:#000;
text-align:center;	
	}
#tudo {
width: 760px;
margin: 0.5em auto;			
text-align:left;
background-color: #fff;
position: relative;
	}
#cont {
position: relative;
padding: 10px 10px 10px 170px;
	}
	ul.menu {
	list-style-type: none;
	position: absolute;
	padding-right: 10px;
	margin: 10px;
	width: 150px;
	height: 155px;
	
}
#quinaesq {
	position:absolute;
	top: 0;
	left: 0;
}
#quinadir {
	position:absolute;
	top: 0;
	right: 0;
}
ul.menu li {
line-height:160%;;
text-align:right;}
ul.menu a {
text-decoration: none;
}
</style>
</head>
<body>
<div id="tudo">

<ul class="menu">
  <h3><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></li></h3>
</ul>
<img  id="quinaesq" src="quinaesq.gif" width="10" height="10">
<img  id="quinadir" src="quinadir.gif" width="10" height="10">
<div id="cont">
	X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X  </div>
</div>
</body>
</html>

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