Перейти к содержимому



  • Закрытая тема Тема закрыта

Сборник вопросов по HTML, CSS и прочее

#61 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176
0

Отправлено 22 Февраль 2011 - 01:11

Symphony,
не нужно рассказывать, что такое display:block и !important. Вопрос был не об этом.
Если неясно, поясню:
Инструкция display: block !important; — говорит браузеру, что описывается блочный элемент, причем это свойство с повышенным приоритетом
Инструкция float: left; — говорит браузеру, что описывается тоже блочный элемент + еще указывается обтекание этого элемента.

Вопрос о том, что непонятно, с какой целью был повышен приоритет свойства display: block;
И, вообще, зачем это свойство тут указано?
Не достаточно ли просто использовать свойство float: left; ?
  • 0

#62 ZiTosS

ZiTosS
  • Пользователь
  • 5 148 сообщений
  • Репутация: 8

Отправлено 22 Февраль 2011 - 23:15

yury, это никакой не хак. Просто содержимое
#gallery ul li {
	display: inline;
	list-style: none outside none;
}
Определено в двух файлах - site.css и jquery.lightbox-0.5.css
Заменим в одном, может подцепиться из другого. Поэтому поставил !important.

Добавлено:

И, вообще, зачем это свойство тут указано?

Проверил (правда только в FF), и вправду можно не указывать display: block;, главное чтобы было float
  • 0

#63 bestolloch

bestolloch
  • Пользователь
  • 224 сообщений
  • Репутация: 1

Отправлено 22 Февраль 2011 - 23:53

Тоже проверял в ff сегодня (щас в опере и експлоире глянул (последнем) отображает как "блок", но почему то нигда в описание ни видел раньше)


  • 0

#64 ZiTosS

ZiTosS
  • Пользователь
  • 5 148 сообщений
  • Репутация: 8

Отправлено 23 Февраль 2011 - 13:58

bestolloch, конечно можно понять это из отображения списка. В списке по умолчанию каждый элемент li отображается на новой строке, а это признак блочного элемента. Я так понимаю, ИМХО.
Поэтому по умолчанию у элемента li:
/* по умолчанию */
ul li {
   display: block;
}

  • 0

#65 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 23 Февраль 2011 - 15:58

Ребята, или вы не в ту сторону думаете или я не понимаю о чем вы. ;)
"Блочность" li по умолчанию тут ни при чем.
А важно то, что float: left; (можно и float: right; лишь бы не float: none;) помимо своей основной задачи (указать обтекание) добавляет свойство блочности _любому_ элементу в том числе и строчному. Потому что обтекать можно только блоки.
Сравните, например, два строчных элемента, к одному из которых применено float: left;
<!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" xml:lang="ru" lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tst</title>
<style type="text/css">
.float{
float: left;
border: 1px solid red;
width: 300px;
}
.nofloat{
border: 1px solid red;
width: 300px;
}
</style>
</head>
<body>
<p>
<i class="float">Итак, у блока есть содержимое, например, для элемента p - это текст. Вокруг содержимого есть отступы (padding), они служат для того, чтобы текст не примыкал вплотную к границе блока. Фон отступов такой же, как и у содержимого.
</i>
<i class="nofloat">Итак, у блока есть содержимое, например, для элемента p - это текст. Вокруг содержимого есть отступы (padding), они служат для того, чтобы текст не примыкал вплотную к границе блока. Фон отступов такой же, как и у содержимого.
</i>
</p>
</body>
</html>

Для визуализации еще добавлена красная рамочка и зафиксирована ширина элементов. Естественно строчный элемент игнорирует ограничение по ширине, а рамочку интерпретирует по-строчному.
  • 0

#66 ZiTosS

ZiTosS
  • Пользователь
  • 5 148 сообщений
  • Репутация: 8

Отправлено 23 Февраль 2011 - 16:12

yury, Я над этим не заморачивался, все не упомнишь. Поэтому всегда перестраховываюсь, на всякий. Спасибо за пояснения :mellow: Рад, что есть у нас грамотные люди в верстке.
Подобным образом легко разобраться с разницей между разными типами элементов на странице :) Визуализация всегда быстрее донесет суть ;)
  • 0

