Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Bom dia amigos, estou montando um layout utilizando somente CSS, porém estou com um problema, no IE a DIV do meio que será onde irei inserir forms, está ficando de forma correta, porém no Firefox a DIV do meio, invade a area que sera a div do menu. Aqui segue o link dos layouts.
http://img29.imageshack.us/gal.php?g=23029184.jpg
É a primeira vez que começo a usar CSS. Segue tb os codigos, se alguem puder mim ajudar, desde já agradeço pela atenção.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Templates</title>
<link rel="stylesheet" type="text/css" href="arquivo.css"/>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<style type="text/css"> color: #005C96;
} color: #005C96;
} color: #005C96;
}</style></head>
<body>
<div id="geral"><br/>
<div id="cabeçalho">
cabeçalho
</div>
<div id="linha">
linha
</div>
<div id="menuesq">
<div id="menu"><center>MENU</center></div>
<div id="menu">
<ul id="MenuBar1" class="MenuBarVertical">
<li><a class="MenuBarItemSubmenu" href="#">»CADASTRO</a>
<ul>
<li><a href="#"> »FUNCIONÁRIO</a></li>
<li><a href="#">»USUÁRIOS</a></li>
</ul>
</li>
</ul>
</div>
<div id="menu">
<ul id="MenuBar2" class="MenuBarVertical">
<li><a class="MenuBarItemSubmenu" href="#">»AGENDAR</a>
<ul>
<li><a href="#">»AGENDAR</a></li>
<li><a href="#">»ALTERAR</a></li>
<li><a href="#">»EXCLUIR</a></li>
</ul>
</li>
</ul>
</div>
<div id="menu">
<ul id="MenuBar3" class="MenuBarVertical">
<li><a class="MenuBarItemSubmenu" href="#">»RELATÓRIO</a>
<ul>
<li><a href="#">»RELATÓRIO</a></li>
</ul>
</li>
</ul>
</div>
<div id="menu">
<ul id="MenuBar4" class="MenuBarVertical">
<li><a href="#">»LOGOFF</a> </li>
</ul>
</div>
</div>
<div id="meio"><br />
meio conteudoddddddddddddddddddddddddddddddddddddddddddddddddddddd
conteudodddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
conteudodddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
conteudodddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
conteudodddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
</div>
<div id="rodape">
rodape</div>
</div>
<script type="text/javascript">var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var MenuBar3 = new Spry.Widget.MenuBar("MenuBar3", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var MenuBar4 = new Spry.Widget.MenuBar("MenuBar4", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});</script>
</body>
</html>div{
border:1 solid black;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
} margin:0 auto;
width:700px;
margin-right:auto;
margin-left:auto;
}div#cabeçalho{
height:150px;
background:#66FF99;
/*background-position:center;*/
}div#menuesq{
width:100px;
height:200px;
float:left;
/*background:#993300;*/
border:1px;
}div#rodape{
width:700px;
float: left;
background:#66FF99;
}div#meio{
width:: 300px;
height:300px;
float:rigth;
background:#666699;
padding-top:inherit;
padding: 10px;
} border:1px;
margin:0 auto;
margin-left:auto;
margin-right:auto;
}Mt obrigado Thiago, eu fiz uma revisão no codigo e consegui resolver o problema. Desistir jamais rsrsrsr :D Obrigado novamente.
Que bom que conseguiu resolver o seu problema.
Uma dica que deixo é quando achar um erro, seguir estes passo:
http://forum.imasters.com.br/public/style_emoticons/default/seta.gif http://forum.imasters.com.br/index.php?showtopic=180880
Abraços e bons estudos. ;)
Então, cara, só essa sua frase:
já se vê que sua estrutura não está boa.
Mas vamos lá:
Acho que seu #menuesq ficou muito divmaniaco. Tente reduzir aí. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
Você coloca que a div#meio tem um width: 300px, mas se vê claramente nas imagens que não tem.
Te aconselho dar uma revisada. Sei que no começo é difícil, mas não desista. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif