Ir para conteúdo

POWERED BY:

Arquivado

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

rodrigo.oliveirah

Espaço em branco acima/abaixo do menu

Por , em Java

Recommended Posts

rodrigo.oliveirah    0

rodrigo.oliveirah
Postado

Oi Pessoal.

Meu primeiro post, sou 99,8% leigo. O 0,2% aprendi por obrigação ao querer dar uma ajustada no meu blog.

É o seguinte: Achei um template legal para baixar e estou usando, a unica coisa que está pegando é que não consigo deixar o menu parado, ele é fixo, mas não quero. Gostaria que ele não rolasse com a pagina, que ele permanecesse paradinho lá em cima.

Quando finalmente fusando e fusando eu consegui trocar uma palavrinha e deixar ele parado, ficou um espaço em branco.

 

Eu faço o teste nesse link ~~> http://bloggercobaiablogger.blogspot.com.br/

Original ~~> www.comprandoemorando.com

O que ai abaixo está errado? Alguem me pode me ajudar? Obrigado.

 

<style type='text/css'>

.header_wrap {height:99px; width:100%; z-index:999; position:static; top:0; left:0; background:rgba(42,60,62,0.8); zoom: 1;}

.header_wrapper {position:relative; width:960px; margin:auto; z-index:999;}

.header_wrapper img.logo {position: absolute; top:-20px; left:0; z-index:999;}

.header_wrapper img.logo_small {display:none; position: absolute; top:10px; left:0; z-index:999;}

.header_menu a {font-size:16px; font-weight:400; color:#f2f2f2; padding:5px 10px; border-radius:4px; behavior: url(PIE/PIE.htc); cursor: pointer;}

.header_menu a span {font-weight:400; font-size:16px;}

.header_menu li {float:left; position:relative; margin:0 5px; z-index:999;}

.header_menu ul ul li {background:rgba(42,60,62,0.8); zoom: 1; float:none; position:relative; padding:3px 5px;}

.header_menu ul ul li:first-child {border-radius:5px 5px 0px 0px; padding-top:5px;}

.header_menu ul ul li:last-child {border-radius:0px 0px 5px 5px; padding-bottom:5px;}

.header_menu ul ul li:only-child {border-radius:5px;}

.header_menu {padding:24px 0 0 0; float:right; max-width:820px;}

.header_menu .hover_single {border-radius:5px;}

 

#allaround_menu > li > ul.sub-menu:after {position: absolute; content:''; padding-top:40px; top:-8px; left: 20px; border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:8px solid rgb(42,60,62); opacity:0.8; filter: alpha(opacity = 80);}

 

#allaround_menu li li.has_children > a:after {float:right; content:'>';}

 

 

 

.header_menu li ul {position:absolute; top:-4px; left:-5px; opacity:0; filter:alpha(opacity = 0); padding-top:40px; display:none;}

.header_menu li li a {display:block; font-size:14px; line-height:14px; width:180px; padding:8px 5px 12px 5px;}

.header_menu li ul ul {top:-25px; left:200px; padding-top:0px; z-index:1000;}

 

 

 

.header_wrap.sticky .header_wrapper img.logo {display: none;}

.header_wrap.sticky .header_wrapper img.logo_small {display:block;}

.header_wrap.sticky .header_menu {padding-top:19px;}

.header_wrap.sticky {height:60px;}

.header_wrap.sticky #menu-primary li ul.sub-menu:after {top:-28px;}

 

.header_wrap.sticky {margin-top:20px;}

 

 

.header_wrap.sticky .header_menu li ul {padding-top:40px;}

.header_wrap.sticky .header_menu li ul ul {padding-top:0;}

 

-----------

O menu é bem bacana, porém ocupa muito espaço e desejo colocar um banner fixo na lateral direita.

 

 

Help? :upset:

 

Vlw.. larguei mão..

Compartilhar este post

Link para o post
Compartilhar em outros sites

Shura16    0

Shura16
Postado

Beleza, primeiramente vou recomendar que você estude HTML e CSS para entender mais.
O site W3Schools pode te ajudar muito.

Segundo, vou montar um site básico. Teste e veja se é isso que você quer:

HTML:

<html>
<head>
<title>Lorem ipsum dolor</title>
<meta charset="UTF8" />
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
  <h1>Lorem ipsum dolor</h1>
</div>
<div id="container">
  <p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et pellentesque felis, vitae scelerisque felis. Nulla volutpat mauris ut elementum scelerisque. Donec eu libero felis. Donec posuere erat scelerisque, venenatis nisi eget, consectetur ipsum. Maecenas et purus dolor. Quisque rhoncus leo sed libero sodales feugiat. Donec at risus lorem. Aliquam at mollis sapien. Aenean a volutpat mauris.
  </p>
</div>
<div id="footer">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</body>
</html>

CSS:

body {
    background-color: lightgray;
}
#header {
top:0px;
position:fixed;
background: lightgreen;
width: 100%;
height: 80px;
}
#container {
    padding-top: 100px;
    background-color: lightblue;
}
#footer {
background-color: darkblue;
color: white;
}

Aumente a quantidade de texto para ele rolar.

 

Os seletores são top: 0px e position: fixed que fazem o título ficar no topo.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Java
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito