Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Guilherme Wathier

[Resolvido] Alinhamento de menu

Por , em Desenvolvimento frontend

Recommended Posts

Guilherme Wathier    1

Guilherme Wathier
Postado

Galera eu criei um menu mais não consigo colocar ele totalmente a direita como ta as box de cima, eu acho que quando eu coloco float:right; ele não vai para a direita porque a box de cima ta atrapalhando.

 

IMAGEM:

v2xl7c.png

 

Index.html:

<!DOCTYPE html><!--[if IE 6]><html id="ie6" dir="ltr" lang="pt-BR"><![endif]-->
<!--[if IE 7]><html id="ie7" dir="ltr" lang="pt-BR"><![endif]-->
<!--[if IE 8]><html id="ie8" dir="ltr" lang="pt-BR"><![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8)]><!--><html dir="ltr" lang="pt-BR"><!--<![endif]-->
<head><title>Layout para Meu Meta Blog!</title><link rel="stylesheet" href="estilo.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<link rel="alternate" type="application/rss+xml" title="Suporte Blogger RSS" href="http://feeds.feedburner.com/titulodofeed" />
<meta name="author" content="Guilherme Wathier" />
<link rel="canonical" href="http://www.suporteblogger.com/" />
<link rel="next" href="http://www.suporteblogger.com/page/2" />
</head>	
<body>
<!-- TOPO ANTES DO HEADER -->
<div id="header_topo">
<div class="espaco">
<nav id="topo_menuc"><ul>
<li><a href="#" style="background:#272727;">home</a></li>
<li><a href="#">sobre</a></li>
<li><a href="#">contato</a></li>
<li><a href="#">tutoriais</a></li>
<li><a href="#">ferramentas</a></li>

<div class="midiasb">
<li><a href="#">t</a></li>
<li><a href="#">f</a></li>
<li><a href="#">g</a></li>
<li><a href="#">l</a></li>
</div></div></ul></nav></div>
<!-- FECHA TOPO ANTES DO HEADER -->

<!-- HEADER -->
<div id="header">
<div class="espaco">

<div class="banner">
<img src="" />
</div>

<div class="busca">
</div>

<div id="box_topo">
</div>
<div id="header_menu"><ul>
<li><a href="#">ferramentas</a></li>
<li><a href="#">tutoriais</a></li>
<li><a href="#">contato</a></li>
<li><a href="#">sobre</a></li>
<li><a href="#" style="background:#004466;">home</a></li>
</div></ul>
</div>
</div>
</div>
<!-- FIM HEADER -->
</body>
</html>

 

style.css:

/*
Theme Name: Suporte Blogger
Theme URI: http://suporteblogger.com/
Description: Tema criado para o blog SuporteBlogger.
Author: Guilherme Wathier
Version: 1.0
Tags: blue, 2 colums
*/

*{margin:0; padding:0;}
body{background:#f3f3f3;}
.espaco{width:1000px; margin:0 auto; position:relative;}

/* TOPO ANTES DO HEADER */
#header_topo{height:36px; background:#333; border-bottom:1px solid #000; z-index:2; position:relative;}

#topo_menuc ul{height:50px;}
#topo_menuc ul li{float:left; position:relative; list-style:none;}
#topo_menuc ul li:hover{visibility:inherit; /* Bug IE7*/ background:#272727;}
#topo_menuc ul li a{text-decoration:none; font:14px "arial"; height:20px; vertical-align:middle; float:left; padding:10px 10px 6px; color:#fff;}
#topo_menuc ul li:hover ul{display:block;}
#topo_menuc ul li a:hover{visibility:inherit;}

.midiasb{display:inline; float:left; margin-left:150px;}
.midiasb li{margin:0 2px; background:#272727;}
.midiasb li a:hover{background:#191919;}
/* FECHA TOPO ANTES DO HEADER */

/* HEADER */
.banner{float:left;}

#header{height:150px; background:#069; border-bottom:1px solid #333; z-index:3; position:relative;}
#box_topo{width:230px; height:50px; background:#333; border-bottom:1px solid #000; border-right:1px solid #000; border-left:1px solid #000; float:right; position:relative; top:-1px; z-index:4;}

#header_menu{height:50px;}
#header_menu ul li{float:right;  background:#00527a; margin-top:114px; position:relative; list-style:none;}
#header_menu ul li:hover{visibility:inherit; /* BUG IE7 */ background:#004466;}
#header_menu ul li a{text-decoration:none; font:14px "arial"; height:20px; vertical-align:middle; float:right; padding:10px 10px 6px; color:#fff;}
#header_menu ul li:hover ul{display:block;}
#header_menu ul li a:hover{visibility:inherit;}
/* FIM HEADER */

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marco Bruno    19

Marco Bruno
Postado

Boa noite, Guilherme Wathier.

 

Recomendo primeiro você validar seu HTML (http://validator.w3.org/).

 

Seu "#header_menu" só precisa flutuar a direita, segue exemplo abaixo:

 

#header_menu{ height:50px; float: right;}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Wathier    1

Guilherme Wathier
Postado

Marco Bruno,

 

Olha o que da quando eu dou um float:right dentro do #header_menu:

 

29wtyt3.png

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Wathier    1

Guilherme Wathier
Postado

Sim, mais o erro continua...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Wathier    1

Guilherme Wathier
Postado

Muito obrigado pela ajuda, mais eu consegui resolver, eu só coloquei um float:right no header_menu e no header_menu ul li e coloquei uma div class dentro do html, ai foi certinhu.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito