I can’t style and center the menu text

Asked

Viewed 364 times

-1

Good afternoon, I’m putting a fixed menu on my blog, this is the image.

inserir a descrição da imagem aqui

The text next to the icon home is without style, as I do to style this text leaving it centered and spacing between them, change the font color and put hover?

The code is this.

/*---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;
}

Code html:

<div id="menu_fixo">
    <div id="centro">
        <li><a href="LINKDOBLOG"><div id="icone_home"></div></a></li>
        <li><a href=' /'>Sobre</a></li>
        <li><a href=' /'>loja virtual</a></li>
        <li><a href=' /'>Contato</a></li>
    </div>
</div>

If you can help me I appreciate.

html css
  • 3

    Puts HTML to know which class is being applied to it.

  • @I don’t understand because I don’t know much about codes.

  • To change the CSS of some tag you need to change the CSS class that is being applied to that tag, if it were a div it would be like <div class="minhaclassecss" />. Then we need to know which class is being applied to the tag you want to change

  • I put it like this: <div id="menu_fixo"> <div id="centro"> <li><a href="LINKDOBLOG"><div id="icone_home"></div></a></li><li><a href=' /'>About</a>/li> <li><a href=' /'>a virtual shop</a></li> <li><a href=' /'>Contact</a><</li/li>

  • Put it there in the question, the to format, just have edit the question.

  • Ready @Ricardo thank you!!!

Show 1 more comment

1 answer

1


Well come on.

Before centering the text, let’s create the spacing between them. For this you can use the property padding, it will create an internal space, that is, within a space within itself li. The value is up to you, but the code would be like this:

#menu_fixo #centro li {
    text-decoration: none;
    display: inline;
    float: left;

    /* - código adicionado - */
    padding: 0 10px 0 10px; //valores: cima - direita - baixo - esquerda
}

For the whole text to be centered, horizontally and vertically, you can use both the property text-align:center that will center horizontally, like the property vertical-align:middle which, using near the property line:height, will center it vertically. See:

#menu_fixo #centro li {
    text-decoration: none;
    display: inline;
    float: left;
    padding: 0 10px 0 10px; //valores: cima - direita - baixo - esquerda

    /* - código adicionado - */
    height:45px; //valor da altura do seu menu;
    line-height:45px; //mesmo valor, para que mantenha dentro da div
    vertical-align:middle; //para centralizar verticalmente
    text-align:center; //para centralizar horizontalemnte
}

Now, if you want an effect of :hover, just apply the properties within it, as follows:

#menu_fixo #centro li:hover {
    //Seu código de manipulação aqui
}

See this example with your code already working: http://jsfiddle.net/k5L0gk7z/1/

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.