Menu with themes

Navigation
0

I'm having a little difficulty.

I have a menu in html and css and I want to put it as follows.

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 Multimedia and Documents text to the right side because I need space between the texts to be placed soon.

link

    
asked by anonymous 10.11.2014 / 18:21

3 answers

2

Hello

Try to do this: 

#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><liclass="multimidia"><a href="#"> Multimídia </a></li>
    <li class="documentos"><a href="#"> Documentos </a></li>
  </ul>
</div>

UPDATE

I inserted images in the links.

    
10.11.2014 / 18:46
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%;
}
    
10.11.2014 / 18:40
1

As 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><ahref="#"> 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: link

    
10.11.2014 / 18:43
Loop to repeat previous keys (3, 32, 321, ...) Doubt as to Request.Form