Редизайн сайта

saint_12 · July 31, 2012

Уважаемые участники форума! Обращаюсь к вам с просьбой о помощи в изменении вида кнопок на странице при наведении курсора! Дело в том, что страница сверстана на <div> с применением id, а примеры по изменению картинки при наведении написаны с применением class. У меня уже голова квадратная, но внести нужные изменения в код не получается! Если кому-то не в лом, покажите на примере моей странички, как должен выглядеть код для меняющихся кнопок и текста...

Вот пример, который я рассматривал, но изменить свою страничку так и не смог... :dash: http://htmlbook.ru/faq/kak-sdelat-chtoby-kartinka-menyalas-pri-navedenii-na-nee

Вот макет сайта:

кнопочки из серых должны становиться зелеными при наведении...

вот код странички:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>БЛОЧНАЯ ВЕРСТКА МАКЕТА</title>
</head>
<link rel="stylesheet" type="text/css" a href="style.css">
<body>

<div id="main">
	<div id="header">

    <div id="header_text">

        		<div id="header1_text">Slogan goes here</div><!--header1_text-->
					<div id="header2_text">Company Name</div><!--header2_text-->

        </div><!--header_text-->

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




<div id="menu_left">
<div id="menu_left1">

<div id="buttons">
		<div id="buttons1">    
   			<div id="buttons1_text"><b>Warmheartedness</b></div>
        </div>

       <div id="buttons2">    
   			<div id="buttons2_text"><b>Warmheartedness</b></div>
            </div>

            <div id="buttons3">    
   			<div id="buttons3_text"><b>Solutions</b></div>
            </div>

            <div id="buttons4">    
   			<div id="buttons4_text"><b>Our Clients</b></div>
            </div>

            <div id="buttons5">    
   			<div id="buttons5_text"><b>Contacts</b></div>
            </div>

            <div id="buttons6">    
   			<div id="buttons6_text"><b>News</b></div>
            </div>

            <div id="buttons7">    
   			<div id="buttons7_text"><b>Offers</b></div>
            </div>

            <div id="buttons8">    
   			<div id="buttons8_text"><b>Career Center</b></div>
            </div>

            <div id="buttons9">    
   			<div id="buttons9_text"><b>Offers</b></div>
            </div>

            <div id="buttons10">    
   			<div id="buttons10_text"><b>Services</b></div>
            </div> 

</div><!--buttons-->

        </div><!--menu_left1-->

<div id="footer"></div><!--footer-->

</div><!--menu_left-->

<div id="menu_right">

<div id="button_top_reklama"></div>

<div id="reklama4"></div>

<div id="ssulka4"><a href="http://www.google.ru/"><b>Ut vitae purus</b></a></div>

<div id="button_top_reklama1"></div>

<div id="menu_right_text"><b>Ut vitae purus.</b> <br>Integer wisi a mi <br> blandit cursus.<br>Aliquam erat volutpa<br>Donec aliquet quam<br> amet uma. Donec </div>

<div id="reklama5"></div>

</div> <!--menu_right-->


<div id="content">
<div id="content_text">
<div id="content_text1">Welcome to</div>

<div id="content_text2"><b>Sed scelerisque convallis mauris</b></div>

<div id="content_text3"><b>Ut vitae purus.</b>Integer a wisi a mi blandit cursus. Aliquam erat volutpat.Donec <br>aliquet quam sit amet urna. 
Donec  vitae mauris.Donec Aliquett egestas arcu eget<br> augue.Duis id velit in turpis convallis aliquam.</div>


<div id="Horizontal_line1"></div>


<div id="content_text2"><b>Sed scelerisque convallis mauris</b></div>

<div id="content_text3"><b>Ut vitae purus.</b>Integer a wisi a mi blandit cursus. Aliquam erat volutpat.Donec <br>aliquet quam sit amet urna. 
Donec  vitae mauris.Donec Aliquett egestas arcu eget<br> augue.Duis id velit in turpis convallis aliquam.</div>


<div id="Horizontal_line1"></div>

<div id="content_text4"><b>Integer a wisi a mi blandit cursus</b></div>

<div id="reklama">
<div id="reklama1">
<div id="reklama2">
<div id="reklama3">

<div id="ssulka_3"><a href="http://www.google.ru/">Aliquet egestas</a>
</div><!--reklama3-->

</div><!--reklama2-->

</div><!--reklama1-->
<div id="ssulka_1"><a href="http://www.google.ru/">Aliquet egestas</a>


</div>

