Ok, digamos que você tenha um template padrão no website, com um layout típico das empresas: " um cabeçalho, uma área do corpo de conteúdo e um rodapé ". No cabeçalho você colocou uma imagem de fundo grande com o logotipo da empresa e algumas outras imagens com combinações agradáveis ao lado dela, com algum conteúdo dinâmico no alto do canto direito inferior da imagem de fundo. De repente você percebe que um clique na imagem de fundo que representa o logotipo da empresa deve trazer o usuário de volta à página inicial, mesmo porque este é um padrão web. Normalmente você iria cortar a imagem e colocá-lo diretamente dentro do link. No entanto, você não tem tempo suficiente para cortar a imagem e refazer o template de acordo com esta necessidade, então o que você precisa é de uma solução rápida.
Neste ponto a estrutura da index.php do template padrão, pode se parecer como algo assim:
## index.php ##
<div id="site">
<div id="full-width-header">
<div id="header-content">We love using Joomla!</div>
</div>
<div id="body-content">OSM saves the world!</div>
<div id="footer-content">(c) the really cool web-designer</div>
</div>
e a folha de estilos como algo assim:
## template.cs ##
#full-width-header {
background: url(header-logo.jpg);
width: 800px;
height: 172px;
}
#header-content {
position: relative;
float: right;
width: 400px;
height: 172px;
vertical-align: bottom;
text-align: right;
}
Nota: O uso legítimo de técnicas em acordo com webstandards, pode incluir coisas como guia de interfaces onde as DIV devem ser capazes de se esticar e ainda ter uma imagem de fundo, que devem ser alteradas apenas na folha de estilos CSS.
Como fazer
Primeiro: Você não pode simplesmente copiar o conteúdo do # header-div, colocá-lo sobre o logo e tornar o conteúdo invisível utilizandom uma tag âncora. Isso seria um erro de codificação HTML, porque você não pode colocar elementos nível de bloco como div dentro de tags de âncora.
No entanto, pode usar uma imagem transparente, de um pixel, no formato gif em tags de âncora (como no exemplo 1) se você tiver que dar suporte a navegadores antigos. Caso contrário, você pode simplesmente utilizar a âncora como "inline-block" usando CSS 2,1 (como no exemplo, 2).
Exemplo 1 (pre CSS 2.1) HTML:
<div id="site">
<div id="full-width-header">
<a href="/"><img src="/transparent.gif" id="home-link" alt="Nav: Home" /></a>
<div id="header-content">We love using Joomla!</div>
</div>
<div id="body-content">OSM saves the world!</div>
<div id="footer-content">(c) the really cool web-designer</div>
</div>
Exemplo 1 (pre CSS 2.1) CSS:
#full-width-header {
position: relative; /* necassary to
absolute-position the child-element
#home-link relative to the header */
background: url(header-logo.jpg);
width: 800px;
height: 172px;
}
#home-link {
position: absolute;
width: 200px; /* width of the logo */
height: 172px; /* height of the logo */
top: 0; left: 0; /* top-left corner of logo */
border: 0;
float: left;
}
#header-content {
position: relative;
float: right;
width: 400px;
height: 172px;
vertical-align: bottom;
text-align: right;
}
Exemplo 2 (CSS 2.1) HTML:
<div id="site">
<div id="full-width-header">
<a href="/" id="home-link">Home</a>
<div id="header-content">We love using Joomla!</div>
</div>
<div id="body-content">OSM saves the world!</div>
<div id="footer-content">(c) the really cool web-designer</div>
</div>
Exemplo 2 (CSS 2.1) CSS:
#full-width-header {
position: relative; /* necassary to
absolute-position the child-element
#home-link relative to the header */
background: url('/header-logo.jpg');
width: 800px;
height: 172px;
}
#home-link {
position: absolute;
display: inline-block;
width: 200px; /* width of the logo */
height: 172px; /* height of the logo */
top: 0; left: 0; /* top-left corner of logo */
border: 0;
float: left;
visibility: hidden;
}
#header-content {
position: relative;
float: right;
width: 400px;
height: 172px;
vertical-align: bottom;
text-align: right;
}
Para fazer um teste, você pode copiar o trecho da index.php e do template.css, na index.php e no template.css do seu template respectivamente.
Fonte: http://docs.joomla.org Tradução e adaptação: Joomla Brasília
