Jump to content

Текст снизу изображения


Recommended Posts

Подскажите как разместить текст снизу изображения

<!DOCTYPE html>
<html>
<head>
<meta charset="windows-1251">
<title>...</title>

<style type="text/css">
   img { 
   margin:0 0 4px 0; /* top, right, bottom, left*/
   }
  </style> 
  
   </head>
	<body>
	                       
<div><p align="left">

<a href="/"><img alt="" src="{THEME}/images/lol/champion/Aatrox.png" width="80" height="80">
<a href="/"><img alt="" src="{THEME}/images/lol/champion/Ahri.png" width="80" height="80"></a>
<a href="/"><img alt="" src="{THEME}/images/lol/champion/Akali.png" width="80" height="80"></a>

</p>

 </div>		
	</body>
						
						
</html> 

Пример 

http://joborgame.ru/game-lol
Link to post
Share on other sites
<!DOCTYPE html>
<html>
<head>
   <meta charset="windows-1251">
   <title>...</title>

<style type="text/css">
   img { 
   margin:0 0 4px 0;
   width:80px;
   height:80px;
   }
   figcaption, figure{
   display: block;   
   }   
   figure{
    border: 0 none;
    margin: 0;
    outline: 0 none;
    padding: 0;
    vertical-align: baseline;
   }
   figcaption{
   width:80px;
   }
  </style> 
  
   </head>
	<body>
	                       
<div><p align="left">
<figure>
   <a href="/"><img alt="" src="{THEME}/images/lol/champion/Aatrox.png">
     <figcaption>текст</figcaption>
   </a>
</figure>
<figure>   
   <a href="/"><img alt="" src="{THEME}/images/lol/champion/Ahri.png">      
     <figcaption>текст</figcaption>   
   </a>
</figure>
<figure>   
   <a href="/"><img alt="" src="{THEME}/images/lol/champion/Akali.png"></a>  
     <figcaption>текст</figcaption>
</figure>

</p>

 </div>		
	</body>
						
						
</html> 

в первых двух вариантах текст под картинкой тоже будет ссылкой, а в третьем - просто текст

Link to post
Share on other sites

значит нужно увеличить размер блока, в котором лежит картинка на размер ссылки...

 

 

 

мы говорим про этот сайт?

Не, это я как пример просто привел

Link to post
Share on other sites

Сайт на денвере

<!DOCTYPE html>
<html>
<head>
<meta charset="windows-1251">
<title>...</title>

<style type="text/css">
   img { 
   margin:0 0 4px 0; /* top, right, bottom, left*/
   }
  </style> 
  
   </head>
	<body>
	                       
<div><p align="left">

<a href="/"><img alt="" src="{THEME}/images/lol/champion/Aatrox.png" width="80" height="80">1
<a href="/"><img alt="" src="{THEME}/images/lol/champion/Ahri.png" width="80" height="80"></a>
<a href="/"><img alt="" src="{THEME}/images/lol/champion/Akali.png" width="80" height="80"></a>
<a href="/"><img alt="" src="{THEME}/images/lol/champion/Alistar.png" width="80" height="80"></a>
<a href="/"><img alt="" src="{THEME}/images/lol/champion/Amumu.png" width="80" height="80"></a>
<a href="/"><img alt="" src="{THEME}/images/lol/champion/Anivia.png" width="80" height="80"></a>
<a href="/"><img alt="" src="{THEME}/images/lol/champion/Annie.png" width="80" height="80"></a>
<a href="/"><img alt="" src="{THEME}/images/lol/champion/Ashe.png" width="80" height="80"></a>
<a href="/"><img alt="" src="{THEME}/images/lol/champion/Azir.png" width="80" height="80"></a>
<a href="/"><img alt="" src="{THEME}/images/lol/champion/Bard.png" width="80" height="80" ></a>
<a href="/"><img alt="" src="{THEME}/images/lol/champion/Blitzcrank.png" width="80" height="80"></a>
<a href="/"><img alt="" src="{THEME}/images/lol/champion/Brand.png" width="80" height="80"></a>






</p>

	
			

                        </div>
						
						
						</body>
						
						
						           </html>
Link to post
Share on other sites

:)

1. размер дива в котором лежат все картинки

2.размер ссылки - он включает в себя размер картинки (он 80 пикселей) + отступ справа + отступ слева + отступ сверху + отступ снизу и размер текста

для примера - отступы по бокам и сверху по 5 пикселей и отступ снизу, включая текст 15 пикселей - получается размер ссылки 90 на 100...

3.количество ссылок в ряду дадут размер дива, например : 10 ссылок вряд  дадут размер дива в 900 пикселей...

Link to post
Share on other sites

:)

1. размер дива в котором лежат все картинки

2.размер ссылки - он включает в себя размер картинки (он 80 пикселей) + отступ справа + отступ слева + отступ сверху + отступ снизу и размер текста

для примера - отступы по бокам и сверху по 5 пикселей и отступ снизу, включая текст 15 пикселей - получается размер ссылки 90 на 100...

3.количество ссылок в ряду дадут размер дива, например : 10 ссылок вряд  дадут размер дива в 900 пикселей...

Спасибо понял:) буду пробовать:) 

Link to post
Share on other sites

как вариант

<!DOCTYPE html>
<html>
<head>
<meta charset="windows-1251">
<title>...</title>
<style type="text/css">
   img { 
   margin:0 0 4px 0; /* top, right, bottom, left*/
   }
   .imgdesc {
    margin: 61px 61px 61px -75px;
    position: absolute;
    width: 74px;
   }
  </style> 
</head>
<body>
   <div>
      <p align="left">
         <a href="/"><img alt="" src="1.png" width="80" height="80"><span class="imgdesc">1</span></a>
         <a href="/"><img alt="" src="1.png" width="80" height="80"><span class="imgdesc">2</span></a>
         <a href="/"><img alt="" src="1.png" width="80" height="80"><span class="imgdesc">1</span></a>
      </p>
   </div>		
</body>						
</html> 

Link to post
Share on other sites

 

как вариант

<!DOCTYPE html>
<html>
<head>
<meta charset="windows-1251">
<title>...</title>
<style type="text/css">
   img { 
   margin:0 0 4px 0; /* top, right, bottom, left*/
   }
   .imgdesc {
    margin: 61px 61px 61px -75px;
    position: absolute;
    width: 74px;
   }
  </style> 
</head>
<body>
   <div>
      <p align="left">
         <a href="/"><img alt="" src="1.png" width="80" height="80"><span class="imgdesc">1</span></a>
         <a href="/"><img alt="" src="1.png" width="80" height="80"><span class="imgdesc">2</span></a>
         <a href="/"><img alt="" src="1.png" width="80" height="80"><span class="imgdesc">1</span></a>
      </p>
   </div>		
</body>						
</html> 

в Вашем варианте тест накладывается на изображение: http://jsfiddle.net/dkjfr0L9/

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...