</div><!--reklama-->
<div id="ssulka_2"><a href="http://www.google.ru/">Aliquet egestas</a>

</div><!--content_text-->
</div><!--content-->







</div><!--main-->
</body>
</html>

=========

Код CSS:

#main { width:800px;
		margin:  auto;
		}

#header {   width:800px;
			height:180px;
			background-image: url(images/logotip.jpg);
			background-color:#00CC66;}

#header1_text {font-family: Georgia, "Times New Roman", Times, serif;
				font-size:12px;
			    color:#7db35d;
				padding-top:80px;
				margin-left:440px;}


#header2_text {font-family: Tahoma;
				font-size:30px;
			    color:black;
				padding-top:0px;
				margin-left:415px;}


#menu_left1{width:82px;
			height:368px;
			/*float:left;*/
			background-color:green;

			background-image: url(images/full_left_bok.jpg);
			background-repeat:no-repeat;}

#menu_left {width:230px;
			height:368px;
			float:left;
			}


#buttons1 {width:128px;
		   height:30px;
		   float:left;
		   margin-top:45%;
		   margin-left:80px;
		   pading:50px;
		   background-image: url(images/button1_on.gif);
		  }

#buttons1_text {font-size:13px;
			    color:#7db35d;
				margin-top:7px;
				margin-left:23px;}


#buttons2 {width:130px;
		   height:30px;
		   float:left;
		   margin-top:1px;
		   margin-left:80px;
		   background-image: url(images/button1_off.gif);}


#buttons2_text {font-size:13px;
			    color:#565656;
				margin-top:7px;
				margin-left:24px;}

#buttons3 {width:130px;
		   height:30px;
		   float:left;
		   margin-top:0px;
		   margin-left:80px;
		   background-image: url(images/button1_off.gif);}


#buttons3_text {font-size:13px;
			    color:#565656;
				margin-top:7px;
				margin-left:33px;}

#buttons4 {width:130px;
		   height:30px;
		   float:left;
		   margin-top:0px;
		   margin-left:80px;
		   background-image: url(images/button1_off.gif);}


#buttons4_text {font-size:13px;
			    color:#565656;
				margin-top:7px;
				margin-left:33px;}


#buttons5 {width:130px;
		   height:30px;
		   float:left;
		   margin-top:0px;
		   margin-left:80px;
		   background-image: url(images/button1_off.gif);}


#buttons5_text {font-size:13px;
			    color:#565656;
				margin-top:7px;
				margin-left:33px;}

#buttons6 {width:130px;
		   height:30px;
		   float:left;
		    margin-top:0px;
		   margin-left:80px;
		   background-image: url(images/button1_off.gif);}


#buttons6_text {font-size:13px;
			    color:#565656;
				margin-top:7px;
				margin-left:33px;}

#buttons7 {width:130px;
		   height:30px;
		   float:left;
		    margin-top:0px;
		   margin-left:80px;
		   background-image: url(images/button1_off.gif);}


#buttons7_text {font-size:13px;
			    color:#565656;
				margin-top:7px;
				margin-left:33px;}


#buttons8 {width:130px;
		   height:30px;
		   float:left;
		    margin-top:0px;
		   margin-left:80px;
		   background-image: url(images/button1_off.gif);}


#buttons8_text {font-size:13px;
			    color:#565656;
				margin-top:7px;
				margin-left:33px;}


#buttons9 {width:130px;
		   height:30px;
		   float:left;
		   margin:90px 0 0 68px;
		   margin-top:0px;
		   margin-left:80px;
		   background-image: url(images/button1_off.gif);}


#buttons9_text {font-size:13px;
			    color:#565656;
				margin-top:7px;
				margin-left:33px;}


#buttons10 {width:130px;
		   height:30px;
		   float:left;
		    margin-top:0px;
		   margin-left:80px;
		   background-image: url(images/button1_off.gif);}


#buttons10_text {font-size:13px;
			    color:#565656;
				margin-top:7px;
				margin-left:33px;}


#menu_right {width:165px;
			height:429px;
			float:right;
			}

#content {width:399px;
			height:370px;
			margin-top:0px;
			margin-left:230px;
			}

#footer {width:230px;
			height:27px;
			/*margin-top:415px;*/
			background-image: url(images/lf2.gif);
			background-repeat:no-repeat;}


#content_text {font-family:Arial, Helvetica, sans-serif;
			   font-size:24px;
			   margin-left:15px;}

#content_text2 {font-family:Tahoma;
				font-size:12px;
			    color:#6d9e4e;
				padding-top:10px;
				margin-left:4px;}


