Ir para conteúdo

POWERED BY:

Arquivado

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

Isabel

[Resolvido] alguem pode me r na ordenaçao?!

Por , em Desenvolvimento frontend

Recommended Posts

Isabel    0

Isabel
Postado

Oi! por favor alguem pode me ajudar na ordenação do meu layout :unsure:

meu bloco da esquerda ele tah grudado no conteudo eh tinha que ficar separado que nem o bloco da direita..

se alguem puder me dar uma luz ficaria grata! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>:: MDnet Soluções em Tecnologia -
Home ::</title>

<style type="text/css">

DIV.imagem1 {
position: relative;
top: 0px;
left: 0px;
margin-left:0px;
margin-top:0px;
}
DIV.imagem2 {
position: relative;
top: 383px;
left:0px;
margin-left:0px;
margin-top:-40px;
}
body { margin: 0px;
position: relative;
padding: 0px;
font-family:Arial, Helvetica, sans-serif;
color:#000000;
}
#container { border: solid 1px #a2b1b8; margin: 0 auto;
display: table;
right: 235;
top: 0px;

width: 770px;
height: 550px;

}
#topo { width: auto;
height: 150px;
background: #000000;
}
#esquerda { height: 300px;
float: left;
width: 110px;
padding: 0px;
background: #80b5d3;
margin-top: 10px;
}
#esquerda li{ list-style: none; padding: 1px 1px;
display:block;
background: #80b5d3; margin-left: 0px;
}
#esquerda li:hover{ list-style: none;
display:block;
background: #EAEAEA;
margin-left: 0px;
text-decoration:underline;
}
#esquerda ul{ list-style: none;
padding-left: 5px;
padding-top: 10px;
margin-left: 0px;
}
#direita { height: 300px; width: 160px;
float: right;
background: #80b5d7;
margin-top: 10px;
}
#conteudo { margin: 10px 170px;
height: 300px;
background:#cee0ea;
}

<!--
ul#menu {
list-style: none;
background: #f1f1f1;
margin: 0;
padding: 0;
width: 170px;
border-top: 0px solid #f7f7f7;
}
ul#menu li {
border-bottom: 0px solid #f9f9f9;
}
ul#menu li a {
width: 140px;
height: 18px;
display: block;
padding-top: 2px;
padding-left: 3px;
text-decoration: none;
color: #000;
font: 12px Verdana;
font-weight:bold
}
ul#menu li a:hover {
background: #E1E8F8;
color: #085d94;
width: 120px;
}
-->

<!--[if IE]>
<style type="text/css">
ul#menu li a, ul#menu li a:hover{
width: 120px;
}

</style>
<![endif]>
</head>
<body>

<div id="container">
<div class="imagem1"><img style="width: 770px; height: 145px;" src="banner.jpg"></div>

<div class="imagem2">
<img style="width: 770px; height: 63px;" src="rodape.jpg">
</div>

<div id="esquerda">
<ul id="menu">

  <li><a href="#">Empresa</a></li>

  <li><a href="#">Serviços</a></li>

  <li><a href="#">Download</a></li>

  <li><a href="#">Contato</a></li>

  <li><a href="#">Suporte on-line !</a></li>

</ul>

</div>

<div id="esquerda"></div>

<div id="direita"></div>

<div id="conteudo"></div>

</div>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

vocÊ pos esquerda duas vezes

<div id="esquerda"> <<<<<<<<<< AQUI
<ul id="menu">

<li><a href="#">Empresa</a></li>

<li><a href="#">Serviços</a></li>

<li><a href="#">Download</a></li>

<li><a href="#">Contato</a></li>

<li><a href="#">Suporte on-line !</a></li>

</ul>

</div>

<div id="esquerda"></div> <<<<<<<<<< AQUI

abraço ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

donato    0

donato
Postado

Olá, tudo bem? dei uma arrumada ai, tem muita coisa desnecessária ainda, dá uma revisada.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>:: MDnet Soluções em Tecnologia -
Home ::</title>

<style type="text/css">

#rodape { padding: 0px;}

DIV.imagem2 {
position: relative;
top: 383px;
left:0px;
margin-left:0px;
margin-top:-40px;
}
body { margin: 0px;
position: relative;
padding: 0px;
font-family:Arial, Helvetica, sans-serif;
color:#000000;
}
#container { 
border: solid 1px #a2b1b8; 
margin: 0 auto;
width: 770px;

}

#topo { width: auto;
height: 150px;
background: #000000;
}
#esquerda { height: 300px;
float: left;
width: 160px;
padding: 0px;
background: #80b5d3;
margin-top: 10px;
}
#esquerda li{ 
	list-style: none; padding: 1px 1px;
	background: #80b5d3; 
	margin-left: 0px;
}

#esquerda li:hover{ 
	list-style: none;
	display:block;
	background: #EAEAEA;
	margin-left: 0px;
	text-decoration:underline;
}
#esquerda ul{ 
	list-style: none;
	padding-left: 5px;
	padding-top: 10px;
	margin-left: 0px;
}
#direita { 
	height: 300px; width: 160px;
	float: right;
	background: #80b5d7;
	margin-top: 10px;
}

#conteudo {
	margin: 10px 170px;
	height: 300px;
	background:#cee0ea;
}

<!--
ul#menu {
	list-style: none;
	background: #f1f1f1;
	margin: 0;
	padding: 0;
	border-top: 0px solid #f7f7f7;
}

ul#menu li {
	border-bottom: 0px solid #f9f9f9;
}

ul#menu li a {
	height: 18px;
	display: block;
	padding-top: 2px;
	padding-left: 3px;
	text-decoration: none;
	color: #000;
	font: 12px Verdana;
	font-weight:bold
}

ul#menu li a:hover {
	background: #E1E8F8;
	color: #085d94;

}
-->

<!--[if IE]>
<style type="text/css">
ul#menu li a, ul#menu li a:hover{
width: 120px;
}

</style>
<![endif]>
</head>
<body>

<div id="container">
<div class="imagem1"><img style="width: 770px; height: 145px;" src="banner.jpg"></div>



<div id="esquerda">
<ul id="menu">

<li><a href="#">Empresa</a></li>

<li><a href="#">Serviços</a></li>

<li><a href="#">Download</a></li>

<li><a href="#">Contato</a></li>

<li><a href="#">Suporte on-line !</a></li>

</ul>

</div>

<div id="direita"></div>

<div id="conteudo"></div>
<div id="rodape">
<img style="width: 770px; height: 63px;" src="rodape.jpg">
</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