Ir para conteúdo
Fórum Script Brasil
  • 0

Menu superior no blogger


.tsuki

Pergunta

Oii gente! *-*'''''

Eu sou a Tsuki, e eu queria a ajuda de vocês para uma coisa no meu blog. (:

http://noronhafotografia.blogspot.com <<----------------

Bom, o sistema é do blogger, xhtml, e tudo... O problema é o seguinte:

No menu superior eu coloquei ícones sociais (orkut, twitter e facebook). No firefox aparece tudo lindo e direitinho, mas no internet explorer fica um embaixo do outro, formando desorganização e desalinhamento repulsivos >.<

O pior é que apesar de 46% das pessoas visitarem o blog pelo firefox, 36% visitam pelo IE x__x

Bom, eu sei que a leitura no IE é diferente do Firefox, o que muda BASTAAANTE coisa... Mas não teria como eu ajeitar o código de forma que a leitura permaneça a mesma??

O código do topmenu é esse:

/*-- (Menú) --*/

#topmenu {

margin-top:10px;

width:600px;

z-index:5;

text-align:left

float:left;

}

#topmenu a:link, #topmenu a:visited {

color:#fefed7;

}

#topmenu a:hover {

text-decoration:none;

}

#topmenu ul {

list-style-image:none;

list-style-position:outside;

list-style-type:none;

margin:5pt 0pt 0pt 290px;

padding:0pt;

text-align:left;

}

#topmenu ul li a:link, #topmenu ul li a:visited {

border-bottom:2px solid #fce382;

display:block;

font-size:11px;

line-height:11px;

margin:0pt 5px 0pt 0pt;

padding:5px 15px 2px 5px;

text-transform:uppercase;

text-align:left;

}

#topmenu ul li a:hover {

border-bottom:2px solid #fefed7;

text-align:left;

}

#topmenu ul li {

display:auto;

position:relative;

float:left;

}

E o código do menu em si é esse:

<div float='left'>

<div id='topmenu'>

<ul>

<li class=''><a href='http://noronhafotografia.blogspot.com'>Home</a></li>

<li class=''><a href='http://noronhafotografia.blogspot.com/p/biografia.html'>Biografias</a></li>

<li class=''><a href='http://noronhafotografia.blogspot.com/p/arquivos.html'>Arquivos</a></li>

<li class=''><a href='http://noronhafotografia.blogspot.com/p/portfolio.html'>Portfolio</a></li>

<li class=''><a href='http://noronhafotografia.blogspot.com/p/contato.html'>Contato</a></li>

<a href='http://www.twitter.com/StudioNoronha'><img alt='Twitter' border='0' src='http://tweetvalue.com/images/buttons/016.png'/></a> • <a href='http://www.orkut.com.br/Main#Profile?uid=7222213222591656409'><img alt='Orkut' border='0' src='http://www.abcp.org.br/css/imagens/icon-orkut.gif'/></a> • <a href='http://www.facebook.com/profile.php?id=100001270161253'><img alt='Facebook' border='0' src='http://www.directlabs.com.br/wp-content/uploads/2009/02/icon.facebook.png'/></a>

</ul>

</div>

</div>

</div>

Desde já, agradeço e muito!!! >.< Mas se tiver alguém que me ajude, eu vou agradecer mais /aushaushaushaush;

Editado por .tsuki
Link para o comentário
Compartilhar em outros sites

7 respostass a esta questão

Posts Recomendados

  • 0

Hoje é dia de jogo e ta meio corrido aqui no trampo mas tenta fazer assim

De uma classe para todos os links

<a class="redes" href="link"></a>
depois na classe dele faça assim:
a.redes{
display: inline;
}
se não der certo tenta no topmenu
#topmenu{
display: inline;
}

se não der certo posta ae que depois eu tento :P

Link para o comentário
Compartilhar em outros sites

  • 0

Geeeeente, seguinte:

@Thelon

Eu tentei fazer das duas formas, acredite, não deu ^^"""

Eu realmente acho que coloquei certo, fiz da maneira que você disse, depois tentei criar uma classe só pra ele, mas não deu mesmo!

Enfim, se tiver mais alguma coisa >.<

@*FIT*

O float já tá "left", e não adianta... Mas é que mexer no float é problema! O negócio desconfigura tudo... Foi um dos maiores problemas no meu layout...Enfim, brigada pela ajuda!! Alguma coisa a mais?

Embora não tenha resolvido, MUITO Obrigada, Thelon e *FIT* ^^

aushauhsuahsa, alguém mais se dispõe a encarar o desafio do Internet Explorer? XD

Link para o comentário
Compartilhar em outros sites

  • 0

tsuki, ta vendo q esses botoes do twitter e orkut, tão dentro da tag a q esta dentro do ul??

então, ponha cada uma dessas tags a dentro de uma li.

assim:

<li><a class='redes' href='http://www.twitter.com/StudioNoronha'><img alt='Twitter' border='0' src='http://tweetvalue.com/images/buttons/016.png'/></a> •</li>
<li><a class='redes' href='http://www.orkut.com.br/Main#Profile?uid=7222213222591656409'><img alt='Orkut' border='0' src='http://www.abcp.org.br/css/imagens/icon-orkut.gif'/></a> •</li>
<li><a class='redes' href='http://www.facebook.com/profile.php?id=100001270161253'><img alt='Facebook' border='0' src='http://www.directlabs.com.br/wp-content/uploads/2009/02/icon.facebook.png'/></a></li>[/code]

depois, no seu css (use esse css q você postou ai. se você alterou qualquer coisa no seu css atual, pegue esse q esta no seu post e cole no lugar do q você alterou), adicione float: left; dentro de #topmenu ul li a:link, #topmenu ul li a:visited.

e ai o seu layout deve ficar certinho.

so q os botoes vao ficar com sublinhado embaxo. se você não quer, pra tirar, você pode por uma css inline dentro dos links (tag a) de cada botao com border-bottom: 0; ou ainda você pudia criar duas classes de links (o q acho q seria melhor, apesar de dar mais trabalho), uma pros links em texto e outras pros botoes, e aplicar pras tags dos links, veja ai.

Link para o comentário
Compartilhar em outros sites

  • 0

@kuroi

Deu nãããoo x.x"" Muito obrigada, kuroi, mas eu realmente tentei e não consegui ;P

Eu não sei se to fazendo algo errado, então me diz onde exatamente eu devo colocar a class, e de que jeito eu coloco?

Brigada >.< E desculpa por dar tanto trabalho!

Link para o comentário
Compartilhar em outros sites

  • 0

tsuki, tava olhando o seu codigo atual no site e uma coisa q eu vi la é q você pos os pontinhos q separam os botoes (& #8226;) pra fora da li. e não pode, entenda q nd pode ficar diretamente dentro de uma ul, a não ser a li.

ul significa "lista desordenada" (acho). e cada li é um item dessa lista. tudo o q for dentro da ul tem q fazer parte do item (li), não pode ter nenhum texto, nem mesmo uma outra tag jogada em qualquer lugar la dentro. é o mesmo q você querer por qualquer coisa entre duas celulas de uma tabela (entre dois td).

quanto a parte do sublinhado, faca o seguinte. tire o border-bottom q esta dentro de #topmenu ul li a:link, #topmenu ul li a:visited. e em vez disso, passe a borda para as classes q você for criar.

ficaria assim:

#topmenu ul li a:link, #topmenu ul li a:visited {
display:inline;
font-size:11px;
line-height:11px;
margin:0pt 5px 0pt 0pt;
padding:5px 15px 2px 5px;
text-transform:uppercase;
text-align:left;
float:left;
}
.classe_para_links {
border-bottom: 2px solid #fce382;
}
.classe_para_botoes {
border-bottom: 0;
}[/code] na verdade, nem ia precisar mais do border-bottom: 0; pros botoes já q não tamos mais setando a borda no a. mas vamos dexar a classe dos botoes definidas, pra você entender como funciona e tb pra caso for necessario mexer mais alguma coisa. e tb temos q corrigir o hover. nessa parte:
[code]#topmenu ul li a:hover {
border-bottom:2px solid #fefed7;
text-align:left;
}
troque #topmenu ul li a:hover por .classe_para_links:hover e você tb pudia tirar o text-align q não ta servindo pra nd (já aparece pra quando tiver sem hover, então vai continuar valendo pra quando tiver em hover). agora pra setar as classes, é só você adiciona-las nas tags a. exemplo, para os links:
<li><a class='classe_para_links' href='http://noronhafotografia.blogspot.com'>Home</a></li>
e para os botoes:
<li><a class='classe_para_botoes' href='http://www.twitter.com/StudioNoronha'><img alt='Twitter' border='0' src='http://tweetvalue.com/images/buttons/016.png'/></a> •</li>

tenta agora ai.

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,2k
×
×
  • Criar Novo...