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


Пользователь месяца
Ixman Ixman 1-й за Октябрь
Очков активности: 693 0 тем, 33 сообщения, 14 баллов репутации
Сайт: o5cat.ru
ТОП самых активных за этот месяц
  • Фотография yuran
    #1

    yuran (yurbol.ru)
    Очков активности: 79.5 0 тем, 53 сообщения, 1 балл репутации

  • Фотография ShowPrint
    #2

    ShowPrint (ShowPrint.ru)
    Очков активности: 58.5 Вне конкурса за определение пользователя месяца

  • Фотография BLIK
    #3

    BLIK
    Очков активности: 48 Вне конкурса за определение пользователя месяца

  • Фотография Mandarin
    #4

    Mandarin
    Очков активности: 42 0 тем, 28 сообщений, 1 балл репутации

  • Фотография WGN
    #5

    WGN (worldgamenews.com)
    Очков активности: 39 Вне конкурса за определение пользователя месяца

  • Фотография Ixman
    #6

    Ixman (o5cat.ru)
    Очков активности: 36 Вне конкурса за определение пользователя месяца

  • Фотография pozitron123
    #7

    pozitron123
    Очков активности: 30 2 темы, 14 сообщений, 1 балл репутации

  • Фотография Mariko
    #8

    Mariko
    Очков активности: 16.5 1 тема, 8 сообщений, 1 балл репутации

  • Фотография алексс
    #9

    алексс
    Очков активности: 13.5 1 тема, 6 сообщений, 1 балл репутации

  • Фотография RosenRot
    #10

    RosenRot (abuzov.com)
    Очков активности: 13.5 1 тема, 6 сообщений, 1 балл репутации

  • Показать весь ТОП 10
Поддержите форум! =)
Апдейты
  • Яндекс ИКС: 31.10.2018
  • Яндекс выдача: 13.11.2018
Топ 5 участников по репутации


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

Сборник вопросов по HTML, CSS и прочее (стр. 4)

#61 yury

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

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

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

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

#62 ZiTosS

ZiTosS
  • Неактивные
  • 5148 сообщений
  • Репутация: 8

Отправлено 22 February 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 February 2011 - 23:53

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


  • 0

#64 ZiTosS

ZiTosS
  • Неактивные
  • 5148 сообщений
  • Репутация: 8

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

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

  • 0

#65 yury

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

Отправлено 23 February 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
  • Неактивные
  • 5148 сообщений
  • Репутация: 8

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

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

#67 yury

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

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

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


  • 0

#68 Уткер

Уткер
  • Неактивные
  • 1 сообщений
  • Репутация: 0

Отправлено 01 March 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 March 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 March 2011 - 17:58

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

#71 DreamKiller

DreamKiller
  • Неактивные
  • 1 сообщений
  • Репутация: 0

Отправлено 01 March 2011 - 19:16

Всем здрасте. Нужна помощь по реализации менюшки с помощью списка, CSS и спрайта. Почти все сделал, осталась одна беда. В общем нужно, что бы при клике по пункту меню, в неком блоке открывалась нужная страница, а пункт меню оставался подсвеченым (картинкой из спрайта)... Заранее благодарю за помощь... Можно даже ссылку на какую нибудь грамотную статью, с примером...
  • 0

#72 yury

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

Отправлено 01 March 2011 - 19:43

Динамическое изменение содержания заданного блока по нажатию кнопочек меню а ля закладки:
http://dynamicdrive..../tabcontent.htm
в том числе загрузка в заданный блок внешних хтмл файлов (в аякс-версии)
и даже слайд-шоу в этом блоке

А как пользоваться спрайтами описано, например, тут:
http://www.masterweb...p...ost&p=53121


  • 0

robot

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


Похожие темы

  Название темы Автор Статистика Последнее сообщение

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