Publicado em 10 de out.

posicionamento do topo do site com CSS

Olá profissionais do iMasters!

Gostaria de pedir a ajuda de vcs pra melhorar o posicionamento do TOPO do meu site que fica com erro de posição em alguns navegadores.

Portanto, eu preciso de ajuda pra posicionar essas 3 divs: logo, busca e menu de tal maneira que ficasse na mesma posição em todos os principais navegadores.

Sendo que o logo fica a esquerda a barra de busca fica no meio e o menu fica a direita.

E o mais importante eu quero fazer isso apenas com CSS puro e simples mesmo, sem usar aqueles frameworks sofisticados tais como bootstrap, grids e etc.

Agradeço a ajuda de todos e qualquer dúvida me avise que eu respondo logo!

#logo { margin:0; float:left; border:black 1px solid}
#busca {margin-left:50px; float:left; text-align:center; border:blue solid 1px}
#menu { margin-left:10px; float: right; border:solid 1px red}

.clear{clear:both;display:block;overflow:hidden;font-size: 0;line-height: 0;visibility: hidden;width: 0;height: 0}
</style>

<div id="bg_topo">
	<div id="topo">
 <div id="logo">
 <a href="/" title="Meu Site"><img src="logo.png" alt="Meu Site"/></a>
 </div>
 <div id="busca">
 <!-- aqui o formulário de busca -->
 </div>
 <div id="menu">
 <ul id="nav">
 <li><a href="/" title="Início">Home</a></li>
 <li><a href="/quem-somos" title="Sobre nós">Quem Somos</a></li>
 <li><a href="/contato" title="Fale Conosco">Contato</a></li>
 </ul>
 </div><!-- #menu -->
	<div class='clear'> </div>
	</div><!-- #topo -->
</div><!-- bg_topo -->

Discussão (10)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Edgard Hufelande· 10 de out.

Está na área errada cara. rs

Tom Ferreira· 10 de out.

>
Está na área errada cara. rs

valew, rsss, e onde eu posto isso?

Leonardo de Souza· 11 de out.

nossa senhora explica melhor o que voce quer fazer e passa o codigo da pagina inteira eu eu vejo se consigo resolver porque nao intendi nada

Tom Ferreira· 12 de out.

nossa senhora explica melhor o que voce quer fazer e passa o codigo da pagina inteira eu eu vejo se consigo resolver porque nao intendi nada

A página inteira é só isso aí mesmo:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Teste</title>
<style type="text/css">

#bg_topo {background: #FFA71C; min-width:1214px;margin: 0 auto; text-align:center;}
#topo {width: 1214px;margin: 0px auto 0; color:#FFF; border:solid 1px white}

#logo { margin:0; float:left; border:black 1px solid}
#busca {margin-left:50px; float:left; text-align:center; border:blue solid 1px}
#menu { margin-left:10px; float: right; border:solid 1px red}

.clear{clear:both;display:block;overflow:hidden;font-size: 0;line-height: 0;visibility: hidden;width: 0;height: 0}

</style>
</head>

<body>

<div id="bg_topo">
	<div id="topo">
 <div id="logo">
 <a href="/" title="Meu Site"><img src="logo.png" alt="Meu Site"/></a>
 </div>
 <div id="busca">
 <!-- aqui o formulário de busca -->
 </div>
 <div id="menu">
 <ul id="nav">
 <li><a href="/" title="Início">Home</a></li>
 <li><a href="/quem-somos" title="Sobre nós">Quem Somos</a></li>
 <li><a href="/contato" title="Fale Conosco">Contato</a></li>
 </ul>
 </div><!-- #menu -->
	<div class='clear'> </div>
	</div><!-- #topo -->
</div><!-- bg_topo -->

<div id="bg_home">
	<div id="home">

	<div class='clear'> </div>
	</div><!-- #home -->
</div><!-- bg_home -->

<div id="bg_rodape">
	<div id="rodape"><p>Copyright 2013</p>
	<div class='clear'> </div>
	</div><!-- #rodape -->
</div><!-- bg_rodape -->

</body>
</html>

@Leonardo de Souza valew pela ajuda!

Leonardo de Souza· 12 de out.

ae deu uma melhorada ai pra voce nao sei se eh como voce queria mas ta ae:

<!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>Teste</title>
<style type="text/css">

html,body,div,span,applet,object,iframe,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {

margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
}

ul li {

list-style: none;

}

a:link { text-decoration: none; color: #FFF; }
a:visited { text-decoration: none; color: #FFF; }
a:hover { text-decoration: none; color: #CAA652; }
a:active { text-decoration: none; color: #FFF; }
a:focus { outline: none; }

#bg_topo {
background: #FFA71C;
width: 100%;
margin: 0 auto;
text-align:center;
}

#topo {
width: 100%;
margin: 0px auto 0;
color:#FFF;
border:solid 1px white;
}

#logo {
position: relative;
width: 150px;
height: 80px;
background: #1d1d1d;
float:left;
}

#busca {
margin: 20px 50px 0 0;
float: right;
text-align:center;
}

#busca fieldset button{

color: #fff;
float: left;
width: 80px;
height: 20px;
background: #ccc;
margin: 3px 5px 0 0;
border: 0px;
}

#menu {
margin:40px 0 0 10px;
float: left;
}

#menu ul#nav,
#menu ul#nav li{

float: left;
}

#menu ul#nav li{

color: #666;
text-decoration: none;
outline: none;
padding: 10px 40px;
background: #ccc;
margin-right: 5px;
}

#menu ul#nav li:hover{

color: #ccc;
background: #666;
}

#menu ul#nav li a{

color: #666;
display: block;
width: 100%;
height: 100%;

}

#menu ul#nav li:hover a{

color: #ccc;
}

.clear{clear:both;display:block;overflow:hidden;font-size: 0;line-height: 0;visibility: hidden;width: 0;height: 0;
}

</style>
</head>

<body>

<div id="bg_topo">

<div id="topo">

<div id="logo">
<a href="/" title="Meu Site"><img src="logo.png" alt="Meu Site"/></a>
</div>

<div id="busca">
<fieldset>
 <button class="right">buscar</button>
 <input class="right" type="text" />
 </fieldset>
</div>

<div id="menu">
<ul id="nav">
<li><a href="/" title="Início">Home</a></li>
<li><a href="/quem-somos" title="Sobre nós">Quem Somos</a></li>
<li><a href="/contato" title="Fale Conosco">Contato</a></li>
</ul>
</div><!-- #menu -->

<div class='clear'> </div>
</div><!-- #topo -->

</div><!-- bg_topo -->

<div id="bg_home">
<div id="home">

<div class='clear'> </div>
</div><!-- #home -->
</div><!-- bg_home -->

<div id="bg_rodape">
<div id="rodape"><p>Copyright 2013</p>
<div class='clear'> </div>
</div><!-- #rodape -->
</div><!-- bg_rodape -->

</body>
</html>

cara tenta organiza mais seu codigo fica mais facil pra voce mecher e tenta deixa o css separado tambem ajuda, procura comoçear um site ja com um codigo pre montando com uma div geral tudo certinho pra nao ter problema depois vlw

espero ter ajudado flw

Giluan Moral· 13 de out.

Se o que você tá querendo é flutuar as 3 divs dentro do da div topo tenta assim

#topo {width:1214px; margin:auto; color:#FFF; border:solid 1px white}

#logo {float:left; border:black 1px solid}
#busca {float:left; text-align:center; border:blue solid 1px}
#menu { float:left; border:solid 1px red}

#clear { clear:both}
O HTML fica assim

<div id="bg_topo">
	<div id="topo">
 <div id="logo">
 <a href="/" title="Meu Site"><img src="logo.png" alt="Meu Site"/></a>
 </div>
 <div id="busca">
 <!-- aqui o formulário de busca -->
 </div>
 <div id="menu">
 <ul id="nav">
 <li><a href="/" title="Início">Home</a></li>
 <li><a href="/quem-somos" title="Sobre nós">Quem Somos</a></li>
 <li><a href="/contato" title="Fale Conosco">Contato</a></li>
 </ul>
 </div><!-- #menu -->
	<div id='clear'><!-- Limpando o float --></div>
	</div><!-- #topo -->

</div><!-- bg_topo -->

Testa ai e veja se era essa sua intenção.

Tom Ferreira· 14 de out.

>
Se o que você tá querendo é flutuar as 3 divs dentro do da div topo tenta assim

#topo {width:1214px; margin:auto; color:#FFF; border:solid 1px white}

#logo {float:left; border:black 1px solid}
#busca {float:left; text-align:center; border:blue solid 1px}
#menu { float:left; border:solid 1px red}

#clear { clear:both}
O HTML fica assim

<div id="bg_topo">
	<div id="topo">
 <div id="logo">
 <a href="/" title="Meu Site"><img src="logo.png" alt="Meu Site"/></a>
 </div>
 <div id="busca">
 <!-- aqui o formulário de busca -->
 </div>
 <div id="menu">
 <ul id="nav">
 <li><a href="/" title="Início">Home</a></li>
 <li><a href="/quem-somos" title="Sobre nós">Quem Somos</a></li>
 <li><a href="/contato" title="Fale Conosco">Contato</a></li>
 </ul>
 </div><!-- #menu -->
	<div id='clear'><!-- Limpando o float --></div>
	</div><!-- #topo -->

</div><!-- bg_topo -->

Testa ai e veja se era essa sua intenção.

>
ae deu uma melhorada ai pra voce nao sei se eh como voce queria mas ta ae:

espero ter ajudado flw

assim como vc fez ficou perfeito, muito bem organizado e limpo o código, mas o topo ele ainda continua sem rolar na tela...

é que o problema maior é que eu não tô conseguindo explicar o que eu queria fazer é mais ou menos isso: http://forum.imasters.com.br/topic/459056-div-cabecalho-rolante-e-div-menu-fixo/

E eu não estou conseguindo entender esses TUTORIAIS pq eles são em inglês:

1 - http://www.1stwebdesigner.com/tutorials/create-stay-on-top-menu-css3-jquery/

2 - http://tympanus.net/codrops/2009/12/11/fixed-fade-out-menu-a-css-and-jquery-tutorial/

Leonardo de Souza· 14 de out.

pelo oq eu intendi voce quer menu com sub menus quando voce passa o mouse abre outras opcoes eh isso?

Tom Ferreira· 15 de out.

pelo oq eu intendi voce quer menu com sub menus quando voce passa o mouse abre outras opcoes eh isso?

Não é submenu é isso aí mesmo que ensina a fazer nesses tutoriais.

É deixar o topo ou header do site fixo mesmo quando se rola a tela para ver o conteúdo da parte de baixo do site...

Tipo quando vc rola a tela pra ver o rodapé do site e o topo fica fixo, ou seja, ele não some.

Leonardo de Souza· 15 de out.

intendi eh soh voce colocar:

position:fixed

no topo

veja o exemplo no seu proprio site coloquei pra voce ver como fica e se é assim msm que queria

<!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>Teste</title>
<style type="text/css">

margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
}

ul li {

list-style: none;

}

#bg_topo {
background: #FFA71C;
width: 100%;
margin: 0 auto;
text-align:center;
}

#topo {
background: #666;
position: fixed;
width: 100%;
margin: 0px auto 0;
color:#FFF;
border:solid 1px white;
}

#logo {
position: relative;
width: 150px;
height: 80px;
background: #1d1d1d;
float:left;
}

#busca {
margin: 20px 50px 0 0;
float: right;
text-align:center;
}

#busca fieldset button{

color: #fff;
float: left;
width: 80px;
height: 20px;
background: #ccc;
margin: 3px 5px 0 0;
border: 0px;
}

#menu {
margin:40px 0 0 10px;
float: left;
}

#menu ul#nav,
#menu ul#nav li{

float: left;
}

#menu ul#nav li{

color: #666;
text-decoration: none;
outline: none;
padding: 10px 40px;
background: #ccc;
margin-right: 5px;
}

#menu ul#nav li:hover{

color: #ccc;
background: #666;
}

#menu ul#nav li a{

color: #666;
display: block;
width: 100%;
height: 100%;

}

#menu ul#nav li:hover a{

color: #ccc;
}

.teste{
float: left;
width: 100%;
height: 1300px;
background: #fff;
}

.clear{clear:both;display:block;overflow:hidden;font-size: 0;line-height: 0;visibility: hidden;width: 0;height: 0;
}

</style>
</head>

<body>

<div id="bg_topo">

<div id="topo">

<div id="logo">
<a href="/" title="Meu Site"><img src="logo.png" alt="Meu Site"/></a>
</div>

<div id="busca">
<fieldset>
 <button class="right">buscar</button>
 <input class="right" type="text" />
 </fieldset>
</div>

<div id="menu">
<ul id="nav">
<li><a href="/" title="Início">Home</a></li>
<li><a href="/quem-somos" title="Sobre nós">Quem Somos</a></li>
<li><a href="/contato" title="Fale Conosco">Contato</a></li>
</ul>
</div><!-- #menu -->

<div class='clear'> </div>
</div><!-- #topo -->

</div><!-- bg_topo -->

<div id="bg_home">
<div id="home">

<div class="teste">

div de teste

qLorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, necessitatibus et nihil nesciunt temporibus deleniti fugit corrupti id omnis expedita? Quam, sunt, aliquid qui blanditiis rem officiis sint dicta quos.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi, aperiam, maxime, reiciendis sequi molestias fugiat doloremque excepturi ut debitis quae assumenda hic asperiores error laudantium a laborum architecto optio minima.

</div>

<div class='clear'> </div>
</div><!-- #home -->
</div><!-- bg_home -->

<div id="bg_rodape">
<div id="rodape"><p>Copyright 2013</p>
<div class='clear'> </div>
</div><!-- #rodape -->
</div><!-- bg_rodape -->

</body>
</html>