Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Выровнять в DIV несколько DIV с DIVами и изображением / 14 сообщений из 14, страница 1 из 1
19.09.2008, 01:00
    #35547786
CTAJIK
CTAJIK
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Выровнять в DIV несколько DIV с DIVами и изображением
Добрый день вот такая задача стоит...

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

Код: 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:10
    #35548006
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Выровнять в DIV несколько DIV с DIVами и изображением
Korcarпочему все отходят от использования таблиц? Таблицы устарели чтоли?
Мода не та...

По не понятным мне причинам заказчик требует именно блочные верстки...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.09.2008, 09:29
    #35548050
Korcar
Korcar
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Выровнять в DIV несколько DIV с DIVами и изображением
Добавь к стилю блока "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:31
    #35548057
Korcar
Korcar
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Выровнять в DIV несколько DIV с DIVами и изображением
Работает в Опере, IE и FF.

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

Код: 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, 13:22
    #35548876
CTAJIK
CTAJIK
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Выровнять в DIV несколько DIV с DIVами и изображением
а с текстом так и не получается, таблицей не хочу потомучто это вывод фоток и читабельность шаблона ужасная...
вот...
Код: 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, 22:06
    #35549970
CTAJIK
CTAJIK
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Выровнять в DIV несколько DIV с DIVами и изображением
а хоть какие нибудь предложения как это сделать есть?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.09.2008, 22:30
    #35549986
apapacy
apapacy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Выровнять в DIV несколько DIV с DIVами и изображением
Да ВЫам нормально все сказали float:left. Только с маргинами разберитесь.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.09.2008, 23:34
    #35550020
CTAJIK
CTAJIK
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Выровнять в DIV несколько DIV с DIVами и изображением
ну вот разобрался только не поцентру всё я так понял надо 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
| Ответить | Цитировать | Написать  
20.09.2008, 05:01
    #35550092
apapacy
apapacy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Выровнять в DIV несколько DIV с DIVами и изображением
Да вобщем-то маргины, паддинги и бордеры всегда не лишне обозначать, а то унаследуете чего-нибудь. Но тут проще. Посчитайте какая ширина внешнего дива, какя картинки, внутреннего дива. А еще и отступы должны быть. Короче это уже дело усидчивости.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Выровнять в DIV несколько DIV с DIVами и изображением / 14 сообщений из 14, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 493ms
Закрыть
start [/forum/topic.php?fid=22&tablet=1&tid=1455862]:
 0ms
get settings:
 10ms
get forum list:
 21ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 160ms
get topic data:
 12ms
get forum data:
 3ms
get page messages:
 65ms
get tp. blocked users:
 2ms
others: 212ms
total:  493ms
x
x
Закрыть


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