Delat

Если закомментировать свойство overflow: hidden; в главном меню, то в браузере Firefox 21.0 основная часть с сайдбаром слетает вправо, в остальных браузерах в норме. Почему это происходит? Не могу разобраться. http://prodpak.ru

может я что-то не понимаю, но в моей версии IE 9.0.8112.16421 картинка не отображается перед ссылкой. Уже несколько раз перечитал все. Вот с этим кодом получается то, что нужно и отображается везде кроме IE 9.0.8112.16421: a[href*="russian.html"]:before { display: inline-block; margin-right: 0.25em; content: url("bullet2.png"); /*background: url(bullet2.png);*/ /*border: 1px solid black;*/ } Результат: и это то, что мне нужно. А вот с этим кодом (также, отображается везде кроме IE 9.0.8112.16421): a[href^="russian.html"]:before { display: inline-block; width: 16px; height: 16px; margin-right: 0.25em; content: ""; background: url(bullet2.png); border: 1px solid black; } Результат: тем не менее, спасибо всем за помощь! А можно как-то проверить этот код онлайн, скажем во всех версиях IE?

я несколько модифицировал этот пример и у меня получилось что нужно: a[href*="russian.html"]:before { display: inline-block; margin-right: 0.25em; content: url("bullet2.png"); /*background: url(bullet2.png);*/ /*border: 1px solid black;*/ }

Вообще зачем мне это надо? Я хочу научиться создавать многоуровневое меню, например как на этом сайте http://www.pexsupply.com/, конкретно для своего подопытного http://prodpak.ru ссылки меню "Продукция". Может быть я не с того начал изучение, кто нибудь может подсказать структурный подход к такому мастерству?

не мой, ни ваш пример не работает в IE9, к тому же необходимо вставить картинку только для ссылки с значением "russian.html"

a[href*="russian.html"]:before {background: url(bullet2.png) no-repeat; border:1px solid black;} если убрать из кода псевдоэлемент :before то картинка появится, но мне не хочется добавлять 0 6px padding-left: 15px. чтобы она стала слева перед ссылкой. Почему маленькая картинка перед ссылкой не отображается?

посеять неразбериху в жизнях чужих людей

Элементом является флаг страны, хочу выровнять по правому краю ячейки таблицы, но почему-то это не получается сделать. Подскажите, в чем может быть дело? Может быть посоветуете какой-нибудь другой способ компоновки для ссылок с флажками, не такой массивный. http://prodpak.ru

добавил в свойство transition-property: background-color, color; значение background-color и всё заработало, но в IE9.0.8 не работает. А как делают чтобы было кроссбраузерно?

Как сделать, чтобы при наведении курсора на главное меню, более светлый красный цвет появлялся не мгновенно, а постепенно, с не большой задержкой? http://prodpak.ru (Мне кажется нужно использовать: псевдоэлемиенты + z-index + JS )

почему тогда из первого примера при переходе по ссылке: box-shadow: 0 -10px 5px rgba(0,0,0,.5); 0 - горизонтальное выравнивание (ок!) -10px - вертикальное выравнивание (тень наложилась не внизу, а вверху относительно блока?) Всё разобрался, нашел объяснение: сдвиг по x Смещение тени по горизонтали относительно элемента. Положительное значение этого параметра задает сдвиг тени вправо, отрицательное — влево. Обязательный параметр. сдвиг по y Смещение тени по вертикали относительно элемента. Положительное значение задает сдвиг тени вниз, отрицательное — вверх. Обязательный параметр.

Синтаксис свойства: box-shadow: h-тень v-тень размытие протяженность цвет inset; На своей подопытной страничке http://prodpak.ru перебрав множество примеров из интернета, изменив немного значения методом тыка, мне удалось сделать внутреннюю тень как хотел, но знаний я так и не получил. То есть нет структурного понимания поведения своей же записи на сайте box-shadow: -4px 0 10px -2px #F0F0F0 inset; Например, не пойму почему, когда я сменю -4px на 4px, то тень у блока будет слева. Как же ориентироваться? Вообще поначалу я полагал, что нужно руководствоваться top right bottom left где относительно элемента тень будет смещаться в ту или другую сторону.

