Беда с блоками - HTML & Веб-Дизайн | MMGP
Присоединяйтесь к нашему инвестиционному форуму, на котором уже 434,712 пользователей. Чтобы получить доступ ко многим закрытым разделам и начать общение -  .
Обсуждение веб-дизайна. Здесь можно получить помощь по вопросам HTML/CSS и т.д.
При поддержке
Сеть доставки контента, выбранная космическими агентствами
Важная информация
Есть опыт работы с криптовалютами? Заведи Крипто-Блог и заработай на нём!
Торгуешь криптовалютой? Оставь свой отзыв о бирже!
Разбираешься в криптовалюте? Прими участие в акции Крипторайтер 2.0 (2-10 поинтов за 1000 символов)
Изменения в акции "Оплата за сообщения".
Как на одной публикации заработать $100
Ответить
 
Первый пост Опции темы
Сообщения прочитаны и/или просмотрены Сегодня, 23:44
Старый 30.11.2013, 12:14
#1
Специалист
 
Имя: Johnny Parazit
Пол: Мужской
Возраст: 31
Адрес: London
Инвестирую в: Другое
Регистрация: 21.08.2013
Сообщений: 645
Благодарностей: 101
УГ: 0
КП: 0.154
Беда с блоками

Ребята беда с блоками, сломал себе уже всю голову!


Код HTML:
<div id="content"> /* Общий контейнер */

<div class="block">
<h1>Блок 1</h1>
</div>

<div class="block">
<h1>Блок 2</h1>
</div>

</div>
Код HTML:
#content {
	width: 100%; /* По всей ширине*/
	height: 500px; /* Высота контейнера 500px*/
	margin-top: 50px; /* Отступ в 50px сверху*/	
}

.block {
list-style: none;
text-align: center;
display: table;
display: inline-block;
*display: inline;
zoom: 1;
border: 1px solid #333;
margin: 10px; /* Отступы */
width: 45%; /* Ширина блока */
height: 450px; /* Высота блока */
color: #ffffff; /* цвет текста */
padding: 10px; /*отступы */
text-align: justify;
background: #b3b3b3; /* фон блока */
-moz-border-radius: 10px; /* закругление для старых Mozilla Firefox */
-webkit-border-radius: 10px; /* закругление для старых Chrome и Safari */
-khtml-border-radius:10px; /* закругл. для браузера Konquerer системы Linux */
border-radius: 10px; /* закругление углов для всех, кто понимает */
}
1. Проблема в том, что в Internet Explorer все ок! А вот в Google Chrome, как только я добавляю в 1 блок <p> Какой нибудь текст</p> второй съезжает вниз! Почему?
2. По оформлению самих блогов в Google Chrome все отлично, а вот в Interne Explorer углы не закругленные! Почему?

добавлено через 26 минут
Добавил vertical-align: top;
Решило проблему со сдвигом 2 блока!

Последний раз редактировалось johnnyParazit; 30.11.2013 в 12:40. Причина: Добавлено сообщение
johnnyParazit вне форума  
Старый 05.12.2013, 15:13
#2
Интересующийся
 
Пол: Мужской
Инвестирую в: HYIP
Регистрация: 05.12.2013
Сообщений: 9
Благодарностей: 6
УГ: 0
КП: 0.000
Re: Беда с блоками

border-radius:10px в IE не работает.. в старых версиях ие эффекта можно добиться с использованием PIE. и относительно блоков - много лишнего.. зачем к примеру list-style:none? потом. display:table? высота то и так фиксирована.. vartical-align:top; в свойства контента вставить.. что б вложенные блоки выравнивались по высоте.
Sublime вне форума  
Старый 25.12.2013, 07:24
#3
Специалист
 
Имя: Johnny Parazit
Пол: Мужской
Возраст: 31
Адрес: London
Инвестирую в: Другое
Регистрация: 21.08.2013
Сообщений: 645
Благодарностей: 101
УГ: 0
КП: 0.154
Автор темы Re: Беда с блоками

Отказался я от использования border-radius! все эти хаки под IE достали.. только код портят! куча лишнего и некрасивого! пусть будут квадратные..
johnnyParazit вне форума  
Старый 15.10.2014, 17:12
#4
Интересующийся
 
Пол: Мужской
Адрес: Борисоглебск
Инвестирую в: Свой бизнес
Регистрация: 15.10.2014
Сообщений: 24
Благодарностей: 0
УГ: 0
КП: 0.000
Re: Беда с блоками

а под браузер Comodo?
Starsh вне форума  
Старый 03.11.2014, 17:12
#5
Интересующийся
 
Регистрация: 20.10.2014
Сообщений: 50
Благодарностей: 4
УГ: 0
КП: 0.000
Re: Беда с блоками

Border radius в ie старых версиях не работает.
Добавьте селектор со свойствами:
Код:
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}
Эти свойства включают padding и border в заданную ширину блока(45%), а так получалось что ширина 45% + 1px border + 10px padding, и блоки не помещались вместе в родительский контейнер по ширине. И раз вы задаете ширину в % то и маргины советовал бы тоже в % задавать, тоесть блок шириной 45% + маргин 2,5%
jsfiddle.net/aopsyh6L/2/
да и вообще, зачем столько лишнего кода, вот я вам упростил http://jsfiddle.net/aopsyh6L/3/
свойства:
Код:
display: table;
display: inline-block;
*display: inline;
можно заменить свойством "float: left;"

Последний раз редактировалось Коля Середа; 03.11.2014 в 18:53.
Коля Середа вне форума  
Ответить
Войдите, чтобы оставить комментарий.
Сообщения прочитаны и/или просмотрены Сегодня, 23:44
Опции темы

Быстрый переход


Случайные темы
Аватар Angelika78
США: Страховая компания "Bankers Life and Casualty Company"
От Angelika78 в разделе «Страховые компании»
Аватар fxwaves
Акции Amazon [AMZN] (nasdaq)
От fxwaves в разделе «Иностранные эмитенты»
Аватар bizneser
QuikNode - запуск собственного узла Ethereum
От bizneser в разделе «Новости криптовалют»
Аватар Денис Ричмонд
cash-stream.co - cash-stream
От Денис Ричмонд в разделе «Список проблемных/неактивных/закрытых программ»
Аватар kral85
У деда - y-deda.ru
От kral85 в разделе «Архив: Список проблемных/неактивных/закрытых программ»
Аватар AMALE
ПАММ-счёт sedipe:671036 (Forex-Trend)
От AMALE в разделе «Архив: Инвестирование в ПАММ-счета»
.     
Пользователей
434,712
Тем
504,413
Сообщений
12,664,207

mmgp.telegram