Logo ao lado menu

Johnnyvip · Julho 7, 2016

Olá estou com um problema quero colocar o logo ao lado do menu que eu fiz mas não consigo, alguém poderia me passar algum código ?

HTML

<!DOCTYPE html>
<html lang="pt">
<head>
     <meta charset="UTF-8">
	<title>Menu Johgle</title>
	<link rel="stylesheet" type="text/css" href="https://necolas.github.io/normalize.css/4.1.1/normalize.css">
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<link rel="stylesheet" href="https://i.icomoon.io/public/temp/5ddb4af4c7/UntitledProject/style.css">
	<style type="text/css">
	@import url("estilos.css");
    </style>
</head>
<Backgroundtecnology>
<header>



 <nav>

 


     <ul class="menu">


     	<li><a href="#"><span class="icon-home3"></span></a></li>
     	<li><a href="#">Notícias</a></li>
     	<li><a href="#">Serviços</a></li>
     	<li><a href="#">Programas</a></li>
     	<li><a href="#">Tutorias&Dicas</a></li>
     	<li><a href="#">Youtube</a></li>
     	<li><a href="#">Jogos</a></li>
     	<li><a href="#">Empresa</a></li>
     	<li><a href="#">Contato</a></li>


     </ul>


     <div class="search_bar">
     <a href="#" class="icon-search"></a>

     <input type="text" id="bar">
</div>


</nav>

</header>


    <div class="logo"></div>
</div>


<script src="busqueda.js"></script>
</body>
</html>

Estilos

* {
	margin:0;
	padding:0;
}

ul, ol {
    list-style: none;
}

header {
	width: 100%;
}




nav {



	width: 1000px;
	margin:0px auto;
	overflow:hidden;
	border-radius:4px;
	border-bottom:1px solid #555555;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4c4c4c+0,595959+12,666666+25,474747+39,2c2c2c+50,000000+51,111111+60,2b2b2b+76,1c1c1c+91,131313+100;Black+Gloss+%231 */
background: rgb(76,76,76); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */


}


body{background-image: url('Backgroundtecnology.png');background-attachment:fixed;background-repeat:no-repeat;background-position:center center;}



.menu {
   width:85%;
   display:table;
   table-layout:fixed;
   float:left;
   transition:all .5s ease;
   
}

.menu li {
    display:table-cell;
    overflow:hidden;
    width:100%;
    border-right:1px solid #35a2d2;
    border-left:1px solid rgba(255,255,255,.2); 

}

.menu li:first-child {
	  border-left:none;
}

.menu li:first-child:hover {
	  border-left:none;

	 }

	 .menu li a {
	 	color:#fff;
	 	display:block;
	 	font-family:"Myriad Pro", Arial;
	 	font-size:14px;
	 	padding:10px 0;
	 	text-align:center;
	 	text-decoration:none;
	 	text-shadow:1px 1px 0px rgba(0,0,0.3); 
	 }

	 .menu li:hover {

	 	background:rgba(0,0,0,.3);
	 	border-right:1px solid transparent; 
	 	border-left:1px solid transparent; 
	 	border-bottom:none;
	 }

.menu li:active {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b5bdc8+0,828c95+36,28343b+100;Grey+Black+3D */
background: rgb(181,189,200); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(181,189,200,1) 0%, rgba(130,140,149,1) 36%, rgba(40,52,59,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); /* IE6-9 */

box-shadow:inset 0px 3px 2px rgba (0,0,0,1); 

}

	 .search_bar {

	 	   width:15%;
	 	   float:left;
	 	   padding:7px 10px;
	 	   box-sizing:border-box;
	 	   position: relative;
	 	   transition:all .5s ease;
	 }

.search_bar input	{
  width:100%;
  height:auto;
  border-radius:50px;
  border:none;
  border-bottom:1px solid #858585;
  padding:0px 10px 0px 25px;
  box-sizing: border-box;
  height: 22px;

  box-shadow:inset 0px 1px 3px rgba(0,0,0,.7); 

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#aebcbf+0,6e7774+50,0a0e0a+51,0a0809+100;Black+Gloss */
background: rgb(174,188,191); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(174,188,191,1) 0%, rgba(110,119,116,1) 50%, rgba(10,14,10,1) 51%, rgba(10,8,9,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(174,188,191,1) 0%,rgba(110,119,116,1) 50%,rgba(10,14,10,1) 51%,rgba(10,8,9,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(174,188,191,1) 0%,rgba(110,119,116,1) 50%,rgba(10,14,10,1) 51%,rgba(10,8,9,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809',GradientType=0 ); /* IE6-9 */




}

.search_bar input:focus {
  background: #fff;
  box-shadow:none;
}

.icon-house {
	 display:block;
	 position:relative;
	 top: 2px;
}

.icon-search {
 position:absolute;
 bottom:10px;
 left:15px;
 color:#fff;
 text-decoration:none;

}

{
  margin: 0;
  padding: 0;
  font-family: 'Lato', sans-serif;
}

#content-container div#content {
    margin-top: 120px !important;
}
#logo img {
    width: 365px !important;
}
#page-header .headerbar {
    background: url("http://i71.servimg.com/u/f71/17/71/75/73/sem_t142.png") repeat scroll left bottom transparent !important;
    left: -10px !important;
    margin-bottom: 0px !important;
    position: absolute !important;
    top: 0px !important;
    right: 0px !important;
    height: 93px !important;
    border-bottom: 2px solid #000 !important;
}
#page-header .navbar {
    background: none repeat scroll 0% 0% transparent !important;
    padding: 0px !important;
    position: absolute !important;
    right: 30px !important;
    top: 30px !important;
}

RoXbY · Julho 8, 2016

mano do céu, dá uma olhada no wwwgetbootstrap.com que vai facilitar sua vida.

L. Henrique · Julho 8, 2016

mano do céu, dá uma olhada no wwwgetbootstrap.com que vai facilitar sua vida.

Não depender do Bootstrap já o faz ganhar mais conhecimento do que muitos "desenvolvedores" que existem hoje no mercado e se prostituem por qualquer valor.

----------------------------------------------------------------

Johnny,

Você pode adicionar o seu logo dentro da sua lista <ul><li> mesmo, depois só vai precisar adicionar algumas propriedades para que os textos permaneçam alinhados, nada complicado.

Veja esse teste que fiz com o seu próprio código: DEMO.

Lembrando que você pode alterar o fundo onde está o logo utilizando elementos como :first-child.

Abraços!

Johnnyvip · Julho 9, 2016

Não depender do Bootstrap já o faz ganhar mais conhecimento do que muitos "desenvolvedores" que existem hoje no mercado e se prostituem por qualquer valor.

----------------------------------------------------------------

Johnny,

Você pode adicionar o seu logo dentro da sua lista <ul><li> mesmo, depois só vai precisar adicionar algumas propriedades para que os textos permaneçam alinhados, nada complicado.

Veja esse teste que fiz com o seu próprio código: DEMO.

Lembrando que você pode alterar o fundo onde está o logo utilizando elementos como :first-child.

Abraços!

Muito Obrigado

L. Henrique

resolveu todos os problemas, pesquisei na net inteira e não achei você me ajudou muito

Abraços.

Entrar

Arquivado

Logo ao lado menu

Recommended Posts

Johnnyvip 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

RoXbY 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

L. Henrique 179

Compartilhar este post

Link para o post

Compartilhar em outros sites

Johnnyvip 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Consulta SQL dentro de outra consulta

Data igual do facebook

Fazer busca no Banco de dados usando vários critério

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante