hover как центрировать фон

money121 · May 18, 2011

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

Так вот вопрос как мне центрировать этот бэкграунд?

  <a href="#" class="a-link"><span class="date-color">14.02.2011</span>
        <p class="line">Обновление Ассортимента</p></a>

         <a href="#" class="a-link"><span class="date-color">14.02.2011</span>
        <p class="line">Обновление Ассортимента</p></a>

         <a href="#" class="a-link"><span class="date-color">14.02.2011</span>
        <p class="line">Обновление Ассортимента</p></a>

.a-link {
	color:#6c5d4e;
	text-decoration: none;
	display:block;
	height:80px;
	width:934px;
	padding-top:20px;
	margin-left:70px;

}

.a-link:hover {
	background-image:url(img/a-hover.png);
	display:block;
	height:80px;
	width:934px;
			}

D1mK4 · May 18, 2011

во первых уберите width:934px и height:80px, а вместо них используйте padding, если это не то, что нужно - сделайте скриншот

Edited May 18, 2011 by D1mK4

iillyyaa2 · May 18, 2011

он при наведении с первой буквы ссылки и дальше идет пока незакончится.

я не понял, что это значит :rolleyes:

zSpx · May 18, 2011

background-position

money121 · May 18, 2011

Вот 2 картинки на одной как нужно а на другой как у меня получается.

background-position пробовал не получается сдвинуть фон им.

iillyyaa2 · May 18, 2011

D1mK4 уже сказал, используй padding

к примеру:

padding: 0 0 0 40px;

Edited May 18, 2011 by iillyyaa2

money121 · May 18, 2011

С паддингами тоже не получается, уже пробовал:

.a-link {
	color:#6c5d4e;
	text-decoration: none;
	display:block;
	padding-top:20px;
	margin-left:70px;

}

.a-link:hover {
	background-image:url(img/a-hover.png);
	display:block;
	padding: 0 0 0 40px;

Вот все вместе с текстом смещается при наведении:

Edited May 18, 2011 by money121

iillyyaa2 · May 18, 2011

.a-link {
        color:#6c5d4e;
        text-decoration: none;
        display:block;
        margin-left:70px;
        padding: 20px 0 0 40px;
}

.a-link:hover {
		background-image:url(img/a-hover.png);
		background-position: center;
}

Edited May 18, 2011 by iillyyaa2

money121 · May 18, 2011

С помощью паддингов двигается текст, а бекграунд остаётся на месте.

Можно конечно центрировать текст и он будет по середине бекграунда, но мне нужно чтобы текст оставался там где есть, нужно подвинуть влево сам бекграунд псевдокласса!

iillyyaa2 · May 18, 2011

то, что я написал последний раз, не работает ?

money121 · May 19, 2011

Нет не работает!

Неужели нет решения?

Паддинг слева тоже не нужен, текст должен находится где находится, а фон псевдо класса как-то сдвинуть влево.

Синдром · May 19, 2011

уже подсказали

background-position: 50% 0;

не сработало?

Ссылку в студию!

Edited May 19, 2011 by Синдром

money121 · May 19, 2011

Вот ссылка:

http://money121.jino.ru/

Полный код:

<!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>
	<meta name="title" content="" />
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
	<!--[if lte IE 6]><link rel="stylesheet" href="style_ie.css" type="text/css" media="screen, projection" /><![endif]-->
</head>

<body>

<div id="wrapper">


    <div id="header">
		<a href="#"><img class="logo-padding" src="img/logo.png" /></a>


   <form action="" method="post"> 
<input type="text" class="poisk">  
<input type="submit" value="" class="poisk-rnopka">  
</form>

	</div><!-- #header-->

    <div id="menu">
    	<a href="#"><img src="img/menu-home.png" /></a>
        <a href="#"><img src="img/menu-katalog.png" /></a>
        <a href="#"><img src="img/menu-sotrudnicestvo.png" /></a>
        <a href="#"><img src="img/menu-dostavka.png" /></a>
        <a href="#"><img src="img/menu-articles.png" /></a>
        <a href="#"><img src="img/menu-news.png" /></a>
        <a href="#"><img src="img/menu-kontakt.png" /></a>

    </div><!-- #menu-->



</div><!-- #wrapper -->

<div id="polosa">
    </div>

	<div id="contener-fon">
	<div id="content">
		<h2>Новости компании</h2>
        <a href="#" class="a-link"><span class="date-color">14.02.2011</span>
        <p class="line">Обновление Ассортимента: Трубки SAVINELLI, MASTRO DE PAJA, LORENZETTI</p></a>

         <a href="#" class="a-link"><span class="date-color">14.02.2011</span>
        <p class="line">Обновление Ассортимента: Трубки SAVINELLI, MASTRO DE PAJA, LORENZETTI</p></a>

         <a href="#" class="a-link"><span class="date-color">14.02.2011</span>
        <p class="line">Обновление Ассортимента: Трубки SAVINELLI, MASTRO DE PAJA, LORENZETTI</p></a>

         <a href="#" class="a-link"><span class="date-color">14.02.2011</span>
        <p class="line">Обновление Ассортимента: Трубки SAVINELLI, MASTRO DE PAJA, LORENZETTI</p></a>

          <a href="#" class="a-link"><span class="date-color">14.02.2011</span>
        <p class="line">Обновление Ассортимента: Трубки SAVINELLI, MASTRO DE PAJA, LORENZETTI</p></a>	</div>
	<!-- #content-->
	</div><!-- #contener-fon-->

    <div id="fot">
    <div id="fot1">
    <a href="#"><img src="img/k1.png"</a>
    <a href="#"><img src="img/k2.png"</a>
    <a href="#"><img src="img/k3.png"</a>
      </div>
    </div>

<div id="footer">
	Минздравсоцразвития России предупреждает: курение вредит вашему здоровью<br />
    Табачные изделия не продаются лицам, не достигшим 18 лет. 
</div><!-- #footer -->

</body>
</html>

* {
	margin: 0;
	padding: 0;
}
html {
	height: 100%;
}
body {
	font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
	height: 100%;
	background-image:url(img/header-bg.jpg);
	background-repeat:repeat-x;
	background-color:#000000;
}
a {
	color:#6c5d4e;
	outline: none;
	text-decoration: none;

}

a:hover {
	text-decoration: none;


}
p {
	margin: 0 0 18px;
	font-family:Arial, Helvetica, sans-serif;
}

h2 {
font-family:Arial, Helvetica, sans-serif;
font-style:italic;
padding-bottom:50px;
padding-top:30px;

}
img {
	border: none;
}
input {
	vertical-align: middle;
}
#wrapper {
	width: 1036px;
	min-width: 1000px;
	height: auto !important;
	height: 100%;
	margin:auto;

}


