ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Помогите расставить правильно 3 блока в CSS !
15 сообщений из 15, страница 1 из 1
Помогите расставить правильно 3 блока в CSS !
    #38696216
dik_k
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
dik_k
Участник
Если кто знает как - помогите!
3 дива должно быть рядом - один прижат к верхнему левому краю, другой к верхнему правому краю. А третий всегда по центру, причем если размер экрана маленький, то боковые дивы должны наезжать сверху на центральный див.
У меня чето перескакивает один блок на следующую строку
...
Рейтинг: 0 / 0
14.07.2014, 18:58
| Ответить | Цитировать | Написать  
Помогите расставить правильно 3 блока в CSS !
    #38696245
The_ShadoW
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
The_ShadoW
Участник
Дисклеймер: я знаю, что ссылки lmgtfy демонстрируют определенную степень неуважения к спрашивающему.

Но тем не менее.
...
Рейтинг: 0 / 0
14.07.2014, 19:25
| Ответить | Цитировать | Написать  
Помогите расставить правильно 3 блока в CSS !
    #38696309
dik_k
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
dik_k
Участник
я вообще умею искать, более того я искал до вопроса в форуме, просто под свой шаблон не смог подогнать и решил писать сам, а у самого криво выходит...

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
<!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" />
  <style type="text/css">
      html,body{margin:0;padding:0}
      .wrapper{float:left;width:100%;  }
      .centr{margin: 0 200px; text-align:center;}
      .levo{float:left;width:200px; margin-left:-100%;background:#B9CAFF}
      .pravo{float:left;width:200px;margin-left:-200px; background:#FF8539}
  </style>
</head>
<body>
<div id="container">
          <div class="wrapper">
            <div class="centr"><img src="img/c2.jpg" height="150" width="200"></div>
          </div>
          <div class="levo"><img src="img/c1.jpg" height="150" width="200"></div>
          <div class="pravo"><img src="img/c3.jpg" border="0" height="150" width="200"></div>
</div>
</body>
</html>


картинка не уезжает на след. строку, но при увеличении экрана правый блок наезжает на центральный, а левый нет. Как добиться симметричности?
...
Рейтинг: 0 / 0
14.07.2014, 21:27
| Ответить | Цитировать | Написать  
Помогите расставить правильно 3 блока в CSS !
    #38696770
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
 
так?
Код: html
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.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style>
html,body{margin:0;padding:0}
.centr{
	width:100%;
	height:150px;
	text-align:center;
	background:red;	
}
.levo{
	position:absolute;
	left:0;
	top:0;
	background:#B9CAFF;
	opacity:0.7; filter:alpha(Opacity=70);
}
.pravo{
	position:absolute;
	top:0;
	right:0;
	background:#FF8539;
	opacity:0.7; filter:alpha(Opacity=70);
}
</style>
</head>
<body>
<div id="container">
	<div class="centr"> <img src="img/c2.jpg" height="150" width="200"> </div>
	<div class="levo"> <img src="img/c1.jpg" height="150" width="200"></div>
	<div class="pravo"> <img src="img/c3.jpg" border="0" height="150" width="200"></div>
</div>
</body>
</html>

...
Рейтинг: 0 / 0
15.07.2014, 12:56
| Ответить | Цитировать | Написать  
Помогите расставить правильно 3 блока в CSS !
    #38701053
dik_k
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
dik_k
Участник
да, именно так!
Но почему начиная с 8-го IE и выше этот код работает коряво???!!! (проверял в ietester'e)
...
Рейтинг: 0 / 0
19.07.2014, 16:55
| Ответить | Цитировать | Написать  
Помогите расставить правильно 3 блока в CSS !
    #38701055
dik_k
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
dik_k
Участник
вопрос снят!
...
Рейтинг: 0 / 0
19.07.2014, 17:06
| Ответить | Цитировать | Написать  
Помогите расставить правильно 3 блока в CSS !
    #38701056
dik_k
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
dik_k
Участник
большое спасибо за помощь с симметричным смещением!!!
...
Рейтинг: 0 / 0
19.07.2014, 17:06
| Ответить | Цитировать | Написать  
Помогите расставить правильно 3 блока в CSS !
    #38701161
dik_k
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
dik_k
Участник
обясните в чём причина:
если ставлю <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> то ietester показывает во всех варинтах ИЕ нормальное отображение (при изменении экрана картинки правильно накладываются друг на друга)

если меняю на <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/loose.dtd">
то показывается в ietester от ИЕ8 и выше - криво (хотя на простом ie8 нормально...)
...
Рейтинг: 0 / 0
20.07.2014, 08:48
| Ответить | Цитировать | Написать  
Помогите расставить правильно 3 блока в CSS !
    #38701170
dik_k
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
dik_k
Участник
ставлю <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
и вижу в ietester тоже от 8 и выше версии перекосы
На валидность проверял - без ошибок и предупреждений
...
Рейтинг: 0 / 0
20.07.2014, 09:25
| Ответить | Цитировать | Написать  
Помогите расставить правильно 3 блока в CSS !
    #38701175
dik_k
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
dik_k
Участник
и ещё:
стоит мне картинки выставить в css - центральный блок исчезает
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
<!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>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>........</title>
        <style type="text/css">
        html,body{margin:0;padding:0}
        #h_centr{ background: url(img/c3.jpg) no-repeat; width:100%;  height:150px;  text-align:center;  }
        #h_levo{ background: url(img/c3.jpg) no-repeat; width:200px; height:150px; position:absolute;  	left:0;  top:0;  	}
        #h_pravo{ background: url(img/c1.jpg) no-repeat; width:200px; height:150px; position:absolute;  top:0;  right:0;  }
        </style>
</head>
<body>
	<div id="h_centr"></div>
	<div id="h_levo"></div>
	<div id="h_pravo"></div>
</body>
</html>
...
Рейтинг: 0 / 0
20.07.2014, 10:07
| Ответить | Цитировать | Написать  
Помогите расставить правильно 3 блока в CSS !
    #38701210
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
dik_k,

а почему нельзя HTML5 ?
Код: html
1.
<!DOCTYPE HTML>
...
Рейтинг: 0 / 0
20.07.2014, 13:33
| Ответить | Цитировать | Написать  
Помогите расставить правильно 3 блока в CSS !
    #38701246
dik_k
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
dik_k
Участник
можно, только это ничего не меняет - в ietester'e с 8 версии и выше смещение при изменении размеров экрана идёт неверное.

При переносе картинки из html в фон дива на css - она исчезает (по крайней мере средний блок)
(код переноса в css я привёл чуть выше)
...
Рейтинг: 0 / 0
20.07.2014, 15:45
| Ответить | Цитировать | Написать  
Помогите расставить правильно 3 блока в CSS !
    #38701518
st_st
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
st_st
Участник
dik_kможно, только это ничего не меняет - в ietester'e с 8 версии и выше смещение при изменении размеров экрана идёт неверное.

Значит у вас изначально не было доктайпа (он был неправильно написан - с ошибками), то есть браузер работал в режиме совместимости. Теперь когда поставили правильный доктайп, браузер начал нормально работать и отобразил страницу согласно современным представлениям.
...
Рейтинг: 0 / 0
21.07.2014, 09:10
| Ответить | Цитировать | Написать  
Помогите расставить правильно 3 блока в CSS !
    #38701572
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
dik_k,
 
 
Код: html
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.
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; windows-1251">
<style type="text/css">
html,body {margin:0;padding:0}
#h_centr {
	background:url(http://koulikov.com/wp-content/uploads/2012/11/webdesigntuts-sprite.png) 50% 0 no-repeat;
	width:100%;
	height:150px;
	text-align:center;
}
#h_levo {
	background:url(http://koulikov.com/wp-content/uploads/2012/11/webdesigntuts-sprite.png) 0 -100px no-repeat;
	width:200px;
	height:150px;
	position:absolute;
	left:0;
	top:0;
}
#h_pravo {
	background:url(http://koulikov.com/wp-content/uploads/2012/11/webdesigntuts-sprite.png) 0 -200px no-repeat;
	width:200px;
	height:150px;
	position:absolute;
	right:0;
	top:0;
}
</style>
</head>
<body>
<div>
	<div id="h_centr"></div>
	<div id="h_levo"></div>
	<div id="h_pravo"></div>
</div>
</body>
</html>

...
Рейтинг: 0 / 0
21.07.2014, 10:16
| Ответить | Цитировать | Написать  
Помогите расставить правильно 3 блока в CSS !
    #38701757
dik_k
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
dik_k
Участник
спасибо, картинки теперь в стилях и нормально отбражаются

а что касаемо доктайпа, он стоял с самого начала, и я с самого начала проверял код на валидность. может это косяк ietestera ???(он неверно смещает картинки в ие8-ие10), в то время как в обычном ие8 который у меня стоит на компе - никакой кривизны нет
...
Рейтинг: 0 / 0
21.07.2014, 12:04
| Ответить | Цитировать | Написать  
15 сообщений из 15, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Помогите расставить правильно 3 блока в CSS !
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&fpage=95&tid=1446888]:
 0ms
get settings:
 5ms
get forum list:
 8ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 36ms
get topic data:
 5ms
get forum data:
 1ms
get page messages:
 26ms
get tp. blocked users:
 1ms
others: 243ms
total:  329ms
созд. / загр.: 329ms
x
x
Закрыть


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