суть такова, у меня меню кафе стоит столбиком, как на изображении (прикрепленный файл), как мне сделать чтобы они стояли горизонтально вряд, без промижутков, а под картинками ссылки на эти же картинки
Код HTML
<div class="kyxnia">
<a href="http://kullout.pp.ua/forum/index.php?id=7"><img src="http://kullout.pp.ua/theme/web/selemet/images/bar.jpg"; height="10%" alt="Барное меню" border="0">
<figcaption> Барное меню </figcaption></a>
<a href="http://kullout.pp.ua/forum/index.php?id=8"><img src="http://kullout.pp.ua/theme/web/selemet/images/evro.jpg"; height="10%" alt="Европейское меню" border="0">
<figcaption> Европейское меню</figcaption></a>
<a href="http://kullout.pp.ua/forum/index.php?id=9"><img src="http://kullout.pp.ua/theme/web/selemet/images/sushi.jpg"; height="10%" alt="Суши меню" border="0">
<figcaption> Суши меню</figcaption></a>
</div>
а вот сам код CSS класс div class="kyxnia"
КОД CSS (+/-)
.kyxnia {
border: 2px dotted #F4A460;
margin: 0px;
line-height: 0px;
font-size: 14px;
color: #555;
padding: 1px;
text-align: center;
}
.kyxnia figcaption {
margin: 0 15px 0 0; /* Отступы вокруг абзаца */
line-height: 20px;
}
нашел удивительный способ, добавить в css display: inline-block;
итог немного обрадовал, но ссылки тоже к сожелению получились в ряд, а надо под картинкой
Kullout, загуглить не судьба?
ValekS, с удовольствием тебе отвечу, судьба))) к своему счастью нашел решение, спасибо тебе за помощь, за подсказку)))
Kullout, значит тогда уже поздно... Но всё же. Так как я не очень люблю блочную верстку(из-за обилия дивов и ксс кода), сделал всё табличной вёрсткой:
<div class="kyxnia"><table><tr><td>
<a href="http://kullout.pp.ua/forum/index.php?id=7"><img src="http://kullout.pp.ua/theme/web/selemet/images/bar.jpg" alt="Барное меню" border="0">
<figcaption> Барное меню </figcaption></a></td><td>
<a href="http://kullout.pp.ua/forum/index.php?id=8"><img src="http://kullout.pp.ua/theme/web/selemet/images/evro.jpg" alt="Европейское меню" border="0">
<figcaption> Европейское меню</figcaption></a></td><td>
<a href="http://kullout.pp.ua/forum/index.php?id=9"><img src="http://kullout.pp.ua/theme/web/selemet/images/sushi.jpg" alt="Суши меню" border="0">
<figcaption> Суши меню</figcaption></a></td>
</tr></table></div>
Это в общих чертах. Далее уже можно всё подправить на свой вкус.
ValekS, смотри, я вот такой способ нашел, вставил, работает так как мне нужно было
<br clear="left">вставлял сразу после закрытия <img> перед словами ссылки, вот так
<div class="kyxnia">
<figcaption><a href="http://kullout.pp.ua/forum/index.php?forum=7"><img src="http://kullout.pp.ua/theme/web/selemet/images/bar.jpg" height="10%" alt="Барное меню" border="0"><br clear="left">
Барное меню </figcaption></a></div>
не знаю на сколько это правильно, но работает на хроме, опере, мозиле, сафари.
Проблема на IE 8. стоит пока XP, на IE 11 проверить не могу
