Link com texto abaixo da imagem

Ivan Guimaraes · Fevereiro 26, 2013

Galera me ajuda, como faço para colocar uma palavra abaixo da imagem em um link

HTML

<!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>INDEX</title>
<link rel="stylesheet" type="text/css" href="script/style.css" />
</head>

<body>
<!--HEADER//-->
<div id="logo-menu">
	<div id="alinhador">
		<div id="logo">
			<a href="index.html"><img src="Imagens/logo.png" alt="Pagina Inicial" /></a>
    	</div>
   		<ul id="menu">
       		<li class="menu-superior"><a href="">Inicio</a></li>
           	<li class="menu-superior"><a href="">Categorias</a></li>
           	<li class="menu-superior"><a href="">Serviço</a></li>
       	</ul>
	</div>
</div>
<!--FIM-HEADER//-->
<!--CORPO//-->
<div id="fundo">
	<div id="alinhador">
		<div id="div-busca">
    		<div id="texto-1"><img style="position: relative; z-index: 2;" src="imagens/texto-1.png" alt="" /></div>
        	<form id="formulario-busca" action="" method="">
        		<input type="text" name="texto-busca" class="barra-busca" placeholder="Procurar Profissional" />
            	<a href="" title="" class="botao-busca">Buscar</a>
        	</form>
        	<div id="texto-2"><img style="margin-top: -30px;" src="imagens/texto-2.png" alt="" /></div>
    	</div>
        <table cellspacing="5">
    		<tr class="">
        		<td class="">
            		<a href="">
                		<img style="width: 188px; float: left;" src="imagens/pag-inicial.jpg" alt="" />
                    	<span class="descricao-img">Professor</span>
                	</a>
            	</td>
                <td class="">
            		<a href="">
                		<img style="width: 188px; float: left;" src="imagens/pag-inicial.jpg" alt="" />
                    	<span class="descricao-img">Professor</span>
                	</a>
            	</td>
                <td class="">
            		<a href="">
                		<img style="width: 188px; float: left;" src="imagens/pag-inicial.jpg" alt="" />
                    	<span class="descricao-img">Professor</span>
                	</a>
            	</td>
                <td class="">
            		<a href="">
                		<img style="width: 188px; float: left;" src="imagens/pag-inicial.jpg" alt="" />
                    	<span class="descricao-img">Professor</span>
                	</a>
            	</td>
                <td class="">
            		<a href="">
                		<img style="width: 188px; float: left;" src="imagens/pag-inicial.jpg" alt="" />
                    	<span class="descricao-img">Professor</span>
                	</a>
            	</td>
        	</tr>
    	</table>
	</div>
</div>
<!--FIM-CORPO//-->
</body>
</html>

CSS

*{margin: 0;padding: 0;}
body{
	background: #0FF;
}
div#alinhador{
	width: 960px;
	margin: 0 auto;
}
#logo-menu{
	height: 105px;
	background-image:-moz-linear-gradient(50% 0% -90deg,rgba(0,127,255,0.8) 0%,rgba(0,127,255,0.14) 83%,rgba(252,252,252,0) 100%); 
	background-image:-webkit-gradient(linear,50% 0%,50% 107%,color-stop(0, rgba(0,127,255,0.8)),color-stop(0.83, rgba(0,127,255,0.14)),color-stop(1, rgba(252,252,252,0)));
	background-image:-webkit-linear-gradient(-90deg,rgba(0,127,255,0.8) 0%,rgba(0,127,255,0.14) 83%,rgba(252,252,252,0) 100%);
	background-image:-o-linear-gradient(-90deg,rgba(0,127,255,0.8) 0%,rgba(0,127,255,0.14) 83%,rgba(252,252,252,0) 100%);
	background-image:-ms-linear-gradient(-90deg,rgba(0,127,255,0.8) 0%,rgba(0,127,255,0.14) 83%,rgba(252,252,252,0) 100%);
	background-image:linear-gradient(-90deg,rgba(0,127,255,0.8) 0%,rgba(0,127,255,0.14) 83%,rgba(252,252,252,0) 100%);
	-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc007fff,endColorstr=#0fcfcfc,GradientType=0)";
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc007fff,endColorstr=#0fcfcfc,GradientType=0);
}
#logo a img{
	margin-top: 9px;
}
#menu{
	float: right;
	margin-top: -60px;
}
#menu li{
	float: left;
	list-style: none;
}
#menu li a{
	padding: 5px 7px;
	color: #F5F5F5;
	font-weight: bold;
	font-family:Arial, Helvetica, "sans-serif";
	text-decoration: none;
	font-size: 20px;
	margin: 2px;
	border-radius: 5px;
	-webkit-transition: 0.7s;
}
#menu li a:hover{
	color: #FFF;
	background: rgba(0, 0, 0, 0.6);
	border-radius: 5px;
}
#fundo{
	background: url(../imagens/background.jpg) no-repeat;
	background-size: cover;
}
.barra-busca{
	background: url(../imagens/fundo-barra-busca.png) no-repeat;
	width: 950px;
	height: 70px;
	border: none;
	outline: none;
	padding-left: 10px;
	font-size: 36px;
	margin-top: -15px;
}
.botao-busca{
	background-color: rgb(238,238,238);
	padding: 10px 10px;
	-moz-border-bottom-right-radius: 10px;
	-moz-border-top-right-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
	font-family: Cambria;
	font-size: 35px;
	line-height: 120%;
	font-style: italic;
	color: rgb(153,153,153);
	text-align: center;
	text-decoration: none;
	position: relative;
	left: 836px;
	top: -56px;
	-webkit-transition: 0.6s;
	-moz-transition: 0.6s;
}
.botao-busca:hover{
	background: #000;
	color: #FFF;
}
.descricao-img{
	float: left;
	margin-top: 255px;
	margin-left: -140px;
	text-align: center;
}
table{
	margin-left: -5px;
}

Alexandre Broggio · Fevereiro 27, 2013

Segue um exemplo simples de uma imagem com um texto e um texto com link logo abaixo

<div style="border:1px solid red; width:200px;">
 <img src="http://static.imasters.com.br/imasters/img/portal/header-logo.png" alt="" />
 <p>Texto com link</p>
 <p><a href="#">Texto com link</a></p>
</div>

Allan Almeida · Fevereiro 27, 2013

Deixa eu ver se entendi. Tipo isso:

---------------------------

| |

---------------------------

Texto da imagem / link

Se for isso, você pode fazer assim:

<table>
   <tr>
      <td><a href="#"><img src="..."/></br> Texto da imagem / link </a></td>
   </tr>
</table>

E se quiser colocar mais ao lado ou abaixo é só acrescentar <td>'s ou <tr>'s, respectivamente.

Entrar

Arquivado

Link com texto abaixo da imagem

Recommended Posts

Ivan Guimaraes 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Alexandre Broggio 9

Compartilhar este post

Link para o post

Compartilhar em outros sites

Allan Almeida 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Girls From Your Town - Anonymous Casual Dating - No Selfie

Alteracao Tema Wordpress Profolio

Alteracao Tema Wordpress Profolio

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante