Wolk_

Можно. А насколько это кроссбраузерно?

На днях случайно обнаружил, что при использовании связки html5/css3 можно задать свой собственный тег. Сколько ни гуглил, так дельной информации и не нашел, подкиньте кто-нибудь информацию по сей ситуации. Кто не понял, речь об этом CSS ===================== sidebar {color: #000;} HTML ===================== <sidebar>текст</sidebar>

Сам все исправил, когда сел и подумал над логикой выполняемых параметров. Оказалось всему виной .header у которого ширина равна ширине окна, соответственно при скролле градиент не продолжался, как только я заменил параметр на min-width: 900px, то все заработало в лучшем виде.

Ааа, ну body - это само собой, подумал, что речь только о блочных элементах. Проверял в браузерах: Safari, Chrome и Firefox последних версий. На OS X Lion и OC Windows 7. Разрешение экранов 1440x900 и 1280x800 Стиль для body, html (плюс ещё парочка параметров, я думаю, что это тоже может помочь) * { margin: 0; padding: 0; border: 0; outline: 0; } html, body { height: 100%; position: relative; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: normal; color: #000; background-color: #fff; } div {position: relative; display: block;} ul {list-style-type: none;} img {border: none;} input:focus {outline:none;}

Если бы данный блок находился внутри какого-либо блока, то я бы обязательно об этом написал, в данном случае у header родительского элемента нет.

Заметил вот такую оказию. Если уменьшить ширину окна в которой расположена страница макета - фоновый градиент шапки не протягивается при горизонтальном скролле. На скриншотах все будет наглядней и понятней. _ _ _ А вот код и стили данного элемента: <!-- Header Begin --> <div class="header"> <div class="head"> <div class="head_content"> <div class="head_logo"> <a href="#"><img src="img/logotype.png" height="32" alt="logo"></a> </div> <div class="head_line"></div> <div class="head_pane"> <div class="head_nav"> <a href="#">Разделы</a> <a href="#">Люди</a> <a href="#">ТОП</a> <a href="#">Помощь</a> </div> <div class="head_profile"> <a href="javascript:look('div2');" class="head_profile_link"> <span class="head_profile_name">User</span> <span class="head_profile_arrow"></span> </a> <div class="head_profile_menu" id="div2" style="display:none"> <div class="head_profile_menu_content"> <a href="#">Статистика</a> <a href="#">Контакты</a> <a href="#">Сообщения</a> <a href="#">Настройки</a> <div class="head_profile_menu_line"></div> <a href="#">Выход</a> </div> </div> </div> <div class="head_search"> <form action="#" method="GET" class="head_search_form"> <input name="search" type="text" size="40" placeholder="Поиск"> </form> </div> </div> </div> </div> </div> <!-- Header End --> CSS ################################################# /* HEADER */ .header { position: absolute; top: 0; right: 0; left: 0; z-index: 210; height: 34px; line-height: 32px; width: 100%; background: #5e8dbb; border-bottom: 1px solid #46729e; background-image: -webkit-linear-gradient(bottom, #5e8dbb, #729fcc); background-image: -moz-linear-gradient(bottom, #5e8dbb, #729fcc); background-image: -o-linear-gradient(bottom, #5e8dbb, #729fcc); background-image: -ms-linear-gradient(bottom, #5e8dbb, #729fcc); background-image: linear-gradient(bottom, #5e8dbb, #729fcc); box-shadow: 0px 1px 5px rgba(32,32,32,0.4); -webkit-box-shadow: 0px 1px 5px rgba(32,32,32,0.4); -moz-box-shadow: 0px 1px 3px rgba(32,32,32,0.4); -khtml-box-shadow: 0px 1px 5px rgba(32,32,32,0.4); } .head { height: 33px; width: 100%; border-bottom: 1px solid #719ac3; } .head_content { width: 900px; margin: 0 auto; } .head_logo { display: block; outline: none; float: left; } .head_logo img { margin-left: 11px; padding: 2px 4px 0 0; } .head_logo img:active { padding-top: 3px; } .head_line { width: 0; height: 21px; border-right: 1px solid #4d79a2; border-left: 1px solid rgba(255, 255, 255, 0.2); margin: 6px 4px 0 5px; float: left; } .head_nav { float: left; } .head_nav a { height: 34px; padding: 0 4px 0; margin: 0 3px; display: block; float: left; color: #fff; font-weight: bold; text-shadow: 0px 1px 0px #46729e; text-decoration: none; } .head_nav a:hover, a:visited { text-decoration: none; background-color: rgba(255, 255, 255, 0.1); } .head_search { padding: 5px 0 0; } .head_search_form input[type="text"] { width: 120px; margin-right: 20px; float: right; font-size: 12px; background: url(../img/search.png) no-repeat 6px 3px #f3f3f3; border: 1px solid #ccc; color: #505050; padding: 3px 15px 3px 26px; -moz-placeholder: #73a0cd; -webkit-input-placeholder: #73a0cd; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; box-shadow: 0 1px 3px rgba(115, 160, 205, 0.3) inset; -webkit-box-shadow: 0 1px 3px rgba(115, 160, 205, 0.35) inset; -moz-box-shadow: 0 1px 3px rgba(115, 160, 205, 0.3) inset; transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s; -moz-transition: all 0.2s ease 0s; -o-transition: all 0.2s ease 0s; } .head_search_form input[type="text"]:focus { width: 150px; } .head_profile { margin-right: 14px; float: right; } .head_profile_link { height: 33px; display: block; padding: 0 5px 0; text-decoration: none; } .head_profile_link:hover { text-decoration: none; background-color: rgba(255, 255, 255, 0.1); } .head_profile_name { color: #f3f3f3; font-weight: bold; text-shadow: 0px 1px 0px #46729e; text-decoration: none; } .head_profile_arrow { display: inline-block; height: 6px; width: 7px; margin-left: 5px; background: url(../img/arrow.png) no-repeat; } .head_profile_menu { position: absolute; min-width: 125px; right: 0; top: 100%; border: 1px solid #46729e; border-top: none; } .head_profile_menu_content { padding-top: 3px; background: #5e8dbb; border: 1px solid #719ac3; border-top: none; } .head_profile_menu_line { width: 105px; border-top: 1px solid #46729e; border-bottom: 1px solid #719ac3; margin: 0 auto 3px; } .head_profile_menu_content a { display: block; line-height: normal; margin-bottom: 3px; padding: 5px 10px; font-size: 12px; color: #fff; text-decoration: none; } .head_profile_menu_content a:hover { text-decoration: none; background-color: rgba(255, 255, 255, 0.1); }

Господи, да, да, да! Помогло! Огромнейшее вам спасибо А теперь, не могли бы вы мне разъяснить, каким образом получился такой любопытный результат. Чтобы я в дальнейшем не обращался за помощью, а сам мог исправить подобные ошибки.

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

Вот посмотрите сам макет, нажмите на схожую кнопку и вопрос отпадет сам собой. Нужно, чтобы кнопка в шапке не съезжала, а также при наведении на нее в активном состоянии, она не должна так растягиваться. Хочется, чтобы было так (можете сравнить с настоящим и тогда будет понятней)

Столкнулся с такой проблемой. У меня есть выпадающий список [1 картинка], как только он становится активным происходит следующее [2 картинка]. Выручайте, ниже будет представлен код. <div class="head_profile"> <a href="javascript:look('div2');" class="head_profile_link"> <span class="head_profile_name">User</span> <span class="head_profile_arrow"></span> </a> <div class="head_profile_menu" id="div2" style="display:none"> <div class="head_profile_menu_content"> <ul> <li><a href="http://www.ajaxshake.com">www.ajaxshake.com</a></li> <li><a href="http://www.solvingequations.net">www.solvingequations.net</a></li> <li><a href="http://www.tutorialjquery.com">www.tutorialjQuery.com</a></li> <li><a href="http://www.jqueryload.com">www.jqueryload.com</a></li> </ul> </div> </div> </div> .head_profile { margin-right: 14px; float: right; } .head_profile_link { height: 33px; display: block; padding: 0 5px 0; text-decoration: none; } .head_profile_link:hover { text-decoration: none; background-color: rgba(255, 255, 255, 0.1); } .head_profile_name { color: #f3f3f3; font-weight: bold; text-shadow: 0px 1px 0px #46729e; text-decoration: none; } .head_profile_arrow { display: inline-block; height: 6px; width: 7px; margin-left: 5px; background: url(../img/arrow.png) no-repeat; } .head_profile_menu { border: 1px solid #46729e; border-top: none; } .head_profile_menu a { font-size: 12px; color: #fff; } .head_profile_menu_content { padding: 3px; background: #5e8dbb; border: 1px solid #719ac3; border-top: none; }

Тем, что он действенный, но не в моем конкретном случае. Поэтому вопрос все ещё актуален, выкладываю все в общий доступ, очень надеюсь на вашу помощь в данном вопросе.

Второй вопрос все ещё актуален, вот, может поможет. Выкладываю кусок кода CSS и HTML: CSS /* PHOTOS */ .photos { width: 480px; margin: 0 auto; } .tab1 { width: 200px; float: left; } .tab2 { width: 200px; float: right; } .tab_photo {} .tab_photo img { vertical-align: bottom; } HTML <div class="photos"> <div class="tab1"> <div class="tab_photo"> <img src="img/no.png" alt="photo_1"> </div> </div> <div class="tab2"> <div class="tab_photo"> <img src="img/no.png" alt="photo_2"> </div> </div> </div> <!-- Photos End -->

Благодарю, ваш совет помог исправить первую проблему Сожалею, но ваш совет мне не помог. Никаких изменений (почему-то даже неудивительно, видимо из-за несуществующего параметра):

И снова здравствуйте, на этот раз столкнулся с двумя проблемами, суть которых я постараюсь изложить максимально понятно. Первая проблема: Имеется некий div в котором располагается изображение. Никаких отступов для него и для самого блока не прописано, по умолчанию они тоже выключены, но почему-то несмотря ни на какие мои манипуляции, изображение имеет снизу внутренний отступ равный порядка 5 px. Выглядит все примерно так: Вторая проблема: Имеются два diva в которых содержатся изображения, один длиннее другого. Что именно требуется, я изображу на картинке ниже: Тоесть, нужно чтобы изображение большего размера находилась на равне со вторым именно внизу, а не сверху по умолчанию.

Огромное спасибо! Прошу не закрывать тему и уж тем более её не удалять, наверняка я ещё не раз обращусь к опытным верстальщикам на данном форуме. Ну и конечно ответы на мои вопросы, возможно, для многих окажутся решением и они не станут лишний раз открывать новый топик.

Огромное всем спасибо, но вот всетаки вылез ещё один вопрос. Как и каким образом можно отцентровать тег input по горизонтали? Предположим, есть некая форма, которая заканчивается тегом input с типом submit, если в CSS прописать для кнопки такой параметр, как margin: 0 auto, то самособой ничего не произойдет, а указывать точное число в моем случае нельзя, как быть товарищи? Рассчитываю на вашу помощь.

И последний вопрос, чтобы у меня вообще они больше не возникли. Подскажите, как реализовать треугольник у (в данном случае) комментария, как в CSS сделать треугольник - я в курсе, но как его сделать частью border`а блока комментария - нет.

И дабы не создавать второй темы, задам ещё один вопрос... Подскажите, как рационально можно реализовать следующий момент: Имеется контент и sidebar, нужно, чтобы в зависимости от высоты контента увеличивалась и высота sidebar`а при том при всем, что сайдбар ни в коем случае не должен заключать в контент и должен учитываться тот момент, что порой сайдбар бывает больше контент блока. Помогите найти решение, заранее спасибо.

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

Добрый вечер уважаемые форумчане, спешу к вам за советом по следующему вопросу. При разработке дизайна столкнулся с такой проблемой: Имеется некий блок header в котором есть горизонтальный блок навигации по сайту. У header`а прописан background-image, а у ссылок в блоке навигации внутренний отступ от верхнего края блока. Хочу при наведении на определенную ссылку изменять background ссылки под курсором, как это делается я знаю, есть один момент о котором вы наверняка догадались из названия темы: padding-top ссылок конфликтует с background. При наведении на любую из ссылок в меню - background съезжает на уровень отступа ссылки, чтобы было проще и поняли о чем я рассказываю приведу пример.