Estilos para listas

Introduzindo estilos css para a lista do menu

    Vamos começar arrumando as coisas que estão fora de sintonia, na Folha de Estilos, para dar melhor aspecto, a este menu. Lembre-se sempre que a manha para não ter problemas com alguns navegadores e para ter um código Html fácil para nós revisarmos e simples para que os buscadores leiam bem e indexem nossas páginas corretamente é colocar no código Html o justo e necessário, deixando os detalhes e enfeites para a Folha de Estilos. Porque dessa maneira nos permitirá também fazer qualquer mudança em todas as páginas do nosso site com alterar uma palavra na esplêndida Folha de Estilos. Quem já fez alguma vez um site ou deu manutenção em algum com várias páginas programado todo, “puro e duro” no Html, sabe que é um invento genial o css.

Consertando o menu

    Dando uma vista prévia na planilha, vê-se que quando foi posto vários enlaces dentro do menu, ele cresceu e saiu por debaixo da página web. Vamos consertar isso desde a Folha de Estilos. Abrir no Html-kit o “estilo-geral.css”.

    No começo lembro que não foi fácil, provei, provei e depois de muitas provas consegui arrumar dessa maneira: colocando um width: 800px e um float:left na capa “conteudo”.

    Assim está indicando que a capa “conteudo” terá uma largura de 800 pixels, igual que a largura da página. Na realidade parece que ocupa menos entretanto leve em conta que o div “menu” está dentro do div “conteudo”, logo o amarelo do menu faz parte da capa “conteudo”. Agora você entende como sim, tem que ser 800 pixels de largura. E colocando float:left evita que em algum navegador se desarrume tudo. Você verá como às vezes, mesmo cumprindo todas as boas praticas de programação temos que pensar um pouquinho e buscar esse macete para que se veja corretamente o site com qualquer navegador. De momento, tudo vai bem, estamos conseguindo...Isso é assim mesmo, relaxado e sem pressa. Portanto escrever na Folha de Estilos, na linha “conteudo”:

#conteudo {background-color: orange ; width: 800px ; float:left}

    E como sempre, salvar a Folha de Estilos e dar uma vista prévia na planilha.html e verá que agora tudo foi solucionado...ou não? Se você tiver alguma falha não deixe de comunicar-me, please!!!

Eliminando os pontos da lista

    Aqui podemos modificar as propriedades do elemento li na Folha de Estilos, mas o problema é que fazendo isso, todas as listas que tenhamos no site deixarão de ter esse ponto e também assumirão todas as propriedades que dermos agora. Por isso melhor que modificar as propriedades do elemento li, o que faremos será criar um estilo novo para li que usaremos somente no menu. Deste modo todas as listas que coloquemos em outras partes do site ficarão normais.

    Assim que, definiremos na Folha de Estilos propriedades para todos os li que cumpram a condição de estar dentro da capa menu. Fica assim:

#menu li { ...propriedades..... }

    Quando for colocada a capa antes de um tipo de estilo, indica que essas propriedades somente vão ser respeitadas quando o elemento (em este caso o  li) esteja dentro da capa escrita antes (neste caso o menu). As propriedades que vamos dar são:

#menu li { list-style:none }

    Como queremos tirar ponto, o que fazemos é ordenar que não tenha nenhum (none) tipo de estilo, com isso sumirão os pontos diante de cada link. Salvar a Folha de Estilos (estilo-geral.css) e dar uma vista prévia na planilha e verá que está conforme foi ordenado é..Temos o poder. Agora ninguém segura.kkkkkk... No seguinte tema continuaremos ajeitando o menu.

Anterior                                                            Acima                                                            Próximo

Final da Copa do Mundo 1966 (Inglaterra)