Menu superior no blogger

[.tsuki]

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 Julho 2, 2010 por .tsuki

[Thelon]

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

[*FIT*]

Se isso que o Thelon disse não resolver, tenta jogar um float: left nas imagens, ou no "#topmenu ul".

[Thelon]

Só para completar o que eu esqueci. hehehe

O IE interpleta algumas vezes uma margem dupla que acaba causando esse problema

com o diplay: inline; você remove essa margem a mais.

[.tsuki]

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

[kuroi]

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.

[.tsuki]

@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!

[kuroi]

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.