/* Header
—————————————————————————--*/
#header {
	height: 102px;
	background-image:url(img/header.jpg);
	background-repeat:no-repeat;

}


/* Middle
—————————————————————————--*/
#content {
	padding: 0 0 75px;
	color:#967e69;
	background-image:url(img/n.png);
	background-position:0px 25px;
	background-repeat:no-repeat;
	background-color:#181818;
	padding-left:55px;
	padding-top:20px;
	width:1036px;
	margin:auto;
}

#contener-fon {
background-color:#181818;
}


/* Footer
—————————————————————————--*/
#footer {
	margin: -75px auto 0;
	min-width: 1000px;
	height: 75px;
	background: #1a1a1a;
	color:#484747;
	padding-left:230px;
}

.logo-padding {
margin-top:17px;}

#menu {
width:1036px;
float:left;
margin-top:-115px;
}

.poisk {
background-image:url(img/search-area.png);
background-repeat:no-repeat;
width:213px;
height:22px;
border:none;
float:right;
margin-top:-30px;
margin-right:150px;
color:#FFFFFF;
padding-left:15px;
position:relative;
z-index:1;}

.poisk-rnopka {
background-image:url(img/search-button.png);
background-repeat:no-repeat;
width:101px;
height:22px;
border:none;
margin-left:870px;
margin-top:-56px;
outline:none;
position: relative;
z-index:2;}

#polosa {
clear:both;
background-image:url(img/1.png);
background-repeat:repeat-x;
height:24px;
width:100%;}

.date-color {
color:#979797;}

.line {
background-image:url(img/line.png);
background-repeat:no-repeat;
background-position:-5px 23px;
padding-bottom:25px;
}


.a-link {
	color:#6c5d4e;
	text-decoration: none;
	display:block;
	padding: 20px 0 0 40px;
	margin-left:70px;

}

.a-link:hover {
	background-image:url(img/a-hover.png);
	background-position: 50% 0;
	background-repeat:no-repeat;

				}

#fot {
background-image:url(img/fut-fon.png);
background-repeat:repeat-x;
height:116px;
margin:auto;
margin-bottom:70px;}

#fot1 {
float:right;
margin-top:80px;
padding-right:375px;}

Edited May 19, 2011 by money121

Синдром · May 19, 2011

Центрирование не нужно в ховер стиле уберите бекграунд позишн, нужно немножко подредактировать стили на ссылку

.a-link {
    color: #6C5D4E;
    display: block;
    padding: 20px 0 0 110px;
    text-decoration: none;
}

Убрать маргин и 70 пикселей добавить к паддингу справа

дополнительно

.line {
    background-image: url("img/line.png");
    background-position: 0 23px;
    background-repeat: no-repeat;
    padding-bottom: 25px;
    padding-left:5px;
}

-5px срезает картинку что очень заметно, лучше отступ задать внутренним паддингом, соответственно такой же паддинг задать на спан с датой, либо его положить в параграф и задать дисплей блок, ну или перевод строки сразу за ним

И замечание, у меня кодировка открывается неверная, сохраните файл в утф-8

Edited May 19, 2011 by Синдром

money121 · May 19, 2011

Огромное Спасибо! Все оказывается так просто), а я два дня мучаюсь.

Странно только кодировка у меня в index.html стоит и так utf8

Синдром · May 20, 2011

Пожалуйста, опыт сын ошибок, приходит со временем :facepalmxd:

Все верно, кодировка стоит, но сам файл по всей видимости не в utf-8, откройте его с помощью Notepad++ и сохраните в кодировке utf-8 без BOM

Edited May 20, 2011 by Синдром

money121 · May 23, 2011

Ок Спасибо получилось

Sign In

hover как центрировать фон

Question

Link to comment

Share on other sites

16 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information