Pular para o conteúdo principal

CSS : Menu horizontal com items de mesmo tamanho

Se você precisa de um menu horizontal cujos items fiquem do mesmo tamanho automaticamente sem precisar definir o 'width' deles, basta fazer assim:

  • Crie um menu



  • No css da página, escrevemos

ul {
  display: table;
  width: 100%;
  table-layout: fixed;

}

li { 
  display: table-cell; 
  /* Borda para facilitar a visualização do efeito. */
  border: 1px solid;
  text-align:center;  
}


O truque é o uso das propriedades "display:table"e "table-layout" para a tag "ul", e "display:table-cell" para tag "li". Outras opções podem ser acrescentadas, mas essa é o mínimo que vai precisar para o efeito desejado.
Até a próxima.





Comentários

Postagens mais visitadas deste blog

PHP : array de estados brasileiros com nomes e siglas

Esse é um simples array com os nomes dos estados e suas correspondentes siglas. Cada estado é um array numerado e e "bem comportado" : tudo em minúsculas e sem acentos, porque evita problemas de compatibilidade de codificação e você sempre pode usar um "strtoupper", "ucfirst" e "ucwords" do PHP para tratar a formatação. $estados = array( 1=>array("sigla"=>"ac","nome"=>"acre"), 2=>array("sigla"=>"al","nome"=>"alagoas"), 3=>array("sigla"=>"am","nome"=>"amazonas"), 4=>array("sigla"=>"ap","nome"=>"amapa"), 5=>array("sigla"=>"ba","nome"=>"bahia"), 6=>array("sigla"=>"ce","nome"=>"ceara"), 7=>array("sigla"=>"df","nome"=>...

Javascript : Simples Video Player usando Youtube API

Para quem não sabe, a Google disponibiliza para desenvolvedores uma APi de manipulação para vídeos do Youtube, onde você pode ter uma grande quantidade de opções de controle. Baseado nessa API, vou disponibilizar aqui um simples player que aceita opções. Crie um script de nome 'youtube.js' e coloque o seguinte conteudo // youtube.js // Aqui é incluido a API em javascript para Youtube. var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag,firstScriptTag); // Aqui é a função que carrega o vídeo. // 'vid' é o id do video do youtube. // 'playerid' é o id da tag html que vai rodar o vídeo. function loadVideo(vid,playerid){ var player = new YT.Player(playerid, { // O id do player é colocado, passado pelo parâmetro da função. height: '390', width: '640', ...

Javascript : como salvar qualquer tipo de valor de uma requisição ajax

Uma das coisas que mais batem a cabeça de quem trabalha com ajax é conseguir salvar os valores retornados numa requisição do tipo var xmlhttp; function myRequestFunction(){ var http_request = new XMLHttpRequest(); try{ // Opera 8.0+, Firefox, Chrome, Safari http_request = new XMLHttpRequest(); } catch(e){ // Internet Explorer Browsers try{ http_request = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e){ try{ http_request = new ActiveXObject("Microsoft.XMLHTTP"); } catch(e){ alert("Your browser broke!"); return false; } } } http_request.onreadystatechange = function f(){ if( http_request.readyState == 4 ){ var jsonObj = JSON.parse(http_request.responseText); valor = jsonObj.value; } } http_request.open("GET", data_file, false); http_request.send(); } ...