I159
-
Posts
4 -
Joined
-
Last visited
I159's Achievements
Explorer (1/14)
0
Reputation
-
Всё, сообразил. Вопрос снят)
-
Есть два меню, одно меню сверху, другое снизу. Верхнее реагирует на наведение курсора отображением фона прописанного в css, а нижнее должно реагировать выводом картинки (кнопки). В итоге нижнее наследует отображение фона, прописанное для верхнего. body { background-color: #FFFFFF; background-image: url("tree.png"); background-repeat: no-repeat; background-position: 20px 125px; } #logo { position: relative; top: 10px; left: 30px; height: 95px; width: 220px; } #buttonfeald { position: absolute; top: 45px; left: 300px; width: 711px; height: 60px; z-index: 1; } ul { position: absolute; top: 37px; left: 271px; font: bold 12pt sans-serif; z-index: 3; } ul li { list-style:none; float: left; } ul li a { display: block; width: 150px; height: 24px; padding: 10px 8px 8px 8px; text-align: center; border: 1px solid #f1f6ce; } ul li a:hover { /*background: url('button2.png') no-repeat;*/ border: 1px solid #e1ed81; background: #ecf3b4; -moz-border-radius: 3px; -webkit-border-radius: 3px; /*text-shadow: 1px 1px 1px #fff*/ } a {text-decoration: none;} #area { position: absolute; top: 125px; left: 300px; height: 600px; width: 700px; } #big { position: absolute; top: 800px; left: 280px; } #big1 { position: absolute; top: 875px; left: 280px; } ul#bottom-menu { position: absolute; top: 390px; left: 271px; font: bold 14pt sans-serif; z-index: 3; } ul#bottom-menu li { list-style:none; float: none; } ul#bottom-menu li a { display: block; width: 150px; height: 24px; position: relative; top: 385px; left: 15px; border: 20px; z-index: 4 } ul#bottom-menu li a { display: block; width: 200px; height: 50px; padding: 23px 0px 0px 0px; text-align: center; } ul#bottom-menu li a: hover { background: url('active_big.png') no-repeat; } #footer { position: absolute; left: 0px; top: 1000px; height: 80px; width: 1010px; } <html> <head> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <img src="logo.png" id="logo"> <ul> <li><a href="#">услуги</a></li> <li><a href="#">заказать</a></li> <li><a href="#">сотрудничать</a></li> <li><a href="#">позвонить</a></li> </ul> <img src="buttonfeald.png" id="buttonfeald"> <img src="area.png" id="area"> <img src="big.png" id="big"> <img src="big.png" id="big1"> <img src="footer.png" id="footer"> <ul id="bottom-menu"> <li><a href="#">Заказать seo</a></li> <li><a href="#">Взять работу</a></li> </ul> </body> </html>
-
Картинку в бекграунд тексту-ссылки, на ховере, попробовал загнать вот этим способом, но у меня не работает, не понятно.
-
Привет. Есть плашка меню, она являет собой одну картинку, на ней текстовое меню (z-index). Нужно, чтобы при наведении курсора на область каждого пункта меню появлялась кнопка, а без курсора просто плашка с текстом. Возможно ли это сделать на css? Если да, то как? <html> <head> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <img src="logo.png" id="logo"> <ul> <li><a href="#">óñëóãè</a></li> <li><a href="#">çàêàçàòü</a></li> <li><a href="#">ñîòðóäíè÷àòü</a></li> <li><a href="#">ïîçâîíèòü</a></li> </ul> <img src="buttomfeald.png" id="buttomfeald"> <img src="area.png" id="area"> <img src="big.png" id="big"> <img src="big.png" id="big1"> <img src="footer.png" id="footer"> <a class="buttom1" href="#"><img src="buttom.png"></a> </body> </html> body { background-color: #FFFFFF; background-image: url("tree.png"); background-repeat: no-repeat; background-position: 20px 125px; } #logo { position: relative; top: 10px; left: 30px; height: 95px; width: 220px; } #buttomfeald { position: absolute; top: 45px; left: 300px; width: 711px; height: 60px; z-index: 1; } a.buttom1 img { position: absolute; width: 138px; height: 44px; top: 53px; left: 310px; z-index: 2; display: none; } a.buttom1:hover img { position: absolute; width: 138px; height: 44px; top: 53px; left: 310px; z-index: 2; } ul { position: absolute; top: 50px; left: 275px; font:bold 12pt sans-serif; z-index: 3; } ul li { list-style:none; margin:35; display:inline; } a {text-decoration: none;} #area { position: absolute; top: 125px; left: 300px; height: 600px; width: 700px; } #big { position: absolute; top: 800px; left: 280px; } #big1 { position: absolute; top: 875px; left: 280px; } #footer { position: absolute; left: 0px; top: 1000px; height: 80px; width: 1010px; }