Возникла проблема с DIV'ами

TruMan · August 26, 2011

Здравствуйте. Создаю меню для сайта, опыта в CSS нет никакого, поэтому бьюсь уже около недели, постепенно изучая информацию.

Итак суть проблемы.

Нужно меню чисто на CSS (не считая скрипта для IE). Разделы меню естественно, имеют разные размеры. Я хочу чтобы при наведении на пункт меню, он выделялся соответствующим образом(см.ссылку).

http://truman14.ucoz.ru/bkack_menu.html

Но проблема в том, что это самое выделение, как мне видится, состоит из трех отдельных картинок (скругление левой части, центральная часть и правая).

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

Пробовал добиться этого с помощью DIV'ов, но не получилось.


<body>
<ul id="hmenu">
        <li><a href="#">Наш город</a>
                <ul>
                        <li><a class="her" href="#">Галереи</a></li>
                        <li><a class="her" href="#">Примечательности</a></li>
                </ul>
        </li>
        <li class="second"><a calss="second" href="#">Недвижимость</a></li>
        <li><a href="#">Досуг и отдых</a>
                <ul>
                        <li><a class="her" href="#">Group #1</a></li>
                        <li><a class="her" href="#">Group #2</a></li>
                        <li><a class="her" href="#">Group #3</a></li>
                        <li><a class="her" href="#">Group #4</a></li>
                        <li><a class="her" href="#">Group #5</a></li>
                </ul>
        </li>
        <li><a href="#">Рестораны/Кафе</a>
                <ul>
                        <li><a class="her" href="#">Download center</a></li>
                        <li><a class="her" href="#">FAQ</a></li>
                </ul>
        </li>
        <li><a href="#">Авто</a>
                <ul>
                        <li><a class="her" href="#">Download center</a></li>
                        <li><a class="her" href="#">FAQ</a></li>
                </ul>
        </li>
</ul>

<p>Water, bread and batteries disappeared from store shelves. Lines formed at the pump. From Florida to Maine, 
residents were told to brace for flash flooding and power outages.</p>
<p>Hundreds of miles south, Irene swirled through the Caribbean, giving a glimpse of what was to come. 
Homes were inundated with water, residents took refuge in schools and churches, and more than a million people 
were without electricity. One woman was killed in Puerto Rico.</p>
</body>

Ну а это собственно сам CSS код:


body{
margin: 0;
padding:0;
}

ul#hmenu {
	margin: 0;
	border: 0 none;
	padding: 0;
	list-style: none;
	background:url(images/green_fon.png)repeat-x;
	height: 41px;							/*высота полосы меню*/
	font: bold 12px/31px Tahoma, Arial, Helvetica, sans-serif;
	text-transform:uppercase;
}

ul#hmenu li {
	margin: 0;
	border: 0 none;
	padding: 0;
	float: left;
	display: inline;
	list-style: none;
	position: relative;
	height: 20px;							/*высота полосы подменю*/
}

ul#hmenu ul {
	margin: 0;
	border: 0 none;
	padding: 0;
	width: 160px;
	list-style: none;
	display: none;
	position: absolute;
	top: 41px;
	left: 0;
}

ul#hmenu ul:after {
	clear: both;
	display: block;
	font: 1px/0px serif;
	content: ".";
	height: 0;
	visibility: hidden;
}

ul#hmenu ul li {
	width: 160px;
	float: left;
	display: block !important;
	display: inline;
}

/* Main Menu */
ul#hmenu a {
	border: 0px;
	padding: 0 20px;
	float: none !important;
	float: left;
	display: block;
	background: url(images/12344.png)no-repeat left;
	color: #fff;
	font: bold 12px/31px Tahoma, Arial, Helvetica, sans-serif;
	text-decoration: none;
	height: 41px !important;
	height: 1%;
}

ul#hmenu a.her {
	border: 0px;
	padding: 0 6px; 
	float: none !important;
	float: left;
	display: block;
	background: #565766;
	color: #b2ff00;
	font: bold 12px/28px Tahoma, Arial, Helvetica, sans-serif;
	text-transform:none;
	text-decoration: none;
	height: auto !important;
	height: 1%;
}


