Проблемка небольшая

Константин · March 29, 2008

Вобщем, надо сделать чтобы картинка и текст под ней (назовем это для краткости карточкой) были отцентрированы по центру. Т.е. чтобы карточки распологались друг за другом... Ой че-то я запутался как сказать =). Вобщем вот код. работает только в ИЕ7, Опера и ФФ. Не работает в Сафари и, кажется, в ИЕ6. Как сделать чтоб везде работало?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=windows-1251">
<title>Титле</title>
<style>
 body{text-align:center}
 table{width: 100px; text-align: center; display:inline; margin:20px; border:1px solid red}
 table tr td{border:1px solid blue}
 table tr td div{border:1px solid green; text-align:center; width:100px}
</style>
</head>
<body>

<h1>Пример не работает в Сафари и, кажется, в ИЕ6.</h1>
<table>
 <tr><td><img src="pic.gif"></td></tr>
 <tr><td><div>Подпись к рисунку</div></td></tr>
</table>
<table>
 <tr><td><img src="pic.gif"></td></tr>
 <tr><td><div>Подпись к рисунку</div></td></tr>
</table>
<table>
 <tr><td><img src="pic.gif"></td></tr>
 <tr><td><div>Подпись к рисунку</div></td></tr>
</table>
<table>
 <tr><td><img src="pic.gif"></td></tr>
 <tr><td><div>Подпись к рисунку</div></td></tr>
</table>
<table>
 <tr><td><img src="pic.gif"></td></tr>
 <tr><td><div>Подпись к рисунку</div></td></tr>
</table>
<table>
 <tr><td><img src="pic.gif"></td></tr>
 <tr><td><div>Подпись к рисунку</div></td></tr>
</table>
<table>
 <tr><td><img src="pic.gif"></td></tr>
 <tr><td><div>Подпись к рисунку</div></td></tr>
</table>

</body>
</html>

Константин · March 30, 2008

Похоже никто не понял, что я сделать хочу. Вобщем, надо сделать, чтобы карточки распологались друг за другом и выравнивались по центру, и чтобы когда, например, следующая карточка не умещалась в этом ряду, она переходила на следующий и была по центру.

Dimitry Wolotko · March 30, 2008

Локализуйте проблему, а то название топика "небольшая проблема", а кода много.

Azadi · March 31, 2008

Такое решение на div'ах вам не подойдет?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* {
 padding:0;
 margin:0;
 border:0;
}
body{text-align:center}
 .gallery {float:left; width:100px; text-align: center; display:inline; margin:20px; border:1px solid red}
 .gallery IMG{border:1px solid blue; vertical-align:bottom; width:98%;}
 .text {border:1px solid green; text-align:center;}
</style>
</head>
<body>

<h1>Пример работает в Сафари 3.1, FF 2.0.13, Opera 9.25, IE 7 и в ИЕ6.</h1>

<div class="gallery">
 <img src="pic.gif">
 <div class="text">Подпись к рисунку</div>
</div>

<div class="gallery">
 <img src="pic.gif">
 <div class="text">Подпись к рисунку</div>
</div>

<div class="gallery">
 <img src="pic.gif">
 <div class="text">Подпись к рисунку</div>
</div>

<div class="gallery">
 <img src="pic.gif">
 <div class="text">Подпись к рисунку</div>
</div>

<div class="gallery">
 <img src="pic.gif">
 <div class="text">Подпись к рисунку</div>
</div>

<div class="gallery">
 <img src="pic.gif">
 <div class="text">Подпись к рисунку</div>
</div>

<div class="gallery">
 <img src="pic.gif">
 <div class="text">Подпись к рисунку</div>
</div>

<div class="gallery">
 <img src="pic.gif">
 <div class="text">Подпись к рисунку</div>
</div>

<div class="gallery">
 <img src="pic.gif">
 <div class="text">Подпись к рисунку</div>
</div>

</body>
</html>

homm · March 31, 2008

Azadi, это же совсем не то

Константин · March 31, 2008

Azadi. Мне надо, чтобы карточки выравнивались по центру, а не по левому краю.

Тупо выровнить рисунки по центру легко, но вот, чтобы под ними еще была надпись, с этим у меня возникли проблемы. На таблицах или на дивах мне без разницы (слава начальству =))

А в ИЕ6 работает оказывается. Значит осталось только заколдовать Сафари.

ZoNT · March 31, 2008

убрал "http://www.w3.org/TR/html4/loose.dtd" и заработало в сафари...

Константин · April 1, 2008

Точно. заработало. благодарю. Эти непонятные доктайпы. кто их придумал.

Azadi · June 18, 2008

Потестите код кто-нибудь, а то у меня, кажется, все работает:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
BODY {
 color:#fff;
 padding:0;
 margin:0;
 text-align:center;
}
div.inline {
 display:inline-block;
 margin:10px 40px;
 padding:20px;
 background-color:red;
}
div.inline P {
 margin:5px;
}
</style>

<!--[if lte IE 7]>
<style type="text/css">
 div.inline {
 display:inline;
 }
</style>
<![endif]-->

</head>

<body>

 <div class="inline">
 <img src="bg.jpg" />
 <p>подпись</p>
 </div>
 <div class="inline">
 <img src="bg.jpg" />
 <p>подпись</p>
 </div>
 <div class="inline">
 <img src="bg.jpg" />
 <p>подпись</p>
 </div>
 <div class="inline">
 <img src="bg.jpg" />
 <p>подпись</p>
 </div>
 <div class="inline">
 <img src="bg.jpg" />
 <p>подпись</p>
 </div>
 <div class="inline">
 <img src="bg.jpg" />
 <p>подпись</p>
 </div>
 <div class="inline">
 <img src="bg.jpg" />
 <p>подпись</p>
 </div>
 <div class="inline">
 <img src="bg.jpg" />
 <p>подпись</p>
 </div>
 <div class="inline">
 <img src="bg.jpg" />
 <p>подпись</p>
 </div>

</body>
</html>

Размер bg.jpg - 100х100.

Sign In

Проблемка небольшая

Question

Константин

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

Константин

Link to comment

Share on other sites

Dimitry Wolotko

Link to comment

Share on other sites

Azadi

Link to comment

Share on other sites

homm

Link to comment

Share on other sites

Константин

Link to comment

Share on other sites

ZoNT

Link to comment

Share on other sites

Константин

Link to comment

Share on other sites

Azadi

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information