ListOFF
-
Posts
10 -
Joined
-
Last visited
ListOFF's Achievements
Explorer (1/14)
0
Reputation
-
Если бы этот сайт оценивал Артемий Лебедев, он непременно отметил два пункта: -выравнивание текста по ширине; -ссылки не подчеркнуты. Все остальное уже сказано выше.
-
.Тогда почему свойство border срабатывает при наведении курсора?
-
Есть три картинки, для каждой в стилях установлен свой z-index. При наведении мыши на изображение оно должно всплывать выше всех остальных, а вокруг него появляться другая рамка. Далее идет код. Рамка меняется, но изображение "не всплывает" относительно других. Т.е. при наведении мыши z-index не меняется. В чем дело? <!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" /> <title>z-index</title> <style type="text/css"> .card { position: relative; } .card img {position: absolute; border: solid 1px;} .card img:hover {z-index: 4; border: dashed 2px blue;} .card img.one { left: 0px; top: 0px; z-index: 1; } .card img.two { left: 25px; top: 25px; z-index: 2; } .card img.three { left: 50px; top: 50px; z-index: 3; } </style> </head> <body> <div class="card"> <img src="1.jpg" alt="V" class="one" /> <img src="2.jpg" alt="V" class="two" /> <img src="3.jpg" alt="V" class="three" /> </div> </body> </html>
-
Спасибо за ответ. У меня несколько вопросов. По этому варианту http://jsfiddle.net/spYCj/3/ . Класс .progress описывается так: .progress { position: absolute; left: 0; top: 0; width: 50%; height:100%; background: #555555; z-index:-1; } Если убрать свойства position и связанные с ним left и top, фон полосы прогресса исчезнет. Почему? Вложенный слой остается, фон тоже. Но полоса тем не менее становится полностью белой. Еще один вопрос. Почему для того, чтобы div class="time" не сжимался по высоте до нуля, нужно непосредственно в него засунуть текст? Затем. Слои с float встают слева и справа без использования свойства position. Я попробовал сделать следующее: убрал это свойство у всех слоев и z-index у .progress. Получилось так: http://jsfiddle.net/spYCj/5/ . Почему .progress перестал быть виден на странице? Я предполагал, что он должен сдвинуться влево из-за того, что у .leftnum установлено обтекание. но исчез совсем.
-
Высоту можно задать, но вообще-то она определяется высотой контента. Контент есть, почему он выходит за пределы слоя?
-
Решил выполнить упражнение на сайте http://htmlbook.ru/practical/indikator-vypolneniya . В принципе, решение автора задачи мне ясно. Но я хочу понять свою ошибку. Далее привожу написанный мной код. <!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" /> <title>Полоса прогресса</title> <style type="text/css"> .time { border: solid 1px #000000; width: 250px; position: relative; } .leftnum, .rightnum { position: absolute; height: 100%; top: 0; } .rightnum { right: 0; background: #ffffff; } .leftnum { left: 0; width: 50%; background: #555555; } .progress { position: absolute; left: 0; right: 0; width: 100%; height: 100%; text-align: center; } </style> </head> <body> <div class="time"> <div class="leftnum">0</div> <div class="rightnum">5</div> <div class="progress">50%</div> </div> </body> </html> В итоге в браузере появляется div с нулевой высотой. Понятно, что свойство position выводит слой из потока, но ведь в данном случае слой привязан к системе координат другого слоя и сам не пустой. Почему в таком случае рамка первого div сжимается, а не обрамляет вложенные div?
-
Короче, видимо, проблема была в том, что тег <meta>, описывающий режим браузера, я ставил внутри <head>. Поставил в самом начале - заработало. Однако вопрос до конца не снят: в предыдущей ситуации тогда тоже не должно было работать, однако не работало только с include. Упс... Беру свои слова обратно, <meta> ставится внутри <head>. Видимо, имеет значение, где именно в контейнере <head></head> размещен метатег. У меня работает, только если размещен в самом начале - до <style> и <title>.
-
Спасибо за ссылку на статью, очень полезно. Только вот одна проблема возникла. У меня есть php-файлы, чтобы не писать одну и ту же шапку в них, сделал в каждом подключение include_once 'head.txt'; В head.txt содержится в том числе и тег meta: <meta http-equiv="X-UA-Compatible" content="IE=8"> Почему-то с include не работает, хотя не ясно почему. include вставляет просто кусок html-кода. Какая разница, прописан он будет сразу или будет передан из head.txt? В моем случае строка с <meta> в коде страницы появляется, но режим совместимости не исчезает (при выборе этого режима, как и раньше страница отображается как в 7ой версии, т.е. метатег ни на что не повлиял, если вставить тег вручную на каждую страницу - всё работает).
-
Спасибо, понял. Но вопрос до конца не снят. Я предполагал, что доктайп для того и нужен, чтобы браузер не переходил в режим совместимости. Получается, если у кого-то в настройках IE стоит соответствующая галочка "Режим совместимости", то несмотря на доктайп, отображение всё равно будет в этом режиме? И еще одно наблюдение. При просмотре некоторых сайтов режим совместимости в ИЕ неактивен, т.е. его нельзя включить. Почему такое происходит? Этого добиваются с помощью скриптов?
-
Понимаю, что тема в каком-то смысле затасканная, но все-таки... Короче, к теме. Написал сайт, в лисе и опере всё ок. В ИЕ в отсутствие Доктайпа лажа, добавил Доктайп стало всё нормально. НО! Зашел позже с другого компа в ИЕ и увидел опять лажу. Оказалось, что в настройках браузера стоит галочка "Представление совместимости". Получается, если эта галочка стоит, даже Доктайп не помогает. В связи с этим 2 вопроса: 1.почему не действует в таком случае доктайп (ведь это прямое указание, в соответствие с каким стандартом представлять результат на странице)? 2.как с этим бороться? Человек, которому я делал сайт, об особенностях настроек слышать ничего не хочет, считая, что в любом случае сайт должен выглядеть адекватно (и я с ним согласен, но как решить проблему не знаю). ЗЫ На обоих компах стоит IE8.