/* Main Menu Hover */
ul#hmenu a:hover,
ul#hmenu li:hover a{
	background:url(images/fon_hover.png) no-repeat center;
	color: #FFFFFF;
}
ul#hmenu a.second:hover,
ul#hmenu li.second:hover a{
	background:url(images/1234.png) no-repeat center;
	color: #FFFFFF;
}


/* Second Menu */
ul#hmenu li:hover li a,
ul#hmenu li.iehover li a {
	border-top: 1px solid #FFFFFF;
	float: none;
	font: 12px/20px Tahoma, Arial, Helvetica, sans-serif;
	background:  url(images/fon_second_menu.png);
	color: #FFFFFF;
}

/* Second Menu Hover */
ul#hmenu li:hover li a:hover,
ul#hmenu li:hover li:hover a,
ul#hmenu li.iehover li a:hover,
ul#hmenu li.iehover li.iehover a {
	border-top: 1px solid #FFFFFF;
	background: #808298;
	color: #FFFFFF;
}

ul#hmenu ul ul {
	display: none;
	position: absolute;
	top: 0;
	left: 160px;
}

ul#hmenu li:hover ul ul,
ul#hmenu li.iehover ul ul {
	display: none;
}

ul#hmenu li:hover ul,
ul#hmenu ul li:hover ul,
ul#hmenu li.iehover ul,
ul#hmenu ul li.iehover ul {
	display: block;
}

Заранее спасибо за помощь, хотелось бы создать меню с помощью трех изображений, которые автоматически подгонялись бы под пункты меню, а не из 10 картинок.

Кстати на счет ДИВов.

Я делал так:


<div class="box">
<ul id="hmenu">
<div class="left"><div class="center"><div class="right">
<li><a href="#">Наш город</a>
                <ul>
                        <li><a class="her" href="#">Галереи</a></li>
                        <li><a class="her" href="#">Примечательности</a></li>
                </ul>
        </li>
</div></div></div>
        <li class="second"><a calss="second" href="#">Недвижимость</a></li>
        <li><a href="#">Досуг и отдых</a>
                <ul>
                        <li><a class="her" href="#">Group #1</a></li>
                        <li><a class="her" href="#">Group #2</a></li>
                        <li><a class="her" href="#">Group #3</a></li>
                        <li><a class="her" href="#">Group #4</a></li>
                        <li><a class="her" href="#">Group #5</a></li>
                </ul>
        </li>
        <li><a href="#">Рестораны/Кафе</a>
                <ul>
                        <li><a class="her" href="#">Download center</a></li>
                        <li><a class="her" href="#">FAQ</a></li>
                </ul>
        </li>
        <li><a href="#">Авто</a>
                <ul>
                        <li><a class="her" href="#">Download center</a></li>
                        <li><a class="her" href="#">FAQ</a></li>
                </ul>
        </li>
</ul>

Ну и соответственно в коде CSS описывал каждый класс (left, center, right)

Наверняка я что-то конкретно недопонимаю, поэтому прошу вашей помощи

Softlink · August 27, 2011

сделайте через border-radius и не парьтесь.

TruMan · August 27, 2011

сделайте через border-radius и не парьтесь.

Вы же понимаете, что это будет CSS3. Я, конечно, обеими руками за, но есть одно "НО". IE, чтоб он провалился. Так что пока что этот вариант в резерве..

Radiocity · August 27, 2011

Попробуйте поиграться с jquery плагином: http://jquery.malsup.com/corner/

TruMan · August 27, 2011

В общем я сделал меню, но с помощью классов и к каждой ссылке прикрутил свою собственную картинку. То есть всего их получилось семь, а не три как мне нужно было.

Я все еще в поиске решения, кто может посоветовать что-либо, буду признателен

Вот ссылка, на подменю внимания не обращаем, это временный цвет

http://truman14.ucoz.ru/bkack_menu.html

Sign In

Возникла проблема с DIV'ами

Question

TruMan

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

Softlink

Link to comment

Share on other sites

TruMan

Link to comment

Share on other sites

Radiocity

Link to comment

Share on other sites

TruMan

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information