amelice

Svatov, спасибо!

Vlad, buddah спасибо! Но объясните пожалуйста, почему так нельзя? Чтоб я раз и навсегда поняла, что так нельзя потому что то-то.. Пока мне кажется, что это самый простой способ, ведь это правило сработает один раз, и он не повлияет на внутренние вложенные теги, если их переопределю?

Vlad,Огромное спасибо! У меня несколько вопросов. 1.Есть ли общепринятые определения резиновой и фиксированной верстки? Я понимаю, что резиновая - это верстка относительно от окно просмотра, а Фиксированная - это явно заданными размерами или одного из размеров. 2.И вот еще из жаргонов, "морда" - это то, что видит пользователь? 3. Может свойств? Или есть теги которые имеют цвет?

Всем привет! Сверстала макет с форума. Ссылка. Прошу оценить верстку. Из заданий не реализован этот пункт: Пока скрипты не знаю, для меня трудновато такое реализовать. Поэтому сильно не ругайте за это. Всем заранее спасибо.

Я ошиблась, нужно при нажатии. А вот этот кусок кода что делает? href="javascript:void(0);

Сама недавно сверстала этот макет. И вижу, что у вас некоторые ошибки такие же как у меня были: 1. Виден четкий градиент на шапке. Применила метод от psywalker. 2. Разноцветный список внизу -> если добавить текста к правой стороне, то он по макету не должен обтекать дату с левой стороны. У вас обтекает. 3. На главном меню первый пункт слишком близок к правой стороне. Не помню, может так и должно быть, но бросается в глаза. Бэкграунд меню идет вместе с линиями. Нужно было сделать левой или правой рамкой самих пунктов меню. Вдруг нужно будет добавить еще пункты? 4. Может быть, слово Search нужно было в элемент label писать, а не h2. Добавить отступы между элементами формы.

Vlad, выложите пожалуйста.

Golgi, я вот смотрю, как решила эту задачу Dinow: <li class="option"> <a onclick="loadOnDemand('')" href="javascript:void(0);"> <img alt="" src="Imgs/option.jpg"> <span>Find the right financing option.</span> </a> </li> a onclick="loadOnDemand(option.css)" Мне кажется, этот код загружает сss файл('option.css'), при нажатии мыши. href="javascript:void(0); а этот кусок что делает не подскажете? Если загружается отдельный сss-файл то, это то что мне нужно! Так как фон сзади зависит от разрешения экрана, поэтому часть картинки должна повторятся, а для этого нужно заново переписать правила фона для блока со слайдом.

Всем привет! По требованиям макета нужно сделать слайдшоу, т.е. при наведении на определенный участок внизу, фон сзади должен меняться: Подскажите пожалуйста скрипт, который по вашему мнению лучше бы подошел для такого задания. Первый раз сталкиваюсь с такой задачей, не знаю как подойти к решению. Ссылка

