9 replies to this topic

[kenny_2008]

Eai galeraaa blzinha???


Seguinte........

eu tenho aqui um menu horizontal onde nesse menu os "Botões" são imagens que eu criei no Photoshop...

coloco as imagens no menu usando:

<div id="menu">
<center><div id="links">
<img src="botao.jpg">
<img src="botao.jpg">
</div> <!--links-->
</div><!--menu>-->

até ai tudo bem porque o tamanho dela esta de acordo com meu CSS..........

queria saber como faço pra criar "Hyperlinks" nessas imagens eu sei que uso o "href"

mais não sei a "sintaxe" correta pra funcionar......

preciso da sintaxe correta.estou no aguardo.........

Obrigado!!!

Sucesso pra todos nós!!!!!!!!!!!!!!!!!!

[Alex Hiroshi]

<a href="seu link"> sua imagem </a>

[Édipo Costa Rebouças]

<a href="seu link"> <img src="botao.jpg" alt="Equivalente Textual" /> </a>

Edição feita por: Édipo Costa Rebouças, 27/10/2008, 08:51.

[Fábio.]

eu tenho aqui um menu horizontal onde nesse menu os "Botões" são imagens que eu criei no Photoshop...

coloco as imagens no menu usando:

<div id="menu">
<center><div id="links">
<img src="botao.jpg">
<img src="botao.jpg">
</div> <!--links-->
</div><!--menu>-->

até ai tudo bem porque o tamanho dela esta de acordo com meu CSS..........

queria saber como faço pra criar "Hyperlinks" nessas imagens eu sei que uso o "href"

Bom, você pode fazer como o pessoal disse acima, colocando a TAG IMG dentro da TAG A, porém eu recomendo que, como você está atribuindo o tamanho do seu botão pelo CSS, atribua também a imagem como background. Ficaria mais ou menos assim:

a.link1{ display:block; float:left; width:100px; height:20px; background:url(../pasta/nomedaimagem.extensao) no-repeat left top; }

O display:block é pra TAG se comportar como um elemento de bloco, float:left faz as TAGS fluturarem lado a lado pra esquerda. Caso tenha declarado em algum lugar que as TAGS A têm float, é só redeclarar a propriedade no elemento que está usando.

Eu te recomendo entrar no site do Maujor ou até mesmo fazer uma busca aqui no fórum pra fazer um menu com UL e LI. Fica bem mais semântico! Um abraço.

[Édipo Costa Rebouças]

leia a parte de rolover com imagens.

http://forum.wmonlin...howtopic=206414

[Fábio.]

Bastante interessante o seu tutorial! Boa iniciativa! Porém, devemos nos atentar à semântica e principalmente à acessibilidade.
Usar os elementos corretos, pra diminuir o uso de linhas é bom! E outro detalhe, de modo algum !important é considerado um hack. Chamá-lo de hack é contraditório, visto que é uma declaração do próprio CSS, sendo totalmente validável.

Um abraço!

[Édipo Costa Rebouças]

acho que você pegou essa parte do !important na parte de min-width certo? nesse caso é hack, pois explora o funcionamento incorreto do ie6 com essa propriedade.

[Fábio.]

hehehe

Se formos chamar de hack uma redeclaração de propriedade, até pode ser. Mas no máximo, é um white-hack. Se é que essa nomenclatura existe... Porém, muitas vezes é preciso.

[Édipo Costa Rebouças]

chama-se hack pois não era para acontecer aquilo tendeu? é bug do ie6, redeclarar valores não é hack, mas explorar uma falha do navegador sim.

[Nicholas Pufal]

Qualquer coisa que seja específico para um navegador é hack.

Sejao underline para IEs... Seja o !important pra mozilla... Tudo é hack.

Quando se diz "sites acessíveis" ou "acessibilidade" é um conceito que está dentro de cross-browser. Cross-browser significa que não importa o browser, vai ser compatível. Que teu código é lido e interpretado de forma legal (todas as propriedades usadas), por todos eles. Isso é a teoria de cross-browser. Na prática cross-browser talvez seria "que funcione legal em todos, de forma idêntica".

Mas ainda assim, essas firulas aí de que só funcione aqui ou acolá, é hack. Não existe meio-termo de hack.