Хорошая история, спасибо

Часто на обложках бумажных книг про JS, HTML5, CSS изображены животные: например http://www.ozon.ru/context/detail/id/5904466/ http://www.ozon.ru/context/detail/id/3881079/ это ничем не означающий выбор издательства, или это прямое последствие значений языков разметки, представления содержимого...?

http://prodpak.ru - почему в сайдбаре не получается сделать рамку только слева, а там где написано "ССЫЛКИ" сделать рамку только сверху?

ну я ещё малоопытный, по этому ориентируюсь по переводу. А вообще мне кажется необходимо думать по английски, стараясь не зацикливаться на переводе, а просто знать что и для чего, где и как применить (на автомате). ИМХО мнение новичка.

В книге Влада Мержевича на странице 115 "Вёрстка веб-страниц" модель блока описана следующим образом: "высота складывается из значений высоты контента (height), полей (padding), границ (border) и отступов (margin)". Когда приобрел книгу http://www.ozon.ru/context/detail/id/2468908/. то там обнаружил другие определения: отступы (padding), границы (border) и поля (margin). Вопрос, как правильно? По моему margin - переводится как "поле", а значит второй вариант.

я понял свои ошибки, обновил данные. Посмотрите, в целом мне кажется этот каркас держится на "костылях", то есть он как-бы зрительно есть всё аккуратно, но с точки зрения технологии верстки очень страшненький "внутри". Или такой вот каркас имеет право тоже на жизнь, просто у меня получилось что-то сугубо личное из своих пока маленьких знаний.

всего пару часов для перечитывания, экспериментирования и понять удалось , стало ещё интереснее. Вот только не пойму, если абсолютно позиционированный слой является "облачком", то почему после добавления в слой <div class=layer> текста, абсолютно позиционированный сайдбар сместился вниз, ведь он то самое облачко?

Я только начал глубже погружаться в тему CSS и на своем пути сталкиваюсь с разными проблемами. Некоторые удается решить быстро. Для себя сделал вывод, что нужно изучать построения сайта с способов позиционирования и обтекания. Конкретно по теме, мне не совсем понятны выражения "абсолютно позиционирован" или "положение элемента устанавливается относительно его исходного места", из-за этого я не могу понять как мне сделать чтобы подвал был виден, или например колонка слева сдвигалась до конца вместе с сайдбаром, если в нем текста больше. http://prodpak.ru

начни с чтения литературы, именно с той которая тебе понятна, пытайся сделать хоть что-то из изученного каждый день, так вот по крупицам и формируется опыт

я бы текст в подвале сделал более видимым. Всё таки адрес и телефон важная составляющая.

страница 242, методическое пособие в .pdf http://htmlbook.ru/blog/verstka-veb-stranits

получилось!

Как выровнить header по центру, почему явно заданная высота не выполняется? Вероятно я первоначально делаю не правильно сайт на html+CSS, так сказать не по технологии, но мне важно научиться блочной верстке. <!DOCTYPE html> <html lang=ru> <head> <link rel="stylesheet" type="text/css" href="css.css"> </head> <body> <div class=header>Логотипчик</div> <div class=layer> <div class=content> Контент </div> <div class="sidebar"> Сайдбар </div> </div> </body> </html> body {margin:0; background: #112233} div.header {border: 4px solid; border-color: red; background: #990000; width:980px; margin: 0 auto; padding:10px; height:20px; } div.layer {width:980px; margin: 0 auto; position: relative;} div.content {border: 4px solid; border-color: red; background: #990000; padding: 20px; width:400px; position: absolute; } div.sidebar {border: 4px solid; border-color: red; background: #336666; padding: 20px; width:500px; left:448px; /*сдвиг вправо*/ position: absolute; }