ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Выровнять в DIV несколько DIV с DIVами и изображением
14 сообщений из 14, страница 1 из 1
Выровнять в DIV несколько DIV с DIVами и изображением
    #35547786
CTAJIK
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CTAJIK
Гость
Добрый день вот такая задача стоит...

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
<div class="main">

     <div class="block">
          <img src="" width="200" height="150"/>
          <div class="text">текст</div>
     </div>

     <div class="block">
          <img src="" width="200" height="150"/>
          <div class="text">текст</div>
     </div>

     <div class="block">
          <img src="" width="200" height="150"/>
          <div class="text">текст</div>
     </div>

     <div class="block">
          <img src="" width="200" height="150"/>
          <div class="text">текст</div>
     </div>

</div>

вобщем в диве надо разместить по горизонтальному центру дивы в которых находится изображение и див с текстом/

пример как это выглянет в аттаче.

Заранее спасибо!
...
Рейтинг: 0 / 0
19.09.2008, 01:00
| Ответить | Цитировать | Написать  
Выровнять в DIV несколько DIV с DIVами и изображением
    #35547954
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
А полный тестовый пример значит влом писать... Допишите де сами...
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
19.09.2008, 08:44
| Ответить | Цитировать | Написать  
Выровнять в DIV несколько DIV с DIVами и изображением
    #35547972
Korcar
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Korcar
Участник
я вот может чего-то не понимаю, но почему все отходят от использования таблиц? Таблицы устарели чтоли?
...
Рейтинг: 0 / 0
19.09.2008, 08:57
| Ответить | Цитировать | Написать  
Выровнять в DIV несколько DIV с DIVами и изображением
    #35548003
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
В Опере прокатывает такое

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<style type="text/css">
html, body {
	width:  100 %; 
	height:  100 %;
}
.main {
	width:  100 %; 
	height:  100 %;
	text-align: center;
}
.block {
	width: 200px; 
	height: 200px;
	margin: 10px;
	display: inline-block;
	border: 1px solid;
}
.block img {
	width: 200px; 
	height: 150px;
	border: 1px solid;
}
.text {
	width: 200px; 
	height: 30px;
	margin-top: 10px;
	border: 1px solid;
}
</style>
</head>
<body>
<div class="main">

     <div class="block">
          <img src="" />
          <div class="text">текст</div>
     </div>

     <div class="block">
          <img src="" />
          <div class="text">текст</div>
     </div>

     <div class="block">
          <img src="" />
          <div class="text">текст</div>
     </div>

     <div class="block">
          <img src="" />
          <div class="text">текст</div>
     </div>

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

Правда остальные браузеры кладут на это...
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
19.09.2008, 09:09
| Ответить | Цитировать | Написать  
Выровнять в DIV несколько DIV с DIVами и изображением
    #35548006
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Korcarпочему все отходят от использования таблиц? Таблицы устарели чтоли?
Мода не та...

По не понятным мне причинам заказчик требует именно блочные верстки...
...
Рейтинг: 0 / 0
19.09.2008, 09:10
| Ответить | Цитировать | Написать  
Выровнять в DIV несколько DIV с DIVами и изображением
    #35548050
