Sign in to follow this  
Followers 0
andstr

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

20 posts in this topic

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

<!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

Share this post


Link to post
Share on other sites
Пример 

Ну так поглядите код у примера  :) Самое просто решение. И да, у вас в коде у первой картинки тег ссылки не закрыт.

ToneR likes this

Share this post


Link to post
Share on other sites

Было бы так просто я бы не спрашивал:) Уже смотрел, но не разобрался 

Share this post


Link to post
Share on other sites

Я обычно делаю вот так:

 <figure>
        <img src="http://placekitten.com/200/200" width="200" height="200" alt="text" />
        <figcaption>Подпись к фотографии</figcaption>
    </figure>

witosp and campusboy like this

Share this post


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> 

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

Share this post


Link to post
Share on other sites

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

 

 

 

Пример 

http://joborgame.ru/game-lol

 

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

Share this post


Link to post
Share on other sites

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

 

 

 

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

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

Share this post


Link to post
Share on other sites

тогда или выкладывайте полный код страницы, или ссылку на сайт... по картинке помочь невозможно

Share this post


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>

Share this post


Link to post
Share on other sites

нужно прописать размеры:

1.размер дива,

2.размер ссылки - размер картинки + размер отступа между ссылками + размер текста снизу,

3.параграф тут вообще лишний

andstr likes this

Share this post


Link to post
Share on other sites

:)

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

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

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

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

andstr likes this

Share this post


Link to post
Share on other sites

:)

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

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

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

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

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

Share this post


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> 

Share this post


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/

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.