Конфликт background и padding

[Wolk_]

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

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

Edited January 21, 2012 by Wolk_

[Wolk_]

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

[Viper]

Если так?

.head_profile_menu {
    position:absolute;
    right:0;
    top:100%;
}

[Wolk_]

Господи, да, да, да! Помогло! Огромнейшее вам спасибо

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

Edited April 19, 2012 by Wolk_

[Viper]

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

Сначала этот DIV, который появляеться, имеет свойство

display:none;

, невидим и не занимает место, не мешает. При нажатии: он появлялся с определенной шириной и, соответственно, разширял своего родителя блок - "head_profile".

Что случилось: свойство -

position:absolute;

делает его вольным обитетелем страницы, не влияющим (физически) на другие элементы (но не следует пренебрегать этим свойством). С помощью атрибутов top, right, left, bottom мы можем позиционировать его: относительно либо нашей страницы, либо (как и в нашем случае) относительно элемента со свойством -

position:relative;

. Поиграйтесь с этими свойствоми и, уверен, вы вникнете в суть...

Edited April 19, 2012 by Viper

[Wolk_]

Заметил вот такую оказию. Если уменьшить ширину окна в которой расположена страница макета - фоновый градиент шапки не протягивается при горизонтальном скролле. На скриншотах все будет наглядней и понятней.

_ _ _

А вот код и стили данного элемента:

<!-- 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);
}

Edited April 28, 2012 by Wolk_

[alexandr_v-vich]

В чём находится .header? Полный путь напишите. И стили этих элементов.

[Wolk_]

В чём находится .header? Полный путь напишите. И стили этих элементов.

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

Edited April 28, 2012 by Wolk_

[alexandr_v-vich]

У всех есть родители)))

Покажите стили на body и html.

Заодно два вопроса — во всех браузерах? Что за размеры экрана?

[Wolk_]

У всех есть родители)))

Покажите стили на body и html.

Заодно два вопроса — во всех браузерах? Что за размеры экрана?

Ааа, ну 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;}

Edited April 28, 2012 by Wolk_

[alexandr_v-vich]

.head_content {
        width: 900px;
        margin: 0 auto;
}

Ну дело в width. Посоветовать я ничего не могу. Нет можно там max-width или min-width или чего ещё. Просто я вообще не понимаю смысла трёх обёрток, да ещё и с разными стилями, не понимаю, что вам нужно. Но смысл вы поняли — весь контент хэдера находится в фиксированной обёртки, а бэкгр. градиент записан на блок с резиновой шириной, что означает, что при ширине менее 900px у вас контент хедера не будет помещаться в блок с градиентом.

Edited April 28, 2012 by alexandr_v-vich

[Wolk_]

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