Кстати, в вашем стилевом файле style.css заметила такую ошибку: ul.triada body { background: none repeat scroll 0 0 #222222; font-family: "Arial",Arial; } body - расположен после html! Он не перемещается со своего места.

Внимательно посмотрите что у вас было: <div class="content"> <ul class="triada"> /* У списка были элементы li */ <li> <a href="/italy/about.html"><img src="/images/small_ital.jpg" height="135" width="203" alt="Италия" border="0" /></a> <h3><a href="italy/about.html">Италия</a></h3> <div class="clear"></div> <p>Отдых в <strong>Италии</strong> - уникальный климат, богатые природных ресурсы и, конечно же, история <a href="/italy/about.html" rel="nofollow">дальше...</a></p> </li> . . . </div>и что стало: <div class="content"> <ul class="triada"> /* Вы убрали элементы списка li, но оставили сам список ul! Это неправильно.*/ <div id="page-wrap"> /* */ <script type="text/javascript" src="testslide/js/jquery-1.2.6.js"></script> <script type="text/javascript" src="testslide/js/startstop-slider.js"></script> <div id="slider"> <div id="mover"> <div id="slide-1" class="slide"> <h1>Италия</h1> <p>Уникальный климат, богатые природные ресурсы и, конечно же, история ...</p> <a href="http://www.aiftour.com/italy/about.html"><img src="images/slide-4-image.png" alt="learn more" /></a> </div> . . . </ul> В этом файле все стили описаны через ul.triada. Попробуйте поменять ul на div в стилевом файле и в html. А вообще у вас же есть еще блок с #page-wrap, вот его и используйте. Мне кажется из-за этого стилевого файла у вас не работает скрипт, который связан с главным меню, так как там тоже задействованы элементы ul.

Я извиняюсь, пропустила скрипт который у вас в head'е прописан. Хотелось бы узнать что и как вы меняли?

На вашем сайте после внедрения некоторые библиотеки скриптов не грузятся. Меню ваш работает с помощью скрипта, но мне не понятно с каким из них. Проверьте пути, возможно вот этот скрипт: Невозможно загрузить исходный код для: http://aiftour.com/js/jquery.hoverIntent.js Это мне выдает фаербаг.

Давайте разберем ситуацию: Я считаю, что: 1. height не наследуется, а первоначальное значение имеет - auto. Если не задать html высоту 100%, то и body неоткуда брать значение 100%; а если присвоить body {min-height:100%}, то body просто возмьет высоту своих потомков. 2. html{ height:100%;} Это высота окна просмотра, поэтому все должно начинаться с html. Проверил , вы правы Странно но у меня в firebug на данной странице вышло только с body растянуть В общем, я почетно заслужил "-" Пойду ка еще раз прочитаю учебники... Хотелось бы услышать мнения других, чтоб они тоже поделилсь опытом. А вы минимум заслужили уважение, а не минус.

Давайте разберем ситуацию: Я считаю, что: 1. height не наследуется, а первоначальное значение имеет - auto. Если не задать html высоту 100%, то и body неоткуда брать значение 100%; а если присвоить body {min-height:100%}, то body просто возмьет высоту своих потомков. 2. html{ height:100%;} Это высота окна просмотра, поэтому все должно начинаться с html.

У вас блок с #content не видит своих потомков. Так как содержит два плавающих элемента. Обычно это решается с помощью свойство: overflow:hidden;

Это не правильно. Пока вы не зададите всем элементам высоту 100% до элемента с id #wrapper, у вас #wrapper не будет растягиваться на всю высоту экрана. При чем вы не должны прерывать цепочку. Например пропустите html, все - не заработает. И не min-height(я имею в виду для элементов до #wrapper), а именно height. html,body{ height:100%; }

Пожалуйста

#headerMenuCont a:hover { background-attachment: scroll; background-clip: border-box; background-color: #72C101; background-image: none; background-origin: padding-box; background-position: 0 0; background-repeat: repeat; background-size: auto auto; color: #FFFFFF !important; float: left; height: 26px; /*высоту подправила*/ text-decoration: underline; } #menu li { cursor: pointer; float: left; font-weight: normal; height: 26px; /*высоту подправила*/ line-height: 25px; /*добавила свойство line-height:25px, с учетом нижнего подчеркивания, можете сами регулировать*/ list-style-image: none; list-style-position: outside; list-style-type: none; margin-bottom: 0; margin-left: 30px; margin-right: 30px; margin-top: 0; padding-bottom: 0; /*убрала нижний паддинг*/ padding-left: 3px; padding-right: 3px; padding-top: 0; position: relative; text-decoration: none; /*убрала underline, так как у последующего элемента <а> по умолчанию есть это свойство*/ z-index: 10; } #menu li a { color: #FFFFFF; padding-top: 0; /*убрала нижний паддинг*/ }

Так уж сложилось в стандарте. Повлиять можно только в новых браузерах с помощью box-sizing: border-box (CSS3). В какой-то мере и в старых IE путем сброса в quirks mode (напр. комментарий перед доктайпом)... но это из разряда лечения перхоти гильотиной . В сабжевой задаче, имхо, самое надежное и логичное — display:table контейнеру и table-cell пунктам. А IE7- (чтоб их уже...) подпереть скриптовым костылем... Поставил display:table и table-cell, ничего не поменялось. Что должно было произойти? Вот так должно получиться: http://jsfiddle.net/NLVwm/1/. Тока в ИЕ включая 7-ю версию не поддерживается присвоения display:table к любому элементу.

klierik,Спасибо за ссылку. Я поняла, что в БЭМ не используются id, я имела в виду вообще. Ведь, не все структурируют по БЕМу? Мне кажется, что нужно в определенных условиях применять такую структуру, например когда верстает команда верстальщиков. А когда в домашних условиях? То зачем плодить много папок(при применении третьего способа(файлом))?

Сначала узнай, что такое zoom:1; и браузер IE в частности, а потом будешь задавать и второй вопрос. Попробовал - так же Есть два решения: 1. img.line-666 { margin:3px; margin-left:8px; display:block; /*делаем блочным элементом*/ } И забыть все проблемы связанные с вертикальным размещением строково-замещаемых элементов. Я проверяла, работает в вашей задаче. 2.Сделать img бекграундом абзаца. Так будет более оптимизировано. p.new_menu { font-family:verdana; font-size:11px; color:#bea982; margin:3px 0 0; padding:0 10px 3px; background:url(images/line-666.gif) no-repeat left bottom; /* бекграундим абзаца */ } В этом случае вместо горизонтальных маргин, нужно использовать горизонтальный паддинг. Так же не забыть о 3-х пиксельном маргине картинки.

Softlink, Great Rash спасибо вам за классную информацию! Только узнала, что есть БЭМ. Такой вопрос в контексте этого топика - По каким критериям вы распределяете селекторов классов и id?

<!DOCTYPE html> <html> <head> Здесь размещается служебная информация. Пользователь ее не видит. </head> <body> Здесь размещается содержание документа. Именно это видит пользователь. </body> </html> Тут подробно написано про структуру: http://htmlbook.ru/samhtml/struktura-html-koda

Например(очень в грубом представлении, если жестко ориентироваться к твоей задачке): <div class="first"> <div class="second"></div> </div> div.first{ background:url(путь к первому рисунку) no-repeat top left; width:300px; height:200px; } div.second{ background:url(путь ко второму рисунку) no-repeat top right; height:100%; } Позиционирование background'a опять таки нужно смотреть.