Ir para conteúdo

POWERED BY:

Arquivado

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

Guilherme Wathier

[Resolvido] Alinhamento de elemento

Por , em Desenvolvimento frontend

Recommended Posts

Guilherme Wathier    1

Guilherme Wathier
Postado

Galera eu estou fazendo um projeto aqui mais não estou conseguindo alinhar um elemento. São os botões de redes sociais que não consigo alinhar, logo abaixo segue a parte que não consigo alinhar, o html e o css.

 

PARTE QUE NÃO CONSIGO ALINHAR:

<li class="midiasb" style="margin-left:200px;"><a href="#" style="color:#069; font-weight:bold; font-family:'Arial', Helvetica, sans-serif;">t</a></li>
<li class="midiasb"><a href="#" style="color:#069; font-weight:bold;">f</a></li>
<li class="midiasb"><a href="#" style="color:#069; font-weight:bold;">g</a></li>
<li class="midiasb"><a href="#" style="color:#069; font-weight:bold;">l</a></li>

 

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>

<div id="header_topo">	
<nav id="topo_menuc"><ul>
<div class="espaco">
<li><a href="#">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>

<li class="midiasb" style="margin-left:200px;"><a href="#" style="color:#069; font-weight:bold; font-family:'Arial', Helvetica, sans-serif;">t</a></li>
<li class="midiasb"><a href="#" style="color:#069; font-weight:bold;">f</a></li>
<li class="midiasb"><a href="#" style="color:#069; font-weight:bold;">g</a></li>
<li class="midiasb"><a href="#" style="color:#069; font-weight:bold;">l</a></li>
</div></ul></nav></div>
</body>
</html>

 

CSS:

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

#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; margin:0 2px; 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', Helvetica, sans-serif; height:20px; vertical-align:middle; float:left; padding:0 4px; padding:10px 8px 6px; color:#fff;}
#topo_menuc ul li:hover ul{display:block;}
#topo_menuc ul li a:hover{visibility:inherit;}
.midiasb{background:#272727; text-align:center; width:30px;}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Dian Carlos    29

Dian Carlos
Postado

em vez de lista por lista <li> tente por div, ou span.

 

<div class="midiasb" style="margin-left:200px;"><a href="#" style="color:#069; font-weight:bold; font-family:'Arial', Helvetica, sans-serif;">t</a></div>
<div class="midiasb"><a href="#" style="color:#069; font-weight:bold;">f</a></div>
<div class="midiasb"><a href="#" style="color:#069; font-weight:bold;">g</a></div>
<div class="midiasb"><a href="#" style="color:#069; font-weight:bold;">l</a></div>

 

Não tenho certeza, mas acho que a lista sempre é um em baixo do outro.. nunca passei por essa situação...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado
em vez de lista por lista <li> tente por div, ou span.

Não, não faça issso. Use marcação semântica sempre que possível, como está fazendo.

 

Você tem um link aí para visualizarmos o problema, ou mesmo um print???

Assim no chute fica difícil...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marcos Xavier    189

Marcos Xavier
Postado

Se for para deixar na mesma linha use:

/*css*/
.midiasb{display :inline;}

Mas já que você está usando a tag <nav> (HTML5),seria sensato deixar o html nessa estrutura:

 

<a href="#" style="margin-left:100px;color:#069; font-weight:bold; font-family:'Arial', Helvetica, sans-serif;">t</a></li>
<a href="#" style="color:#069; font-weight:bold;">f</a>
<a href="#" style="color:#069; font-weight:bold;">g</a>
<a href="#" style="color:#069; font-weight:bold;">l</a>

 

Porém observe no código abaixo(código redundante):

 

style="color:#069; font-weight:bold;"

 

Seria também legal você criar uma classe para os elementos <a> descritos no exemplo e na folha de estilos

referenciá-los:

Ex:

<a class="nomedaclasse" href="#" >f</a>
<a class="nomedaclasse" href="#">g</a>
<a class="nomedaclasse" href="#" >l</a>

/*CSS*/
.nomedaclasse{color:#069; font-weight:bold;}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Wathier    1

Guilherme Wathier
Postado

consegui resolver o problema do alinhamento vlw. Marcos eu adicionei a classe e apliquei o estilo, mais eu não estou entendendo por que não ta dando para colocar em um estilo externo só inline, se puder me ajudar agradeço.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

tem alguns erros de html. você não poderia ter essa DIV ai:

<ul>
<div class="espaco">
<li><a href="#">home</a></li>

 

sempre valide a tua marcação.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marcos Xavier    189

Marcos Xavier
Postado

consegui resolver o problema do alinhamento vlw. Marcos eu adicionei a classe e apliquei o estilo, mais eu não estou entendendo por que não ta dando para colocar em um estilo externo só inline, se puder me ajudar agradeço.

 

Para referenciar o arquivo coloque entre as tags head :

 

<link rel="stylesheet" type="text/css" href="caminho/nomedoarquivo.css" />

 

Ou então no próprio html,como segue:

 

<style type="text/css">
.nomedaclasse{color:#069; font-weight:bold;}
</style>

 

 

Porém não muito aconselhável,até mesmo por questões de organização e desempenho dá página.

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