Korcar
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Korcar
Участник
Добавь к стилю блока "float: left;"
Код: plaintext
1.
2.
3.
4.
5.
6.
.block {
        width: 700px;
        height: 200px;
        margin: 10px;
        display: inline-block;
        border: 1px solid;
        float: left;
...
Рейтинг: 0 / 0
19.09.2008, 09:29
| Ответить | Цитировать | Написать  
Выровнять в DIV несколько DIV с DIVами и изображением
    #35548057
Korcar
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Korcar
Участник
Работает в Опере, IE и FF.

P.S. Там только текст еще выравнять надо
...
Рейтинг: 0 / 0
19.09.2008, 09:31
| Ответить | Цитировать | Написать  
Выровнять в DIV несколько DIV с DIVами и изображением
    #35548329
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
KorcarДобавь к стилю блока "float: left;"
У меня после такого "добавления" пропало всякое центрирование по горизонтали...
...
Рейтинг: 0 / 0
19.09.2008, 11:01
| Ответить | Цитировать | Написать  
Выровнять в DIV несколько DIV с DIVами и изображением
    #35548555
CTAJIK
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CTAJIK
Гость
Вот получилось но без текста

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<style type="text/css">
html, body {
	width:  100 %; 
	height:  100 %;
}
.main {
	width:  100 %; 
	height:  100 %;
	text-align: center;
}
.block {
	width: 200px;
	height: 200px;
	margin: 10px;
	border: 1px solid;
	display: inline;
}
.block img {
	width: 200px;
	height: 150px;
	border: 1px solid;
	background-color: #CCCCCC;
	margin: 5px;
}
.text {
	width: 200px; 
	height: 30px;
	margin-top: 10px;
	border: 1px solid;
}
</style>
</head>
<body>

<div class="main">

     <div class="block"><img src="" width="200" height="150" /></div>
     <div class="block"><img src="" width="200" height="150" /></div>
     <div class="block"><img src="" width="200" height="150" /></div>
     <div class="block"><img src="" width="200" height="150" /></div>
     
</div>

</body>
</html>
...
Рейтинг: 0 / 0
19.09.2008, 12:04
| Ответить | Цитировать | Написать  
Выровнять в DIV несколько DIV с DIVами и изображением
    #35548876
CTAJIK
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CTAJIK
Гость
а с текстом так и не получается, таблицей не хочу потомучто это вывод фоток и читабельность шаблона ужасная...
вот...
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
<table border="0" align="center" cellspacing="5">
<?$count_car =  1 ; ?>  
<?foreach ($content as $row): ?>
<?if ($count_car ==  1 ) { ?>
<tr>
<?} ?>
<td align="center">
<img src="/images/<?=$row->dir ?>/<?=$row->title_image ?>" alt="image" border="0"/></a>
<div><?=$row->name ?></div>
</td>
<?$count_car++; ?>
<?if ($count_car ==  5 ) { ?>
</tr>
<?$count_car =  1 ;} ?>
<?endforeach; ?>
<?if ($count_car <>  5 ) { ?>
</tr>
<?} ?>
</table>
а вот с дивами выглядело бы так
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
<div class="main">
<?foreach ($content as $row): ?>
<div class="block">
<div><img src="/images/<?=$row->dir ?>/<?=$row->title_image ?>" alt="image" border="0"/></a></div>
<div><?=$row->name ?></div>
</div>
<?endforeach; ?>
</div>
...
Рейтинг: 0 / 0
19.09.2008, 13:22
| Ответить | Цитировать | Написать  
Выровнять в DIV несколько DIV с DIVами и изображением
    #35549970
CTAJIK
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CTAJIK
Гость
а хоть какие нибудь предложения как это сделать есть?
...
Рейтинг: 0 / 0
19.09.2008, 22:06
| Ответить | Цитировать | Написать  
Выровнять в DIV несколько DIV с DIVами и изображением
    #35549986
apapacy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
apapacy
Участник
Да ВЫам нормально все сказали float:left. Только с маргинами разберитесь.
...
Рейтинг: 0 / 0
19.09.2008, 22:30
| Ответить | Цитировать | Написать  
Выровнять в DIV несколько DIV с DIVами и изображением
    #35550020
CTAJIK
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CTAJIK
Гость
ну вот разобрался только не поцентру всё я так понял надо margin-right, margin-left в ручную подберать?
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<style type="text/css">
html, body {
	min-width:940px;
}
.main {
	margin: 0  auto;
	width:940px;
	background-color: #FFFFFF;
	border: 1px solid #FFFFFF;
	text-align: center;
}
.block {
	width: 200px;
	border: 1px solid # 000000 ;
	float: left;
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 10px;
	margin-left: auto;
}
.block img {
	width: 200px;
	height: 150px;
}
.text {
	width: 200px; 
	height: 30px;
}
.clear {
	clear: both;
}
</style>
</head>
<body>

<div class="main">

     <div class="block"><img width="200" height="150" />
     <div class="text"> 123 </div>
     </div>
     
          <div class="block"><img width="200" height="150" />
            <div class="text"> 123 </div>
  </div>
          <div class="block"><img width="200" height="150" />
            <div class="text"> 123 </div>
  </div>
  <div class="block"><img width="200" height="150" />
            <div class="text"> 123 </div>
  </div>

 <div class="clear"></div>    
</div>

</body>
</html>
...
Рейтинг: 0 / 0
19.09.2008, 23:34
| Ответить | Цитировать | Написать  
Выровнять в DIV несколько DIV с DIVами и изображением
    #35550092
apapacy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
apapacy
Участник
Да вобщем-то маргины, паддинги и бордеры всегда не лишне обозначать, а то унаследуете чего-нибудь. Но тут проще. Посчитайте какая ширина внешнего дива, какя картинки, внутреннего дива. А еще и отступы должны быть. Короче это уже дело усидчивости.
...
Рейтинг: 0 / 0
20.09.2008, 05:01
| Ответить | Цитировать | Написать  
14 сообщений из 14, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Выровнять в DIV несколько DIV с DIVами и изображением
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=35547786&tid=1455862]:
 0ms
get settings:
 7ms
get forum list:
 14ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 180ms
get topic data:
 7ms
get forum data:
 2ms
get page messages:
 31ms
get tp. blocked users:
 1ms
others: 253ms
total:  501ms
созд. / загр.: 501ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]