Блок с картинкой и подписью под ней по центру

**DELPHIna** · 22.06.2007, 11:08

Вот возник такой вопрос, как сделать правильно такую раскладку:

есть 3 колонки по 33% допустим, в каждой из них есть блок:
- картинка большая
- под картинкой ссылка с маленькой картинкой

(см. пристёгнутый файл схемы)

Мне нужно, чтобы при любом изменении окна браузеора блок с картинкой и текстом под ней(см. в приложении красным бордюром обведен блок) был всегда по центру! А текст с картинкой прибит всегда к левому краяю картинки.

Т.е. если картинка 260px, то всё, что располагается под картинкой тоже шириной 260px и не выходит за гарницы картинки.

Предположим, что размеры Большой картинки фиксированные(думаю, что так проще будет) - 260px
колонки:

Код:

<div id="middlecontent">
****<div id="mcleft">
 *[img]img/pict1.jpg[/img]
 *

[Только зарегистрированные пользователи могут видеть ссылки. ]</p>
****</div>
****<div id="mccenter">
 *[img]img/pict1.jpg[/img]
 *

[Только зарегистрированные пользователи могут видеть ссылки. ]</p>
****</div>
****<div id="mcright">
 *[img]img/pict1.jpg[/img]
 *

[Только зарегистрированные пользователи могут видеть ссылки. ]</p>
****</div>
</div>

сcs:
#middlecontent {width: 100%; overflow: hidden;}
#mcleft, #mccenter {width: 33%; float: left;}
* html #mccenter {margin-right: -1px;}
#mcright {width: 34%; *float: right;}

мал.картинку-лого слева от текста я думаю можно задать в тэге <a>

Подскажите, как же сделать эти блоки точно по центру колонки, каждый блок с картинкой по центру своей колонки!!!! (между колонками есть отступы...примерно по 20px)

**yanagee** · 22.06.2007, 11:38

Предположим, что размеры Большой картинки фиксированные(думаю, что так проще будет) - 260px

Этот вопрос тут постоянно обсуждается, в каждой теме вижу, блин. Да нельзя ж картинки так вот растягивать

между колонками есть отступы...примерно по 20px

Тоже недавно видел где-то. Вывод был, что нельзя процентную ширину писать вместе в один блок с пиксельными отступами.

Подскажите, как же сделать эти блоки точно по центру колонки, каждый блок с картинкой по центру своей колонки!!!!

Если правильно уяснил суть вопроса, то

Код:

<style type="text/css">

****#container {width: 30%; border: 1px dotted #ccc; text-align: center;}
****#container div {width: 200px; border: 1px dotted #669; text-align: left;}
****
</style>




<div id="container">
****<div>
 *[img]pic1.jpg[/img]

 *<div>
 *****[img]pic2.gif[/img]
 *****ссылка
 *</div>
****</div>
</div>

и три их таких вставлять

**yanagee** · 22.06.2007, 11:48

Не, сорри, сморозил

**DELPHIna** · 22.06.2007, 11:51

Originally posted by yanagee@Jun 22 2007, 09:48
Не, сорри, сморозил
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]

что сморозили?

**yanagee** · 22.06.2007, 12:13

что сморозили?

Да написал там непонятно что...

Вот так будет правильно

Код:

<style type="text/css">

****img {background-color: #ccc;}
****.container {width: 33%; border: 1px dotted #090; float: left;}
****.container div {width: 200px; border: 1px dotted #009; text-align: left;}
****.container div div {text-align: left; border: 1px solid #900;}
****
</style>




<div class="container">
<center>
****<div>
 *[img]pic1.jpg[/img]


 *<div>
 *****[img]pic2.gif[/img]
 *****[Только зарегистрированные пользователи могут видеть ссылки. ]
 *</div>
****</div>
</center>
</div>
<div class="container">
<center>
****<div>
 *[img]pic1.jpg[/img]


 *<div>
 *****[img]pic2.gif[/img]
 *****[Только зарегистрированные пользователи могут видеть ссылки. ]
 *</div>
****</div>
</center>
</div>
<div class="container">
<center>
****<div>
 *[img]pic1.jpg[/img]


 *<div>
 *****[img]pic2.gif[/img]
 *****[Только зарегистрированные пользователи могут видеть ссылки. ]
 *</div>
****</div>
</center>
</div>

Ну что, нормально? Или опять не то?

**DELPHIna** · 22.06.2007, 12:28

yanagee ...похоже на то, что надо...

но неужели это самый короткий способ? 2 дива и тэг center ?

я нашла несколько вариантов Инете, но все какие то не совсем такие.... Ваш вариант похоже самый близкий. Спасибо!

посмотрим ...может у кого будет более короткий...а рез-ом я этим довольна....правда ещё не везде потестила

**yanagee** · 22.06.2007, 12:58

но неужели это самый короткий способ? 2 дива и тэг center ?

Максимум, что теоретически можно убрать - тег center. Остальные задают структуру. А в css нет свойства align. Есть только text-align. Логично, что для выравнивания блоков оно не работает..

Спасибо!

Не за что

**Aykroyd** · 22.06.2007, 19:17

Ерундой занимаетесь )

Тэг <center> давно относится к нерекомендуемым... Непонятно зачем нужные
-ы... Нерекомендуемый атрибут align... Какие-то классы...

Все что в красной рамке – в отдельный див и {width: 260px; margin: 0px auto;}. И все. Ну а внутри там логотип можно зафлоатить налево...

P.S. И вообще, возможно, что по семантике логичнее представить содержимое каждой колонки как список определений из одного пункта...

**yanagee** · 22.06.2007, 19:40

Ерундой занимаетесь )

дык :blush2:

тэг <center> давно относится к нерекомендуемым...

без него не выходит что-то

Непонятно зачем нужные

Да не нужны, впринципе. Так просто поставил

Нерекомендуемый атрибут align...

Можно флоатом...

Какие-то классы...

Что плохого?

Все что в красной рамке – в отдельный див и {width: 260px; margin: 0px auto;}. И все. Ну а внутри там логотип можно зафлоатить налево...

Может, код покажите, а то у меня что-то не получается..

**Aykroyd** · 22.06.2007, 20:15

Originally posted by yanagee@Jun 22 2007, 19:40
Можно флоатом...
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Нужно флоатом. Или даже бэкграундом, если лого не меняется и не несет особой смысловой нагрузки...

Originally posted by yanagee@Jun 22 2007, 19:40
Что плохого?
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
То, что незачем их городить, если и без них прекрасно можно обойтись...

Originally posted by yanagee@Jun 22 2007, 19:40
Может, код покажите, а то у меня что-то не получается..
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>***</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
* {margin: 0px; padding: 0px;}
body {color: #000000; background: #FFFFFF; min-width: 1000px;}

#middlecontent {width: 100%; overflow: hidden;}
#mcleft {width: 33%; float: left; background: #CCFFFF;}
#mccenter {width: 33%; float: left; background: #FFFFCC;}
* html #mccenter {margin-right: -1px;}
#mcright {width: 34%; float: right; background: #FFCCFF;}

p {background: url(img/logo.gif) no-repeat; padding-left: 30px;}
.cnt {width: 260px; margin: 0px auto;}
</style>
</head>

<body>
<div id="middlecontent">
****<div id="mcleft">
 *<div class="cnt">
 *****[img]img/bg1.gif[/img]
 *****

[Только зарегистрированные пользователи могут видеть ссылки. ]</p>
 *</div>
****</div>
****<div id="mccenter">
 *<div class="cnt">
 *****[img]img/bg1.gif[/img]
 *****

[Только зарегистрированные пользователи могут видеть ссылки. ]</p>
 *</div>
****</div>
****<div id="mcright">
 *<div class="cnt">
 *****[img]img/bg1.gif[/img]
 *****

[Только зарегистрированные пользователи могут видеть ссылки. ]</p>
 *</div>
****</div>
</div>
</body>
</html>

**yanagee** · 22.06.2007, 20:30

А, блин...
Чё-то ваще сегодня торможу по стрпшеому...
Если б ещё мона было так по вертикали выравнивать...

**Aykroyd** · 22.06.2007, 20:41

Originally posted by yanagee@Jun 22 2007, 20:30
Если б ещё мона было так по вертикали выравнивать...
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Э... Мда...

[Только зарегистрированные пользователи могут видеть ссылки. ]
[Только зарегистрированные пользователи могут видеть ссылки. ]

**yanagee** · 22.06.2007, 21:00

Не, это понятно...
Я имею ввиду одной строчкой типа margin: auto 0px;...

**Aykroyd** · 22.06.2007, 21:27

Ну, лет через пять-шесть... может быть... )

**mamba** · 23.06.2007, 18:19

А что за нерекомендуемые теги? Я о них никогда не слышал

**Aykroyd** · 23.06.2007, 18:29

А о спецификациях и рекомендациях W3C слышали? )

**yanagee** · 23.06.2007, 20:28

mamba

[Только зарегистрированные пользователи могут видеть ссылки. ]

**Aykroyd** · 23.06.2007, 20:31

yanagee

Очень желательно не использовать вообще следующие теги...
Очень желательно не использовать вообще следующие аттрибуты...

Плакалъ...

**yanagee** · 23.06.2007, 20:42

Aykroyd

<center>
<div>
[img]pic1.jpg[/img]

<div>
* [img]pic2.gif[/img]
* [Только зарегистрированные пользователи могут видеть ссылки. ]

</div>
</center>[/quote]

ну да, смешно

честно говоря, до настоящего момента не придавал особого значения...
каюссь...
согрешил малость(всмысле многость...)

**Aykroyd** · 23.06.2007, 21:15

Да ладно Вам )
Видели бы Вы мои говнокоды полгода назад ))

Тема: Блок с картинкой и подписью под ней по центру

Опции темы

Поиск по теме

Отображение

Похожие темы

Помогите с картинкой

вспоминаем html-код!!!с картинкой

Select с картинкой

Таблица по центру

Окно с описанием ссылки и картинкой

Ваши права