1. java
  2. android
  3. c#
  4. .net
  5. javascript
  6. php
  7. jquery
  8. html
  9. sql

Como eu estilizo o texto do menu

Boa tarde, estou colocando um menu fixo no meu blog está é a imagem.

inserir a descrição da imagem aqui

Como vocês conseguem observar o texto ao lado do icone home, está sem estilo, como faço para estilizar esse texto deixando ele centralizado e com espaçamento entre eles,mudar a cor da fonte e colocar hover.

O código é esse.

/*---TOP FIXED MENIU BLOGGER --------------*/
#menu_fixo {
width: 100%;
height: 45px;
background-color: #ffa233;
border: 0px;
border-bottom: solid 1px #333;
padding: 0;
margin: 0;
position: fixed;
z-index: 10;
}
#menu_fixo #centro {
width: 880px;
height: 45px;
margin:0 auto;
border: 0px;
padding: 0;
display: block;
position:relative;
}
#menu_fixo #centro li {
text-decoration: none;
display: inline;
float: left;
}
#icone_home {
background-image: url(http://2.bp.blogspot.com/-LkHsu7cfje8/U1UpThxpECI/AAAAAAAAAPc/RMSpYE-raKs/s1600/home.png);
background-repeat: no-repeat;
background-position: center center;
width: 40px;
height: 45px;
border-left: solid 1px #FFF;
border-right: solid 1px #FFF;
margin: 0px;
padding: 0px;
}
#icone_home:hover{
background: #000 url(http://2.bp.blogspot.com/-LkHsu7cfje8/U1UpThxpECI/AAAAAAAAAPc/RMSpYE-raKs/s1600/home.png)no-repeat center center;
}
#social_fixo {
width: 180px;
height: 45px;
border: solid 0px #000;
float: right;
margin: 0;
padding: 0;
display: block;
position: relative;
top: 0px;
}
#icone_facebook {
background-image: url(http://2.bp.blogspot.com/-kOAGPn3Ee_0/U1UpTrO8rLI/AAAAAAAAAPk/7cdUoKYU1W4/s1600/icon_facebook.png);
background-repeat: no-repeat;
background-position: top center;
width: 45px;
height: 45px;
margin: 0px;
padding: 0px;
}
#icone_twitter {
background-image: url(http://4.bp.blogspot.com/-LyeRkpB716w/U1UpUunplPI/AAAAAAAAAP4/zki33yOb9B8/s1600/icon_twitter.png);
background-repeat: no-repeat;
background-position: top center;
width: 45px;
height: 45px;
margin: 0px;
padding: 0px;
}
#icone_gplus {
background-image: url(http://2.bp.blogspot.com/-E7UGiWMmy-4/U1UpTteTpmI/AAAAAAAAAPg/COkFj9AycMM/s1600/icon_google+.png);
background-repeat: no-repeat;
background-position: top center;
width: 45px;
height: 45px;
margin: 0px;
padding: 0px;
}
#icone_youtube {
background-image: url(http://2.bp.blogspot.com/-YJyJLW221zE/U1UpU1Uh2VI/AAAAAAAAAQA/Pi3e-kBwm0c/s1600/icon_youtube.png);
background-repeat: no-repeat;
background-position: top center;
width: 45px;
height: 45px;
margin: 0px;
padding: 0px;
}
#caixa-pesquisa {
width: 400px;
height: 35px;
border: solid 1px #3f3f3f;
margin: 0;
padding: 0;
background-color: #fff;
display: table;
margin-left: 200px;
margin-top: 0px;
float: none;
position: relative;
top: 5px;
}
.campo-pesquisa {
width: 350px;
height: 35px;
border: 0px;
margin: 0;
padding: 0;
margin-left: 5px;
border-style: none;
outline: none;
font-family: arial;
color: #5e5e5e;
}
.botao-pesquisa {
border: solid 0px;
background-image: url(http://3.bp.blogspot.com/-2CosUiZa8Qo/U1UpUa6ryYI/AAAAAAAAAP0/m-e14j6j0x4/s1600/icon_search.jpg);
float: right;
cursor: pointer;
height: 35px;
width: 35px;
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}

Se puder me ajudar eu agradeço.

  • Bom dia, Para estilizar é só você usar as propriedades igual está fazendo ai no css. Existe alguma estilização que você está fazendo e que não está funcionando? Para centralizar, vc utiliza a propriedade margin: 0 auto; Poste tbem o seu HTML, pois para centralizar precisamos identificar dentro de qual container seus elementos estão.

    Joao Paulo Vasconcelos   10 de dez de 2015
  1. Você vai ver essas setas em qualquer página de pergunta. Com elas, você pode dizer se uma pergunta ou uma resposta foram relevantes ou não.
  2. Edite sua pergunta ou resposta caso queira alterar ou adicionar detalhes.
  3. Caso haja alguma dúvida sobre a pergunta, adicione um comentário. O espaço de respostas deve ser utilizado apenas para responder a pergunta.
  4. Se o autor da pergunta marcar uma resposta como solucionada, esta marca aparecerá.
  5. Clique aqui para mais detalhes sobre o funcionamento do GUJ!

1 resposta

Não é a resposta que estava procurando? Procure outras perguntas com as tags css html ou faça a sua própria pergunta.