Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa tarde pessoal.
Bem estou com o seguinte problema, queria um menu fixo , até consegui com o positon fixed, mas esta entrando em conflito com outro position do category q é relative.
Quando rolo a pagina, o category sobrepoem o menu , ficando assim:
/applications/core/interface/imageproxy/imageproxy.php?img=http://i.imgur.com/lmndc7E.jpg&key=f9ae19e7a70786cccffd2a6ee97b6bcc798b215f1b7e468e688fe4ac62fb82b5" alt="lmndc7E.jpg" />
Aproveitando também, queria saber a forma correta de posicionar o menu de redes sociais , q nao estou conseguindo, fiz uma gambiarrinha com o margin top negativo.
Segue o codigo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Teste</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="wrapper"> <!--tudo-->
<header id="topo">
<div class="menu2">
<nav class="menu">
<ul class="menu-top">
<li><a href="index.php">Home</a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#">Portifolio</a></li>
<li><a href="blog.php">Blog</a></li>
<li><a href="#">Contato</a></li>
</ul>
</nav>
<!--Nav Menu-->
<div class="social">
<a href="#"><img src="images/tumblr.gif" height="30" width="30" alt="Tumblr"></a>
<a href="#"><img src="images/pint.gif" height="30" width="30" alt="Pint"></a>
<a href="#"><img src="images/pint.gif" height="30" width="30" alt="Tumblr"></a>
<a href="#"><img src="images/pint.gif" height="30" width="30" alt="Pint"></a>
</div><!--Redes sociais-->
</div>
<!--Menu todo-->
<div class="logo">
<img src="images/logodani.png" width="auto" height="auto">
</div>
<!--Logo-->
<div class="linha"></div>
<!--Linha de sepração-->
</header>
<!--Header-->
<div id="content">
<article class="post">
<div class="category">
<a href="#">Categoria do Post</a>
</div>
<!--Category-->
<div class="agrupapost">
<div class="ptitulo"><h1>Titulo do post</h1></div>
<!--Titulo do post-->
<div class="infoautor">
Por:<span>Daniele</span> | <span class="cinzaclaro">@emilyoly</span> | <span class="cinzamedio">Data: 06/05/15</span>
<hr />
</div>
<!--Info autor-->
<div class="contentpost">
<div class="thumbpost">
<img src="images/imgpostt.jpg" height="281" width="440" alt="">
</div>
<!--Tumb Post-->
<div class="txpost">
<p>Coloque aqui um resumo sobre seu post, que seja bem objetivo, ou gere um automaticamente com o primeiro paragrafo do post. Coloque aqui um resumo sobre seu post, que seja bem objetivo, ou gere um automatica-mente com o primeiro paragrafo do post.</p>
</div>
<!--TxPost-->
<div class="leiamais">
<a href="#">Continue Lendo ></a>
</div>
<!--Leia Mais-->
</div>
<!--Content Post-->
</div>
<!--Agrupa Post-->
<!--COMECO SEGUNDO POST-->
<div class="category">
<a href="#">Categoria do Post</a>
</div>
<!--Category-->
<div class="agrupapost">
<div class="ptitulo"><h1>Titulo do post</h1></div>
<!--Titulo do post-->
<div class="infoautor">
Por:<span>Daniele</span> | <span class="cinzaclaro">@emilyoly</span> | <span class="cinzamedio">Data: 06/05/15</span>
<hr />
</div>
<!--Info autor-->
<div class="contentpost">
<div class="thumbpost">
<img src="images/imgpostt.jpg" height="281" width="440" alt="">
</div>
<!--Tumb Post-->
<div class="txpost">
<p>Coloque aqui um resumo sobre seu post, que seja bem objetivo, ou gere um automaticamente com o primeiro paragrafo do post. Coloque aqui um resumo sobre seu post, que seja bem objetivo, ou gere um automatica-mente com o primeiro paragrafo do post.</p>
</div>
<!--TxPost-->
<div class="leiamais">
<a href="#">Continue Lendo ></a>
</div>
<!--Leia Mais-->
</div>
<!--Content Post-->
</div>
<!--Agrupa Post-->
</article>
<!--Article Post-->
<aside class="sidebar">
</aside>
<!--Anside Sidebar-->
</div>
<!--Conteudo-->
<footer id="footer">
<p><small>© Copyright @emilyoly 2015. Todos os direitos reservados.</small></p>
</footer>
<!--Footer - Rodape-->
</div></body>
</html>
**E o codigo CSS:**/------- TUDO ------- # /
*{margin: 0; padding: 0; list-style: none;text-decoration: none;}
img, picture, video, embed {
max-width: 100%;
}/---------------------HEADER-------------------/
/ Topo /
#topo {width: 100%;height: auto;}
/ Menu /
.menu2{position: fixed; right: 0; top: 0; vertical-align: top;width: 100%;height: 33px;background: black;text-align: center;}
.menu ul {width: 100%;}
.menu ul li {display: inline;text-align: center;}
.menu ul li a {color: #fff;line-height: 33px;text-align: center;margin-right: 10px;}
.menu-top li a:hover{background: #393939;color: #fff;border-bottom: solid 4px #FF8C00;border-radius: 2px;text-shadow:1px 0px 1px #fff;}
/ Redes Sociais /
.social{float: right;margin-top: -33px;}
.social a:hover{}
/ Logo /
.logo {
max-width: 500px;max-height: 150px;margin:auto;margin-top: 50px;}
.logo img {background-size: cover;}
/ Linha que separa o topo do conteudo tem que arrumar o magin top/
.linha {display:block;
margin-top:15px; margin-left: 5%; margin-bottom: 25px;
height:1px;width: 90%;background-color:black;box-shadow: #000 0 1px 5px;-webkit-box-shadow: #000 0 1px 5px;-moz-box-shadow: #000 0 1px 5px;}/ Destaque da pagina inicial /
.destaque{width: 940px;height: 400px;overflow: hidden;margin-bottom: 50px;}
.destaque img {background-size: cover;width: 100%;}
/--------------CONTEUDO PRINCIPAL--------------------/
#content{width: 940px;margin: auto;}
/---------------POST RECENTES----------------------/
.dblog{width: 100%;}
.precentes{width: 540px;margin: auto;margin-top: 30px;padding-bottom: 30px;}
.rpost {
}.postrecente{
}
.rtitulo{
}
.rautor{
}
.rdescricao{
}/---------------CLASSES-------------------------/
.cinzaclaro{color: #B4B4B4 !important;}
.cinzamedio{color: #707070 !important;}
.laranja{color:#FF5B00;font: 16px;}
.italic{font-style: italic;}
.rightpost{float: right;}
.textcenter {text-align: center;}
/---------------POST BLOG--------------------------/
.post{width: 620px;float: left;}
.agrupapost{width: 100%;border: 1px solid #CFD1D9;margin-bottom: 20px;padding-bottom: 10px;}
/ Titulo do Post /
.ptitulo{margin-top: 25px;text-align: center;}
/ Informações do Post /
.infoautor{text-align: center;}
.infoautor hr{width: 500px;margin:auto;margin-top: 5px;}
/ Imagem do Post /
.thumbpost{margin-top: 15px;text-align: center;}
/ Descrição / Conteudo Post /
.txpost{margin-top: 15px;margin-left: 20px;color: #232323;font: 14px;}
/ Continue Lendo /
.leiamais{margin-top: 10px;width: 100%;text-align: center;}
.leiamais a{color: #FF5B00; font: 20px;}
.leiamais a:hover{color: #FF5B00; font: 16px;text-shadow:1px 0px 2px gray;}
/ Paginação /
#paginacao{
width: 100%;
font-style: italic;
font-size: 18px;
color: #888;
margin-left: 20px;
}
.subir{
width: 100%;
margin-left: 20px;
} font-style: italic;
font-size: 18px;
color: #888;
}/--------------SIDEBAR--------------------/
.sidebar{margin-top: 30px;width: 300px;height: 500px;background: gray;float: right;}
/---------------RODAPE-------------------/
#footer{float: left;bottom:0;width:100%;height:100px;background: black;margin-top: 20px;}
#footer p{text-align: center;line-height: 100px; / Posiciona o texto no centro /}
#footer small{color:#fff;}
Obrigado , funcionou certinho :3
Amigo, use a propriedade "z-index" do CSS para indicar para o navegador o que deve estar na frente.
Coloque essa propriedade no item que deve estar de frente:
z-index: 1;
Tente e veja se ajuda :clap: