Márcio Machado marcio.machado@nuvemk.com XHTML E CSS Master Web Developer
OBJECTIVOS No final do presente módulo deveremos ser capazes de desenvolver um layout dado, em XHTML e CSS, validado pelos standards da w3c, tendo em conta alguns critérios de usabilidade e acessibilidade, assim como, boas práticas de desenvolvimento.
HTML O que é? Acrónimo de HyperText Markup Language, isto é, trata-se de uma linguagem de marcação. Uma linguagem de marcação é um conjunto de códigos, aplicados a um texto, simbolicamente distinto deste, que nos permitem anotar informações. Baseado em SGML, essas informações são, por isso, meta-informações.
XHTML O x. extensible Hypertext Markup Language, é uma evolução do HTML: Mais aberta. Novas regras. Baseada em XML. Porquê a mudança? - para uma melhor adequação a outros user agents. - Porque o sentido da web é, caminhar para a denominada, web semântica; cf. -http://www.w3.org/2001/sw/
Elementos (start e end tags) XHTML <html></html> <head></head> <body></body> <title></title> <p></p> <br /> <div></div> <a></a> Ao conjunto de start tags e end tags, chamamos de elements. (elementos). cf. nota: 3.2.1 em: http://www.w3.org/tr/html4/intro/sgmltut.html#h-3.2.1
Exercício Primeiro Documento XHTML Usando o notepad (ou similar), vamos desenvolver o nosso primeiro documento em XHTML.
Elementos XHTML regras? Problemas? Não se vêem. Mas estão lá. Quelo o pã_o percebe-se. Mas, e se fosse um romance todo escrito desta forma? A ideia é simplificar / normalizar; A ideia é garantir compatibilidade entre sistemas. (diferentes user agents); A ideia é garantir uma longevidade dos padrões usados na produção de documentos web.
Elementos XHTML principais regras Todas os elementos deverão ter início e fim. As tags são escritas em minúsculas. Well Formed Document - bem aninhados. (nested). <p>o gato da Alice <strong>sorria</strong></p> Os valores dos atributos dos elementos, nas start tags têm de ter aspas. Declaração!DOCTYPE é necessária. Elementos html, head, title, body necessários.
XHTML as primeiras linhas -!DOCTYPE Vimos então que a XHTML, deverá obedecer a regras e vamos começar, desde já, a cumpri-las. DOCTYPE Antes de qualquer linha de código no nosso XHTML. Deveremos informar os browsers acerca do tipo de documento que estamos a usar e sobre que regras DTD (Document Type Definition) estamos a trabalhar. (Strict, Frameset, Transitional). A declaração do URI - <!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1- transitional.dtd">
XHTML as primeiras linhas <html Para além do DOCTYPE, deveremos dar a conhecer o idioma e o char encode que vamos usar no nosso documento: cf. http://www.w3.org/tr/i18n-html-tech-lang/ Assim, e depois da nossa declaração do DOCTYPE, deveremos iniciar o nosso HTML da seguinte forma: <html lang= pt" xml:lang= pt Por fim, colocaremos um outro atributo - xml namespace na startag HTML.
XHTML as primeiras linhas xmlns Diferentes user agents, poderão interpretar os elementos definidos no XHTML de modos diferentes (ambiguidade). Assim, e para evitar conflitos, desenvolveu-se um mecanismo que permite prefixar elementos e atributos, de modo a eliminar conflitos. As regras para tal, estão definidas num URI (uniform resource identifier) da W3C. xmlns="http://www.w3.org/1999/xhtml" cf. http://www.w3.org/tr/1999/rec-xml-names-19990114/ cf. http://www.w3.org/tr/1999/rec-xml-names-19990114/#philosophy cf. http://www.w3.org/tr/rec-xml-names/
XHTML as primeiras linhas head O elemento head concentra todas as informações referentes ao nosso documento e que não serão impressas no viewport do browser. Este elemento é constituído por instruções que, normalmente, servem apenas o propósito de comunicar informações aos user agents aquando da interpretação do documento, pelos seus layout engines (gecko, webkit, presto, trident ).
XHTML as primeiras linhas <meta O elemento meta é usado para identificar propriedades do documento, tais como, o autor, keywords, tipo de conteúdo e charset encoding. Assim, um exemplo de um elemento meta num documento xhtml poderá ser: <meta http-equiv="content-type" content="text/html; charset=utf-8" /> (UTF - Unicode Transformation Format) cf. http://www.w3.org/tr/html4/struct/global.html#edef-meta
XHTML as primeiras linhas title O elemento title é necessário em cada documento em XHTML e, de modo claro, serve para atribuirmos um título a esse documento.
XHTML as primeiras linhas body body é o elemento que contém todas as informações que serão mostradas nos viewport dos browsers (textos, imagens, links, sons ).
Exercício - Criando um novo documento num editor. Usando um editor, vamos criar um novo ficheiro XHTML e analisar o seu conteúdo que, por omissão, nos é apresentado e, vamos confrontar com aquilo que foi referido até aqui.
O código gerado pelo editor (dw) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>untitled Document</title> </head> <body> </body> </html>
O elemento <!-- --> Este não é um elemento, é um delimitador. Ele permite adicionar comentários ao código xhtml que vamos desenvolvendo. Tudo o que estiver dentro destes comentários, não aparece no viewport dos browsers. Este delimitador pode também ser usado para comentar client-side scripts para que, em user agents antigos que não suportem esses scripts, o código inerente a esses scripts, não apareça no viewport. <!-- isto é um comentário -->
O elemento p O elemento p define um parágrafo e, dependendo do user agent, e o seu layout engine cria espaço extra antes e depois do seu conteúdo. Ex: <p>eu sou um parágrafo.</p>
Os elementos h1 e h6 Estes elementos definem headings no documento. São informações visuais, deverão estar a cargo dos CSS, contudo, eles transportam consigo relevância semântica pois, definem a importância de um tópico no documento. Assim, entre <h1></h1> estará o título mais importante do documento. Entre <h2></h2> o segundo mais relevante indo, actualmente, até ao <h6></h6>.
O elemento b O elemento b refere-se a aplicação de bold em texto, portanto, formatação textual. É desaconselhado o seu uso uma vez que, essas formatações deverão estar a cargo do CSS, no esforço de separar conteúdo de formatação. <b>eu estou a bold.</b>
O elemento strong O elemento strong também diz respeito à formatação textual, tal como b, contudo, transporta também uma referência semântica. Strong, diz-nos que, num documento em xhtml, aquilo que estiver entre as suas tags, será de maior relevância semântica. Ex: <p>o gato da Alisse<strong>sorria</strong>.</p>
O elemento a O elemento a é um elemento anchor (âncora). Este anchor é usado para conter hiperligações, links. Os atributos mais comuns usados com este elemento são href, target (_blank e _self). <a href= http://www.google.com target= _blank >Link para google</a>
Os elementos ul e li O elemento ul é um elemento container, responsável por definir uma unordered list. Este elemento é importante para o desenvolvimento de menus usando CSS, como veremos em sessões posteriores. Por si só, este elemento não constrói nada no view port, serve apenas de contentor(container) para li ou, list items. <ul> <li>leite</li> <li>manteiga</li> </ul>
O elemento ol Semelhante à unordered list (ul), temos também a ordered list. <ol> </ol> <li>leite</li> <li>manteiga</li>
O elemento span O elemento span é, também, um container. Permite que, num determinado parágrafo, uma determinada selecção seja marcada e, com isso, permitir a sua manipulação individual. (por parte de css ou de javascript por exemplo). <p>eu sou muito <span>especial</span></p>
O elemento div O elemento div é, provavelmente, o elemento mais importante na estruturação do nosso documento, ele é, por excelência, um container e, nele, poderão existir outros elementos tais como p, ul, entre outros.
O elemento img O elemento img é um empty element, isto é, entre as suas start e end tags, nada existe e serve para definir/apontar uma imagem a um documento XHTML. <img src= castelo.jpg" alt= Imagem do Castelo na Escócia" /> O atributo alt é importante estar definido pois, é através dele que pessoas com dificuldades visuais, ou user agents que não suportem a visualização de imagens, podem, semânticamente, interpretar o conteúdo.
O elemento br O elemento break line é outro empty element e a sua função é fazer uma quebra de linha. Discute-se actualmente se este elemento deve, ou não, fazer parte das especificações de markup do XHTML, no entanto, ele tem se revelado bastante útil. <br />
Elemento table O elemento table define uma tabela. Não servirá propósitos de estruturação do layout. Contudo, sempre que queiramos apresentar dados tabulares, este elemento será, com certeza, algo a ter em conta. O elemento table, por si só, nada nos apresenta no viewport, ele deverá conter outros elementos tais como: tr, td, th table row, table division (célula), table head, respectivamente.
Elemento table cont. Alguns atributos do elemento table e descendentes: border= 1 width= 400 (px, %) rowspan= 2 (agrupa linhas numa célula) colspan= 2 (agrupa colunas numa célula) Dica - Para evitar inconsistências de visualização em alguns user agents, deveremos utilizar o código (que representa um espaço em branco), nas células que, propositadamente, estarão vazias.
Exercício Dreamweaver CS4
CSS - Intro Cascating Style Sheets Linguagem de estilos em cascata. Objectivo: Formatar visualmente documentos de marcação, como por exemplo, XHTML.
REGRA DE OURO Não se tratam de CSS sem que, antes, o XHTML ou outro documento de marcação, esteja absolutamente validado.
CSS Cascating Cascating: CSS é uma linguagem de estilos em cascata, o que significa isso? Conceito relacionado - inheritance. (mais OOP) Referimo-nos, assim, a uma hierarquia de estilos, onde, alguns [valores de propriedades(properties), aplicados a alguns elementos(elements), escolhidos através de selectores(selectors)], separados por dois-pontos isto é, algumas declarações (declarations), são passadas de elementos parentes(parent), para elementos descendentes (descendents). Fácil?
CSS Cascating pode complicar! FONTES Os css podem provir do(s): utilizador (user) (funcionalidades do safari e opera para importar css) ; dos user agents (normalmente, browsers - (por exemplo, o elemento <strong> é interpretado com um determinado valor nos layout engines gecko e, com nuances diferentes nos trident); ou dos autores(authors) (developers - nós) ;
CSS Cascating pode complicar!! MODOS DE DEFINIR CSS NO DOCUMENTO Para além disso, e referindo apenas o lado dos autores, existem: a) propriedades que são aplicadas inline, (usando o atributo style): <div style= color:red; >texto de cor vermelha</div> b) outras através do css linkado ao documento; <link rel="stylesheet" href="style.css" type="text/css" media="screen"> c) e outras aplicadas no head do documento através do elemento style <style type= text/css > #idelemento { color:red; /*declaração de cor*/ } </style>; d) Outras aplicadas através da regra (at-rule): @import (dentro das declarações de CSS). @import url("mystyle.css") screen;
CSS Cascating pode complicar!!! INHERITANCE O conceito de inheritance, relacionado com a hierarquia no DOM (Document Object Model), também influencia o modo como os nossos estilos serão aplicados. Se declararmos um valor para a propriedade font-size, no elemento body, os seus descendentes no DOM, (p, h1, div), se não forem declarados especificamente, terão esse valor como base. Contudo se, por outro lado, declararmos uma propriedade border num elemento div, que terá como descendentes, p, por exemplo, a mesma propriedade (caso exista) no elemento descendente, se não for declarada especificamente, não será afectada.
CSS Cascating pode complicar!!!! SELECTORS Os selectors usados para apontar para um determinado elemento têm, também eles, diferentes gradações de especificidade; Assim: Selector universal (Universal Selector) * - corresponde a qualquer elemento no documento. Selectores de tipo (Type Selectors) E corresponde a um elemento no documento. ex: (p, div, span ) Selectores de descendência (Descendant Selectors) E F corresponde a um elemento F descendente de E. ex: (div p) Selectores filhos (Child Selectors) E>F corresponde a um elemento F filho de E o tema é bastante vasto cf. http://www.w3.org/tr/css2/selector.html
CSS Cascating pode complicar!!!!! TOKENS E KEYWORDS Para além disto, ainda existe um token delimitador (símbolo com um significado específico, neste caso!) e uma keyword (neste caso, important) que podem alterar as hierarquias pré-estabelecidas!important - aplicado à frente de uma declaração. Existem também vendor-especific extensions, keywords especiais que dizem respeito a, e foram criadas por, determinados browsers. -moz- / -ms- -mso- -hp- etc cf. http://www.w3.org/tr/css2/syndata.html estas últimas, deveremos evitá-las ao máximo!
CSS Cascating As questões: Se nós tivermos uma declaração diferente em cada uma delas, apontadas a um mesmo elemento, proveniente de diferentes fontes, qual será aplicada? Como se processa a decisão sobre qual estilo deverá ser aplicado?
CSS Cascating resolvendo 1 Quem define estas e outras regras respeitantes ao CSS é a W3C e essas, no caso da versão de CSS que estamos a tratar, estão expostas num documento em particular: CSS 2.1 Specification. Como funciona a aplicação do Cascating então? 1) Os user agents encontrarão todas as declarações que se aplicam a um elemento e propriedade em específico, para um media type dado.
CSS Cascating resolvendo 2 2) Farão uma ordenação de acordo com os seus níveis de importância [normal ou importante (!important)] e origens [user agent, author, user] na seguinte ordem: I. user agent declarations II. user normal declarations III. author normal declarations IV. author important declarations V. user important declarations As user important sobrepõem-se a todas as outras declarações. As user agent são sobrepostas por todas as outras declarações.
CSS Cascating resolvendo 3 3) Aqueles que tiverem a mesma origem e nível de importância, deverão ser ordenados por especificidade do selector. Selectores mais específicos vão sobrepor-se (override) a selectores mais gerais.
CSS Cascating resolvendo 4 4) Finalmente, se eles tiverem a mesma origem, nível de importância e especificidade, eles deverão ser aplicados pela ordem com que aparecem no CSS. O último a aparecer tem precedência. Nota: a) css importados (at-rule) são considerados sempre anteriores às declarações no ficheiro que os importa. b) Declarações no elemento <style> ou linkadas através do elemento <link> caem, também, neste ponto 4. b1) Não é o caso que, em qualquer circunstância, as declarações definidas no <style> tenham precedência pelas declarações anexadas a um css externo apontado através do elemento <link>. Se existirem as duas, e ambas tiverem declarações conforme as regras 1, 2 e 3, então, a última que aparecer na ordem do XHTML, tem precedência.
CSS Cascating resolvendo 5 A maior parte das declarações que iremos desenvolver estão sujeitas ao ponto 3. Isto é, quase todas têm a mesma origem (author) e a mesma importância (normal). Assim, a existir conflitos (ou suspeita), eles deverão ser resolvidos tendo em conta a especificidade dos selectores.
CSS Cascating Calculando a Especificidade dos Selectores Cria-se uma tabela com as seguintes colunas: declaration Inline Style IDs Attributes, e Pseudoclasses Element Types e Pseudo-elements * 0 0 0 0 #noticia 0 1 0 0 div#destaque 0 1 0 1 body p 0 0 0 2 ul ol li.red 0 0 1 3 style= 1 0 0 0 Aplicam-se as seguintes regras: 1) Se a declaração estiver num atributo style= coloca-se 1 na primeira coluna e zero nas seguintes. (pois não há selectors nos elementos declarados inline). Esta é a especificidade mais alta: 1.0.0.0 (a mais baixa, é a 0.0.0.0 caso do Universal Selector: *); 2) Conta-se o número de IDs na declaração e coloca-se na segunda coluna. 3) Conta-se os atributos e pseudo-classes na declaração e coloca-se na terceira coluna. 4) Conta-se os element types (p, li ) e as pseudo-elements (p:first ) e coloca-se na quarta coluna.
Exercício Dados os seguintes excertos: 1) #titulo>#associacaonoticia.espacamento3 {margin:4em 0;} 2) {padding:0;} 3).margen4 {margin:4em 0!important;} 4) body p {border: 1px solid red;} 5) div#destaque p.roxo {color:purple;} 6).raposa { -moz-border-radius: 10px 30px; background-color: #ffffcc; } 7) style= color: red; Indique, para cada um deles, onde se encontram (caso existam) as/os : a) Declarações (e declaration boxes) b) Vendor especific extensions c) Keywords d) Tokens e) Selectors (indicando também o tipo) f) Classes e Pseudo-classes g) Atributos h) Elementos i) Propriedades j) Valores
Exercício: Dado o seguinte excerto: p.message { color: green; } #home #warning p.message { color: yellow; } #warning p.message { color: white; } body#home div#warning p.message { color: blue; } p { color: teal; } * body#home>div#warning p.message { color: red; } #warning p { color: black; } Preencha a seguinte tabela de e ordene de forma ascendente por especificidade (do menos específico, para o mais específico) : declaration Inline Style IDs Attributes, Classes e Pseudoclasses Element Types e Pseudoelements
Exercício - solução declaration Inline Style IDs Attributes, Classes e Pseudo-classes Element Types e Pseudo-elements p 0 0 0 1 p.message 0 0 1 1 #warning p 0 1 0 1 #warning p.message 0 1 1 1 #home #warning p.message 0 2 1 1 * body#home>div#warning p.message 0 2 1 3 body#home div#warning p.message 0 2 1 3
Exercício (sem recorrer a editor): Dado o seguinte css: body { color:blue; } #ola { color:black; } div { color:red; } div#ola p.verde { color:purple; } p#ola.verde { color:green; } p.verde { color:gray; } Qual a cor que vai aparecer no viewport? <div id= ola > <p class= verde >ola</p> </div> Porquê? E neste caso? <div id= ola> <p class=verde >ola</p> </div> Porquê?
Exercício - Solução A cor que se aplica é o roxo - purple. Porquê? Porque a especificação da declaração div#ola p.verde é mais alta do que qualquer outra ali presente. A cor que se aplicaria no segundo caso era o vermelho. Porquê? Porque o atributo class e id não seriam reconhecidos uma vez que não estão bem formados, (well formed) assim, a declaração com a especificação mais alta, é a declaração com o type selector div.
CSS Cascating Para saber mais sobre o importantíssimo conceito de cascata: http://www.w3.org/tr/css2/cascade.html
CSS Box Model O Box Model é um modelo que descreve as caixas rectangulares que existem em torno dos elementos. Ei-lo:
CSS Box Model - Propriedades Ao conteúdo (content) de cada elemento, poderão aplicarse as seguintes propriedades: padding; border; margin; e suas variantes, padding-top, padding-left, padding-bottom, padding-right, usando as mesmas keywords top, left, bottom e right para as restantes propriedades. Os valores que estas propriedades poderão assumir poderão ser expressos: em forma de strings muito específicas: auto que deixa o user agent decidir que valores colocar ou, a já referida inherit. ex: margin: 0 auto; Valores fixos tais como: em (unidade de medida relativa) px (unidade de medida absoluta, pt ), Valores percentuais. - Relativos às dimensões (width) da box container.
CSS Box Model Properties Shorthands margin: 1em 4em 2em; margin-top: 1em; margin-right e margin-left: 4em; margin-bottom: 2em; margin: 1em 2em; margin-top e margin-bottom: 1em; margin-right e margin-left: 2em; margin: 1em 2em 3em 4em; margin-top: 1em; margin-right: 2em; margin-bottom: 3em; margin-left: 4em;
Exercício: Será agora fácil de explicar a sintaxe de: margin: 0 auto;
CSS Box Model - border A border, para além das propriedades border-left, border-right, border-bottom e border-top, goza, também, de outras propriedades: border-width; border-color; border-style; cada uma destas, com as variantes específicas: border-left-width; border-right-color; border-top-style; Exemplos: border:1px solid red; border-bottom-color:blue; border-width:30px; border-top-color:#ff3333;
Exercício Recorrendo aos conceitos do Box Model faça uma representação aproximada do seguinte no viewport: Eu sou um título.
Exercício uma solução O xhtml: <div id="top"> <p class="titulo">eu sou um título.</p> </div> O css: #top { width:40em; border:1px solid black; } #top p.titulo { margin:2em 0 4em.4em; }
CSS Visual Formatting Model O visual formatting model é, um modelo, que engloba regras, acerca do modo como os user agent deverão processar o document tree para dispor os elementos visualmente.
CSS Visual Formatting Model - Display A propriedade display é uma propriedade importante no Visual Formatting Model e na sua visualização no viewport de um user-agent. De entre os vários valores que pode tomar, estes serão os mais comuns: display: block; - faz o elemento gerar uma block box. (os user agents (?conf) fazem-no para os p, h1,div ), por omissão, eles ocupam toda a extensão do parent element. display:none; - faz o elemento e todos os descendentes saírem da estrutura de formatação. relacionado: visibility: hidden; - esconde o elemento mas, não o retira da estrutura de formatação. display:inline; faz o elemento aparecer numa linha horizontal. (ex: em ; strong; span; ou outro, quando especificado). Outros valores não são muito usados, apesar de poderem ser úteis, pelo facto de não serem totalmente cross-browser.
CSS Visual Formatting Model - Display <p>ola, <em>sou</em>um texto <strong>importante</strong>.</p> O que se passa neste excerto, no que ao VFM diz respeito? O que se espera que gere o viewport? R: Uma block-box gerada pelo elemento p, onde, dentro dela, existem 5 inline boxes das quais, 3 são anónimas.
CSS Visual Formatting Model - Position As propriedades para posição, permitem-nos posicionar elementos no nosso viewport. Existem três position schemes definidas nas especificações do VFM na CSS 2.1 Specification: Normal flow; Floats; Absolute Positioning
CSS Visual Formatting Model Position normal flow O normal flow de um elemento, pode ser definido como block, inline, relative e, um elemento num esquema posicional de normal flow, tem em conta a disposição visual de outros elementos do document tree. A propriedade: position: relative; Faz com que o elemento se movimente relativo à sua posição original. #ola {position:relative; left:50px;} Os user agents mais comuns (browsers), têm, por omissão, a propriedade position definida com o valor relative ;
CSS Visual Formatting Model Position absolute positioning Um elemento definido com: position: absolute; Retira-o completamente do normal flow ignorando, e sendo ignorado, assim, por outros elementos. No entanto, ele respeita a hierarquia imposta pelo document tree.
Experiência Dado o seguinte CSS: #teste {position:relative; left:40px;top:3px;} #top {width:40em; border:1px solid black;} E o seguinte excerto xhtml: <div id="top"> <p>eu sou um título.</p> </div> <div id="teste"> <p>eu sou um paragrafo dentro de um elemento relativo ou absoluto.</p> </div> Analisemos o que acontece quando mudamos a propriedade position no elemento com o id teste.
CSS Visual Formatting Model Position:fixed; absolute positioning Também absoluta mas, diferente desta, temos a propriedade definida com o valor fixed; Não respeita o normal flow, e o seu posicionamento é referente ao viewport. ex: #naomemexo{ position:fixed; top:10px; left:-3px; }
CSS Visual Formatting Model Float; Um float, é uma box definida para a esquerda ou para a direita e leva outros conteúdos, mediante condições específicas, a escorrerem consigo para esquerda ou para a direita com ela. Se quisermos que um elemento pare de seguir o float, aplicamos-lhe a propriedade clear com os valores both, left, right. inherit e none, são também possibilidades. Uma box flutuada é arrastada para a esquerda ou direita até: a) a outer edge left ou right tocarem no bloco container. b) ou, até atingir uma outra float box.
CSS Visual Formatting Model Float; Se não existir espaço horizontal para conter o float, ele cairá, abaixo do container. Se um float for aplicando, quando já existir um esquema de disposição inline, esse elemento float, no caso de ser flutuado à esquerda, ficará na posicição mais à esquerda dessa disposição inline e, as outras que lá se encontravam, ficarão à sua direita, mantendo a linha horizontal. A cada elemento definido com a propriedade float, deverá existir uma width definida.
Exercício Usando floats, faça o user agent, por intermédio do seu layout engine, representar o seguinte esquema no viewport: Eu sou um texto na coluna da esquerda. Eu sou um texto na coluna da esquerda.
Exercício Uma solução - xhtml <div id="colunas"> <div id="colunaesquerda"> <p>eu sou um texto na coluna da esquerda.</p> </div> <div id="colunadireita"> <p>eu sou um texto na coluna da direita</p> </div> </div><!--fim de colunas-->
Exercício uma solução css #colunas {width:42em;} #colunaesquerda, #colunadireita {width:20em; height:7em; float:left; border: 1px solid black;} #colunaesquerda {margin-right:1em;} #colunadireita p {clear:left; float:right; width:13em; background-color:red; border: 3px solid black;}
Listas para Menus Fazer das listas menus, é um processo que obedece a algumas regras, contudo, e tendo em vista aquilo que já foi tratado nesta sessão, não serão de difícil assimilação. Assim, temos um xhtml :
Listas para Menus css 1 /* Navegação */.navegacao { float:right; padding-bottom:1.5em; text-align: right; margin-top:2.5em; margin-right:0.5em; overflow:hidden; /*conter o float - o clearfix nao funciona aqui.*/ }
Listas para Menus css 2.navegacao ul { float: right; /*Remover HTML List Bullets da lista*/ list-style-type: none; /*Para remover a left-indentation*/ margin:0; padding:0; /*Para posicionar a lista: */ text-align:right; overflow:hidden; }
Listas para Menus css 3.navegacao ul li { /*Para mostrar as opções da lista em linha horizontal: */ display: inline; /*Para colocá-los à esquerda com shrink-to-fit: ;)*/ float:left; }
Listas para Menus css 4.navegacao ul li a { /* Para remover o underline:*/ text-decoration: none; /*Para colocar cada item dentro de uma caixa:*/ padding-right:1.2em; padding-left:1.2em; font: 0.8em Arial, Helvetica, sans-serif; color:#000; border-right:1px solid; border-color:#999; }
Listas para Menus css 5 /*porque nas listas, (e nas colunas) não queremos borders nas pontas, * nem espaços extra, aplicamos estas duas classes: * Atenção: por omissão define-se sempre apenas a border direita. * Assim, não necessitamos * de colocar a border esquerda a none. */.navegacao ul li.lastrightelement a { border-right:none; }
Listas para Menus css 6.navegacao ul li a:hover { background-color: #87888A; color: #fff; font-weight:300; }
Listas para Menus xhtml <div class="navegacao"> <ul> <li><a href="#" target="_self">item 1</a></li> <li><a href="#" target="_self">item 2</a></li> <li><a href="#" target="_self">item 3</a></li> <li class="lastrightelement"><a href="#" target="_self">item 4</a></li> </ul> </div>
Fim da sessão. Listas Floats Cascating Positioning Display
Alguns Links Interessantes O mais interessante deles todos: www.w3c.org Não confundir com o site privado, interessante mas, não tão rigoroso: http://www.w3schools.com http://www.positioniseverything.net/ http://fm.no-ip.com/menu.html http://css-discuss.incutio.com/wiki/main_page http://css.maxdesign.com.au/listamatic/ http://css.maxdesign.com.au/selectutorial/index.htm http://css.maxdesign.com.au/floatutorial/index.htm http://www.456bereastreet.com/
Questões? Sugestões? Críticas? O saber não está dado, é um caminho. Assim, se tiverem dúvidas, sugestões de melhoria ou críticas, terei todo o gosto em recebê-las através do endereço: marcio.machado@nuvemk.com. Actualização: a) o menu de navegação apresentado, deverá ser optimizado e explicado em muito mais detalhe. b) Técnicas Avançadas deverão ser introduzidas. (equal height columns, vertical center alignment ) c) XHTML criação de formulários.