Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Rote I Rode Site Com Menu Css

    Enviado por

    Jorge Junior
    15 visualizações4 páginas

    Título original

    Rote i Rode Site Com Menu Css

    Direitos autorais

    © Attribution Non-Commercial (BY-NC)

    Formatos disponíveis

    PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    15 visualizações4 páginas

    Rote I Rode Site Com Menu Css

    Enviado por

    Jorge Junior

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 4

    Site com menu em abas com CSS e Html

    Introduo O menu em abas uma das tendncias atuais do web design. A maioria dos sites com esse recurso segue a mesma estrutura: cabealho, menu, contedo e rodap utilizando o modo tableless (ou seja, sem tabelas) de organizar esses elementos. Provavelmente voc j viu muitos sites que utilizam esse esquema, e este tutorial ensinar como montar o seu. HTML e CSS Aqui usaremos dois arquivos: pagina.htm, com o cdigo HTML, e style.css, com a folha de estilo. A estrutura bsica do nosso cdigo HTML a seguinte:
    <html> <head> <title> Menu em abas em CSS num layout tableless </title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> (contedo) </body> </html>

    Nele, foi definido que a cor de fundo ser cinza claro, o texto ser na cor preta, o tamanho ser de 11 pixels e a fonte utilizada na pgina ser Verdana. Se o computador do usurio no tiver essa fonte instalada, ser utilizada a segunda opo: uma fonte genrica sem serifa. J a linha margin: 0; padding: 0; determina que no haver margem ou espaamento no corpo do documento. Na prtica, o nosso contedo ficar "colado" ao topo da pgina, sem nenhum espao. Notou que junto com os valores no h unidade de medida (px, pt)? Isso acontece porque o valor zero - quando voc utilizar qualquer outro valor, no esquea de determinar a unidade! O text-align: center; um truque para centralizar o contedo da nossa pgina, que continua no prximo elemento. O div externo Agora sim, vamos formatao propriamente dita. Comeando com um div centralizado com 750 pixels de largura, o que assegura que a pgina estar adequada s resolues 800x600 e 1024x768 pixels. No arquivo HTML, basta acrescentar duas linhas: a tag de abertura e a de fechamento do div, que ser identificado como "tudo":
    <body> <div id="tudo"> </div>

    Note que no est sendo usando um Doctype ou meta-tags, mas voc deve adicionar esses complementos depois. No nosso arquivo style.css, vou comear pelo estilo da tag body:
    <!-body { background: #EEE; color: #000; font-size: 11px; font-family: Verdana, sans-serif; margin: 0; padding: 0; text-align: center; } -->

    </body>

    no arquivo CSS que vamos definir as propriedades desse elemento: #tudo { background: #FFF; border: #000 1px solid; width: 750px; margin: auto; text-align: left; }

    Aqui definimos o que o fundo ser branco, a borda ser preta com 1 pixel de largura e com linha slida e a largura do div ser de 750 pixels. O atributo margin: auto; utilizado como um truque para alinhar o elemento no centro da pgina: como a margem automtica, o navegador vai distribu-la igualmente dos dois lados do elemento, centralizando-o. J o text-align: left; a segunda parte do truque para centralizar o contedo: sem esse atributo, todo o texto da pgina ficaria centralizado quando ela fosse exibida no Internet Explorer. Isso se chamaherana, assunto a ser abordado mais adiante. Inserindo um cabealho Vamos agora inserir o cabealho. No seu cdigo HTML, voc vai acrescentar:
    <div id="tudo">

    Vamos comear adicionando o menu no nosso cdigo HTML logo abaixo do cabealho:
    <div id="menu"> <ul> <li><a href="link1.htm">link1</a></li> <li><a href="link2.htm">link2</a></li> <li><a href="link3.htm">link3</a></li> <li><a href="link4.htm">link4</a></li> <li><a href="link5.htm">link5</a></li> </ul> </div>

    Sim, nosso menu uma lista ordenada! Essa uma amostra de como o CSS e a criatividade podem fazer efeitos incrveis em nossas pginas sem o uso de JavaScript ou Flash. Sem o CSS, o cdigo acima tem a seguinte aparncia:

    <div id="cabecalho"> cabe&ccedil;alho </div> </div>

    link1 link2 link3 link4 link5

    Aqui vamos colocar apenas a palavra "cabealho", mas voc pode utilizar esse espao para inserir um logotipo, banner, etc. No nosso arquivo de estilos, damos a formatao ao elemento: #cabecalho { background: #CCC; font-size: 18px; textalign: center; padding: 30px; } Aqui utilizamos a cor cinza para o fundo, fonte no tamanho 18 pixels, alinhamento centralizado do texto e um espaamento de 30 pixels, para deixar o cabealho alto. Todos esses valores podem e devem ser adaptados ao seu layout a partir do CSS e da sua criatividade! Inserindo o menu Finalmente chegamos ao trecho mais importante do nosso cdigo: o menu propriamente dito.

    Ento vamos adicionar o estilo. Primeiramente, necessrio definir as caractersticas do div "menu":
    #menu { background: #000; height: 27px; margin: 0; padding: 0; }

    Em height: 27px; definimos a altura do menu; porm, essa altura vai variar de acordo com a fonte, o espaamento e outros parmetros. Nosso exemplo tem 27 pixels de altura, mas talvez voc precise ajustar esse valor com "tentativae-erro" at chegar num tamanho que gere o mesmo resultado em qualquer navegador. Como estamos utilizando uma lista ordenada, vamos definir a formatao dela:

    #menu ul { margin: 0; padding: 0; margin-left: 6px; }

    Aqui, margin-left: 6px; define a distncia entre a primeira aba e a borda esquerda do elemento. Em CSS, se uma propriedade em particular no definida, o elemento herda essa propriedade do elemento superior. No nosso caso, o tipo de fonte definido no elemento body foi herdado por todos os elementos dentro dele. No cabealho, definimos um tamanho de fonte diferente, e foi esse valor que prevaleceu; j no menu, o tamanho da fonte no foi definido, ento prevalece o 11px do elemento superior. por isso que o CSS chamado folha de estilo em cascata (Cascading Style Sheets). Agora vamos definir o estilo dos itens do menu:
    #menu ul li { display: inline; }

    left (esquerda) e border-right (direita). Se voc vai definir um estilo especfico para um desses valores, sempre faa isso depois que definir a borda geral. Lembra da cascata? Se voc definir a borda inferior e depois a borda geral, a segunda ir se soprepor primeira; Em float: left;, definimos o alinhamento do menu esquerda; Quando a propriedade padding apresenta dois valores, como em padding: 5px 7px;, o primeiro se refere ao espaamento horizontal (em cima e embaixo) e o segundo ao espaamento vertical (do lado esquerdo e do lado direito); Provavelmente text-decoration: none; j lhe familiar: essa propriedade tira o sublinhado do link. Se voc no tem muita experincia com CSS, deve estar se perguntando o que significam tantos elementos. Por partes: #menu o elemento principal; ul a lista ordenada; li o item da lista e a o link. Pensando na ordem inversa, #menu ul li a define o estilo do link do item da lista do menu. Afinal, se voc definisse o estilo somente com a {color: #000;}, isso afetaria todos os links do documento, quando s queremos formatar um link especfico de um div. Realando a aba Aqui, uma das partes mais interessantes das abas: quando o usurio passar o mouse por cima de uma, ela fica realada. Como fazer isso? Simples: acabamos de definir o estilo da aba como um link: agora vamos definir o estilo da aba realada da mesma maneira que definimos um link realado, com o atributo a:hover. No nosso arquivo CSS acrescentamos o seguinte trecho:
    #menu ul li a:hover { background: #FFF; color: #F00; border: #F00 1px solid; border-bottom: none; text-decoration: none; }

    A propriedade display: inline; o que define que os itens da lista aparecero lado a lado, e no um em cada linha. O prximo passo definir o estilo das abas. Note que cada aba um link; portanto, o elemento que vai receber a formatao o a:
    #menu ul li a { background: #444; color: #FFF; border: 1px #FFF solid; border-bottom: 1px #000 solid; float: left; padding: 5px 7px; margin: 2px; text-decoration: none; }

    Neste cdigo temos algumas novidades: A propriedade border-bottom se refere borda inferior do elemento. Tambm existem as propriedades border-top (topo), border-

    Nossa aba realada ter fundo branco e texto e borda em vermelho. A borda inferior continua omitida, assim como o sublinhado do link.

    Acrescentando o contedo e o rodap Finalizando, acrescentaremos o contedo e o rodap do nosso layout. No arquivo HTML, acrescentamos os divs para os dois elementos: <div id="conteudo"> contedo </div> <div id="rodape"> rodap </div> Na nossa folha de estilo, definimos a aparncia desses dois elementos: #conteudo { clear: both; font-size: 12px; padding: 5px; text-align: center; } #rodape { clear: both; background: #000; color: #FFF; padding: 5px; text-align: center; } A novidade aqui o clear: both;, que posiciona o elemento totalmente abaixo do elemento superior (que est sendo alinhado com float). No nosso caso, se tivssemos definido uma largura de 300 pixels para o menu e de 200 pixels para o contedo, como o menu leva o atributo float: left;, o contedo seria encaixado direita dele.

    Você também pode gostar