#67 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 23 Февраль 2011 - 16:28

ZiTosS,
не такой уж я сильно-грамотный, все делается методом проб и ошибок, при помощи гугла + куча браузеров и тестеров под рукой + валидатор от w3c. ;)
Кстати, вот в этом примере сперва накидал элементов <i> прямо в <body>, так валидатор стал кричать, что по правилам XHTML 1.0 Strict так нельзя, пришлось это дело в параграф задвинуть. ;)


  • 0

#68 Уткер

Уткер
  • Пользователь
  • 1 сообщений
  • Репутация: 0

Отправлено 01 Март 2011 - 09:06

Нужно чтобы footer сайта отображался правильно:
 

#content { width:100%; }

#container1 { width:100%; float:left; /* margin-right:-180px; */ }
#container2 { background:#000000; /*margin-right:180px;*/ }
#container3 { width:100%; float:right; ; }

#left { width:250px; float:left; padding-top:0px; padding-bottom:5px; }
#center { margin-left:250px; padding:10px; }
#right { float:right; width:180px; padding-bottom:0px; }

.container_left { /* border-right:solid 0px #000000; */
background: #fafef8 url("./images/fon_vertical_block.png") repeat-y;
}

.container_left_1 {
background: url("./images/fon_top_block_vertical.png") top no-repeat;
}
.container_left_2 {
background: url("./images/fon_bottom_block_vertical.png") bottom no-repeat;
}

/* нижняя часть страницы */


.footer_page {
height:130px; /* margin-top:-60px; */
color:#000000; position:absolute; bottom:-20px; left: 460px; min-width: 1000px;
background: #000000 url("./images/fon_footer_site.png");

}

* html footer_page { width: 100%; }


.soder_footer_page_left { float:left; padding-left:20px; text-align:left; color:#000000;
padding-top: 35px;
}
.soder_footer_page_left a , .soder_footer_page_left a:visited { color: #000000; text-decoration: none; }

.soder_footer_page_right { float:right; padding-right:20px; text-align:left;
padding-top: 40px;
}
.soder_footer_page_right a { text-decoration:none; color:#000000; font-size:10px;

}

При такой части кода, он отображается правильно для браузера Мозила, для остальных нижняя часть очень кривая вылезает.

если сделать
 

.footer_page {
height:130px; /* margin-top:-60px; */
color:#000000; position:center; bottom:-20px; left: 0px; min-width: 100%;
background: #000000 url("./images/fon_footer_site.png");

то он отображается правильно как надо, НО ниже футера, не пойму откуда, появляется просвет который убирает заливку фона и никак не могу от этого просвета избавиться.
Адрес сайта wh-wh.ru сейчас отображается правильно только в мозиле.
Посоветуйте как оптимизировать под остальные браузеры или в мозиле избавиться от этого просвета


  • 0

#69 bestolloch

bestolloch
  • Пользователь
  • 224 сообщений
  • Репутация: 1

Отправлено 01 Март 2011 - 10:14

Используйте "подсветку кода" пожайлуста)
.content_page { background:#FFFFFF; min-height:100%; [b]padding-bottom: 106px;[/b]
	width:expression(document.body.clientWidth > 1000 ? "100%" : "1000px"); 
   }
тут надо поменять на значение на 105, чтоб полосы не было.

.footer_page {   
   height:130px;  /* margin-top:-60px; */ 
   color:#000000; position:absolute; bottom:-20px;[b] left: 460px;[/b] min-width: 1000px;
   background: #000000 url("./images/fon_footer_site.png");
  
  }
Я конечно не разбирался сильно, но по идее у вас идет везде margin: 0 auto; а тут почемуто отступ от левого края.

И в следующий раз выкладывайте весь код, если не знаете где что меняеть стоит:)
  • 0

#70 irfanview

irfanview
  • Пользователь
  • 1 сообщений
  • Репутация: 0

Отправлено 01 Март 2011 - 17:58

Кто нибудь знает на какой основе сделан сайт www.grubwith.us ., Это CMS либо просто сборка скриптов, вобщем любая информация поможет, Спасибо.
  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Оформление форума – IPBSkins.ru