#content_text3 {font-family:Tahoma;
				font-size:10px;
			    color:black;
				padding-top:10px;
				margin-left:4px;}

#Horizontal_line1 {width:378px;
				   height:3px;
				   background-image: url(images/horizontal.jpg);
				   background-repeat:no-repeat;
				   margin-top:10px;
				   margin-left:4px;}


#content_text4 {font-family:Tahoma;
				font-size:12px;
			    color:#5a5a5a;
				padding-top:10px;
				margin-left:7px;}


#reklama1 {width:76px;
		   height:106px;
		   margin-top:5px; 
		   margin-left:20px;
		   background-image: url(images/reklama1.jpg);
		   background-repeat:no-repeat;}

#ssulka_1 {font-size:11px;
		   font-family:Tahoma;
		    padding-top:1px;
		    margin-left:0px;}

#ssulka_2 {font-size:11px;
		   font-family:Tahoma;
		    margin-left:148px;}

#ssulka_3 {font-size:11px;
		   font-family:Tahoma;
		   padding-top:106px; 
		    margin-left:0px;}

#ssulka4 { font-family:Tahoma;
			font-size:10px;
		    padding-top:5px; 
		    padding-left:42px;
			color:#00FF00;}


#reklama2 {width:76px;
		   height:105px;
		   margin-left:125px;
		   background-image: url(images/reklama2.jpg);}

#reklama3 {width:76px;
		   height:106px;
		   margin-top:5px; 
		   margin-left:137px;
		   background-image: url(images/reklama3.jpg);
		   background-repeat:no-repeat;}

#reklama4 {width:96px;
		   height:124px;
		   margin-top:7%; 
		   margin-left:19%;
		   background-image: url(images/reklama4.jpg);
		   background-repeat:no-repeat;}

#reklama5 {width:95px;
		   height:71px;
		   margin-top:5%; 
		   margin-left:19%;
		   background-image: url(images/reklama5.jpg);
		   background-repeat:no-repeat;}

#content a{
 color:#5a5a5a;
}

#menu_right a{
 color:#5a5a5a;
}

#button_top_reklama {width:152px;
		   			 height:28px;
		  			 background-image: url(images/button_top_reklama.jpg);
		  			 background-repeat:no-repeat;}


#button_top_reklama1 {width:152px;
		   			 height:28px;
					 margin-top:6%;
		  			 background-image: url(images/button_top_reklama.jpg);
		  			 background-repeat:no-repeat;}


#menu_right_text {font-family:Tahoma;
				  font-size:10px;
			      color:#5a5a5a;
				  padding-left:20%;
				}

saint_12 · August 1, 2012

Неужели настолько сложно, что никто не сможет помочь?

Вот фрагмент, который нужно видоизменить, просто у меня опыта не хватает:

<div id="buttons">
                <div id="buttons1">    
                        <div id="buttons1_text"><b>Warmheartedness</b></div>
        </div>

       <div id="buttons2">    
                        <div id="buttons2_text"><b>Warmheartedness</b></div>
            </div>

            <div id="buttons3">    
                        <div id="buttons3_text"><b>Solutions</b></div>
            </div>

            <div id="buttons4">    
                        <div id="buttons4_text"><b>Our Clients</b></div>
            </div>

            <div id="buttons5">    
                        <div id="buttons5_text"><b>Contacts</b></div>
            </div>

            <div id="buttons6">    
                        <div id="buttons6_text"><b>News</b></div>
            </div>

            <div id="buttons7">    
                        <div id="buttons7_text"><b>Offers</b></div>
            </div>

            <div id="buttons8">    
                        <div id="buttons8_text"><b>Career Center</b></div>
            </div>

            <div id="buttons9">    
                        <div id="buttons9_text"><b>Offers</b></div>
            </div>

            <div id="buttons10">    
                        <div id="buttons10_text"><b>Services</b></div>
            </div>

Andrey447 · August 1, 2012

saint_12, просто нужно чтобы при наведении менялся стиль? ну в css это :hover

#buttons1:hover {стиль при наведении}

..

Если к id :hover не работает, переделайте в классы, но работать должно

Edited August 1, 2012 by Andrey447

sigma77 · August 1, 2012

Дело в том, что страница сверстана на <div> с применением id, а примеры по изменению картинки при наведении написаны с применением class.

А в чем сложность:

1) Заменить id на класс или просто добавить нужные классы?

2) Заменить селектор класса в примере на селектор по id?

В принципе обильное использование id в верстке - зло.

Неужели настолько сложно, что никто не сможет помочь?

Не отвечают потому что никому не интересно копать кучу чужого кода. Сокращайте код до минимально необходимого, в идеале выкладывать ссылку на живой пример. Можно на своём хосте, если есть, или на http://jsfiddle.net/

В общем-то решить можно несколькими способами, в зависимости от конечной цели.

1) Добавить нужным элементам класс и обращаться уже к ним по классу - .my_class:hover {}

2) Использовать дочерний селектор - #buttons > div:hover {}

3) Обращаться индивидуально к каждому блоку - #buttons1:hover {}

saint_12 · August 1, 2012

Спасибо ребята, но я уже самотужкы :boast:

Вот релиз, пока без надписей:

html:

<a href="http://www.google.ru" class="button1"> </a>
            <a href="http://www.google.ru" class="button2"> </a>
            <a href="http://www.google.ru" class="button3"> </a>
            <a href="http://www.google.ru" class="button4"> </a>
            <a href="http://www.google.ru" class="button5"> </a>
            <a href="http://www.google.ru" class="button6"> </a>
            <a href="http://www.google.ru" class="button7"> </a>
            <a href="http://www.google.ru" class="button8"> </a>
            <a href="http://www.google.ru" class="button9"> </a>
            <a href="http://www.google.ru" class="button10"> </a>

CSS:


a.button1 {
    background: url(images/button1_off.gif); /* Путь к файлу с исходным рисунком  */
    display: block; /*  Рисунок как блочный элемент */
    width: 128px; /* Ширина рисунка */
    height: 30px; /*  Высота рисунка */
	float:left;
		   margin-top:45%;
		   margin-left:80px;
		   pading:50px;
   }
   a.button1:hover {
    background: url(images/button1_on.gif); /* Путь к файлу с заменяемым рисунком  */
   }

   a.button2 {width:128px;
		   height:30px;
		   float:left;
		   margin-top:1px;
		   margin-left:80px;
		   background-image: url(images/button1_off.gif)}	


	 a.button2:hover {
    background: url(images/button1_on.gif);	}


	a.button3 {	width:128px;
		   height:30px;
		   float:left;
		   margin-top:0px;
		   margin-left:80px;
		   background-image: url(images/button1_off.gif);}


	 a.button3:hover {
    background: url(images/button1_on.gif);}


	a.button4 {	width:128px;
		   height:30px;
		   float:left;
		   margin-top:0px;
		   margin-left:80px;
		   background-image: url(images/button1_off.gif);}


	 a.button4:hover {
    background: url(images/button1_on.gif);}

	a.button5 {	width:128px;
		   height:30px;
		   float:left;
		   margin-top:0px;
		   margin-left:80px;
		   background-image: url(images/button1_off.gif);}


	 a.button5:hover {
    background: url(images/button1_on.gif);}

	a.button6 {	width:128px;
		   height:30px;
		   float:left;
		   margin-top:0px;
		   margin-left:80px;
		   background-image: url(images/button1_off.gif);}


	 a.button6:hover {
    background: url(images/button1_on.gif);}

	a.button7 {	width:128px;
		   height:30px;
		   float:left;
		   margin-top:0px;
		   margin-left:80px;
		   background-image: url(images/button1_off.gif);}


	 a.button7:hover {
    background: url(images/button1_on.gif);}

	a.button8 {	width:128px;
		   height:30px;
		   float:left;
		   margin-top:0px;
		   margin-left:80px;
		   background-image: url(images/button1_off.gif);}


	 a.button8:hover {
    background: url(images/button1_on.gif);}


	a.button9 {	width:128px;
		   height:30px;
		   float:left;
		   margin-top:0px;
		   margin-left:80px;
		   background-image: url(images/button1_off.gif);}


	 a.button9:hover {
    background: url(images/button1_on.gif);}

	a.button10 {	width:128px;
		   height:30px;
		   float:left;
		   margin-top:0px;
		   margin-left:80px;
		   background-image: url(images/button1_off.gif);}


	 a.button10:hover {
    background: url(images/button1_on.gif);}

Надписи сделаю с возможностью изменения в коде, а не картинки кнопок с текстом...

А за глупые вопросы и некомпактный код извините, парился очень долго, буду исправляться... :rolleyes: :blink:

Sign In

Редизайн сайта

Recommended Posts

saint_12

Link to comment

Share on other sites

saint_12

Link to comment

Share on other sites

Andrey447

Link to comment

Share on other sites

sigma77

Link to comment

Share on other sites

saint_12

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information