Problema com interface

Cora Coralina · 24 de abril de 2013

Olá pessoal,

Não consigo resolver um problema de posicionamento de botão na interface.

Gostaria de poder colocar o botão "f" ao lado do menu "contato". Não consegui... O que será que há de errado com o código?

Estou enviando a imagem dessa parte do site.

Obrigada!

DiF · 25 de abril de 2013

Olá Cora,

não vi seu código, mas se você fez seu menu com UL e LI, você pode colocar mais uma LI com o botão.. assim ficaria lado a lado.

Cora Coralina · 27 de abril de 2013

Dif,

no códigos o botão e já estava com ul e li... e a interface ficou do jeito q eu mandei na imagem... o "f" embaixo do menu...

não entendo porque fica assim...

Obrigada

Cora

Mog.Lucas · 29 de abril de 2013

Experimente alterar o display desse elemento para inline-block e/ou mudar o vertical-align dessa imagem..

Cora Coralina · 30 de abril de 2013

Pessoal,

Não funciona... nem com display: inline-block, nem mudando o vertical-align...Posso deixar o código html e css? Não está funcionando mesmo... Não sei se foi um erro estrutural do código... Pode ser que esteja bem na minha frente... mas não identifico...

HTML


<!DOCTYPE HTML>

<html>


<head>
<meta charset="UTF-8">

<link rel=StyleSheet href="css/layout.css" type="text/css" media="all">


<!--[if lte IE 6]>
 <link rel=StyleSheet href="layout_ie6.css" type="text/css" media="all">
 </style>
 <![endif]-->

<!--[if IE 7]>
 <link rel=StyleSheet href="layout_ie7.css" type="text/css" media="all">
<![endif]-->


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.mim.js"></script>
<script type="text/javascript">// <![CDATA[
$('a[href^="#"]').bind('click.smoothscroll',function (e) {
	    e.preventDefault();
	    var target = this.hash,
	    $target = $(target);

	    $('html, body').stop().animate({
	        'scrollTop': $target.offset().top
	    }, 500, 'swing', function () {
	        window.location.hash = target;
	    });
	});
// ]]></script>


<title>Aba Exemplo • Portifolio</title>

<meta name="author" content="Nome do Autor">
<meta name="description" content="Meta Tags - assunto">
<meta name="keywords" content="palavras">
<meta http-equiv="content-language" content="pt-br">
<meta name="reply to" content="[email protected]">

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>

</head>



<body>


<!-- funcionalidade dos menus -->
<div id="menu">


<ul>
<li><a href="#index.html"><span>home</span></a></li>
<li><a href="#sobre.html"><span>sobre</span></a></li>
<li><a href="#galeria.html"><span>galeria</span></a></li>
<li><a href="#contato.html"><span>contato</span></a></li>
</ul>

</div>

<ul id="menu2">
  <li><a href="https://www.facebook.com/"></a></li>
</ul>

</body>

</html>

CSS


body{

background-color: #EEE9E9;

border-top-width: medium;
border-top-style: solid;
border-top-color: black;

border-bottom-width: medium;
border-bottom-style: solid;
border-bottom-color: black;

margin: 200px 200px 200px 200px;
}


*{
margin: 0;
padding: 0;
}

#menu{
overflow:hidden;
}

#menu ul{
list-style: none;
float: left;
position: relative;
left: 50%;
}

#menu ul li{
float: left;
position: relative;
right: 50%;
margin: 0 1px;
background:orange right top no-repeat;
}

#menu ul li a{
font-family: 'Verdana';
font-size: 12px;
color: #000;
padding: 10px 50px;
display: block;
}

#menu ul li a:hover{
background: #8B5A00;
color: #fff;
}

#menu li a.active{background-color: #8B6914; color: #fff;}

#principalA{
font-family: 'Verdana';
font-size: 11px;
color: gray;
padding: 50px 20px 20px 50%;
display: block;
background: white;
}

#menu2 ul {
        list-style: none;
	}

#menu2 li{     
	list-style: none;
	width: 10px;
	height: 21px;
	}
#menu2 li a{
	width: 10px;
	height: 21px;
        display: block; 
	background-image: url(../img/sprite.png);
	background-position: 0px 0px;
	background-repeat: no-repeat;
	}

#menu2 li a:hover {

	background-position: 0px -24px; 
	}