Menu with the themes

Asked

Viewed 134 times

0

I’m having a little trouble.

I have a menu in html and css and I want to put it this way.

Text - text - Logo - text - text

Html:

 <div id="nav">
        <ul>        
            <li><span class="Email" ></span><a href="#"> EMail </a></li>
            <li><span class="Contactos" ></span><a href="#"> Contactos </a></li>
            <li><a href="#"> Multimedia </a></li>
            <li><a href="#"> Documentos </a></li>
        </ul>
    </div>

CSS:

 #nav { Width: 100%; background:#CCC; Margin:0px; Float:left;}
 #nav ul { margin: 0; padding: 0; list-style: none; width:100%; float:left; }
 #nav ul li { float: left; Font: 16px arial; }
 #nav ul li a { color:#888; text-decoration:none; padding:20px; display:block; }
 #nav ul li:hover {background: #666}
 #nav ul li .Email { background: url(image/1-email.png) no-repeat center; float: left; width: 100%; padding: 30px 0; margin-bottom: 15px; }
 #nav ul li .Contactos { background: url(image/2-contactos.png) no-repeat center; float: left; width: 100%; padding: 30px 0; margin-bottom: 15px; }
 #nav ul li .Multimedia { background: url(); float: left; width: 100%; }
 #nav ul li .Documentos { background: url(); float: left; width: 100%; }

How can I put the text Multimedia and Documents to the right side because I need space between the texts to put soon.

http://jsfiddle.net/w27La83z/

html css

  • Put your code to http:/jsfiddle.net/ and edit your POST, so we can help you better.

  • Thanks, I didn’t remember that detail . I’ve updated my question with jsfiddle

3 answers

2


Hello!

Try to do so:

#nav { width: 100%; background:#CCC; margin:0px; Float:left;}
#nav ul { margin: 0; padding: 0; list-style: none; width:100%; float:left; height: 65px }
#nav ul li { float: left; font: 16px arial; width: 20%; line-height: 65px;}
#nav ul li.logo > img {padding-left: 40px}
#nav ul li a { color:#888; text-decoration:none; display:block; height: 100%; background: no-repeat 5px center; padding-left: 40px;}
#nav ul li.email a {background-image: url(https://cdn0.iconfinder.com/data/icons/20-web2_0-icons-pencil/24/gmail-pencil.png); }

#nav ul li.contactos a {background-image: url(https://cdn1.iconfinder.com/data/icons/Futurosoft%20Icons%200.5.2/32x32/actions/kontact_contacts.png); }

#nav ul li.multimidia a {background-image: url(https://cdn3.iconfinder.com/data/icons/tango-icon-library/48/audio-x-generic-24.png); }

#nav ul li.documentos a {background-image: url(https://cdn1.iconfinder.com/data/icons/hawcons/32/698381-icon-72-documents-24.png); }

#nav ul li img {width: 64px; height: 64px;}
#nav ul li:hover a {background-color: #666; color: #fff;}
<div id="nav">
  <ul>        
    <li class="email"><a href="#"> E-mail </a></li>
    <li class="contactos"><a href="#"> Contatos </a></li>
    <li class="logo"><img src="https://cdn2.iconfinder.com/data/icons/social-media-8/128/Chrome.png"/></li>
    <li class="multimidia"><a href="#"> Multimídia </a></li>
    <li class="documentos"><a href="#"> Documentos </a></li>
  </ul>
</div>

UPDATE

I inserted images in the links.

  • You can control the size of the buttons ?

  • As in 'control the size of buttons', I did not understand =)?

  • You see when we pass the mouse over the email for example? the size of that rectangle. I put some icons over the email and contacts but they are gone.

  • I updated my responsta, @Chrisadler. That would be it?

  • Yes, to use padding how can I call the text and image at the same time? I used padding and only move the image

  • @Chrisadler, you can apply the padding in his li. Remembering that the width of the li is relative, so it is interesting that the padding also relative. For no breaks, the ideal is to sum the values of the width attribute with that of the attribute padding must be equal to the current width of the li. Simplifying, currently the li has a 20% width if you want a padding of 2%, the width of the li should be 18%

  • and can you move to the position I want by placing the values? Or just gives even that way?

  • You say you use absolute values, @Chrisadler? da yes, it is completely possible. If you want, I edit my answer and leave the menu with absolute values so you have a better idea.

  • If you can explain to me, I’d appreciate it.

  • Exchange measures and % for px, for example.

  • I’ve got it all under control. Thanks. Just one last thing. Can I edit the size of the Hover? When I pass the mouse over it gets a very large rectangle

  • http://jsfiddle.net/p9urLq0h/ can explain to me why grey is not on top?

  • I don’t understand your question.

  • See the gray bar where the menu is? I can’t pull it up. After the other doubt is regarding when passing the mouse over the emails for example gets a very large rectangle cizento darker

Show 9 more comments

1

There are several ways to do this, I would do so,

 <ul id="esquerda">        
        <li><a href="#">email</a></li>
        <li><a href="#">contactos</a></li>
</ul>

<div id="logo"> Logo</div>

        <ul id="direita">
            <li><a href="#">multimedia</a></li>
            <li><a href="#">documentos</a></li>
    </ul>
</div>

And the CSS:

#nav{
width:100%;
height:100px;
border:1px solid red;
}
#esquerda{
list-style:none;
float:left;
width:30%;
}
#logo{
float:left;
width:30%;
height:100px;
border:1px solid red;
}
#direita{
float:left;
width:30%;
}

1

Just like the guy said, there are several ways to do it

HTML:

<div id="nav">
        <ul>        
            <li><span class="Email" ></span><a href="#"> EMail </a></li>
            <li><span class="Contactos" ></span><a href="#"> Contactos </a></li>
            <img src="http://placehold.it/200x100"/>
            <li><a href="#"> Multimedia </a></li>
            <li><a href="#"> Documentos </a></li>
        </ul>
    </div>

CSS:

#nav { Width: 100%; background:#CCC; Margin:0px; Float:left; display:inline-flex;}
#nav ul { margin: 0; padding: 0; list-style: none; width:100%; display:inline-flex; }
#nav ul li { float: left; Font: 16px arial; }
#nav ul li a { color:#888; text-decoration:none; padding:20px; display:block; }
#nav ul li:hover {background: #666}
#nav ul li .Webmail { background: url(image/1-email.png) no-repeat center;  width: 100%; padding: 30px 0; margin-bottom: 15px; }
#nav ul li .Contactos { background: url(image/2-contactos.png) no-repeat center;  width: 100%; padding: 30px 0; margin-bottom: 15px; }
#nav ul li .Multimedia { background: url(); float: left; width: 100%; }
#nav ul li .Documentos { background: url(); float: left; width: 100%; }

Fiddle: http://jsfiddle.net/w27La83z/3/

  • Thanks, Can you put the size of the buttons smaller? And the image I have in Webmail and contacts no longer appear

Browser other questions tagged html css

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