Главное меню сайта - HTML и CSS

cobria2 · 28.08.2010, 22:01

На верхнем меню сайта есть несколько кнопок разной ширины, которые в
css файле описываются этими тегами:
#topnav{ background: #FFF url(../images/brown/top_menu_bg.png) top repeat-x; #B8AE71}
#topnav ul li a:hover{background: #fff url(../images/brown/top_menu_button.png) no-repeat;}
#topnav ul li a.active{ background: #B8AE71; color:#FFFF; background: url(../images/brown/top_menu_button2.png) left no-repeat;}
Картинка-фон являет собой длинную кнопку *.png. Однако при отображении, ввиду большой ширины кнопки, часть с её завершением обрезается, поэтому получается вот-так:

, а хотелось бы кнопку с правм краем, как здесь:

.
Я пробовал наложить изображение окончания кнопки на исходную, но получалось, что окончание кнопки перекрывает исходную.
Можно ли как-то прописать в css наложение одной картинки на другую, вот примерно так:

.
Или написать для каждой кнопки отдельную картинку (для каждой кнопки есть id=menu#), но опять же у меня не получилось.

Предложите пожалуйста варианты решения проблемы. На кнопки можно посмотреть на сайте http://spx.vacau.com
Спасибо!

InternetStranger · 29.08.2010, 21:24

На самом деле у вашей проблемы 1000 и 1 способ решения, Вы поищите фразой "Скругленные углы", например вот.

cobria2 · 30.08.2010, 21:26

Цитата:

Сообщение от InternetStranger

На самом деле у вашей проблемы 1000 и 1 способ решения, Вы поищите фразой "Скругленные углы", например вот.

Насколько я понял, этот способ для конкретной одной кнопки, а у меня несколько кнопок и все разной ширины. Или я неправ?

InternetStranger · 30.08.2010, 22:11

Ну почему же для одной. Можно грамотно сделать так, чтобы ваш "контейнер со скругленными углами" автоматически растягивался под содержимое.
Т.е. например, для 10 кнопок различной ширины применяются одни и те же css-стили.

cobria2 · 30.08.2010, 23:48

Цитата:

Сообщение от InternetStranger

Ну почему же для одной. Можно грамотно сделать так, чтобы ваш "контейнер со скругленными углами" автоматически растягивался под содержимое.
Т.е. например, для 10 кнопок различной ширины применяются одни и те же css-стили.

Для этого нужно создавать отдельную сss таблицу?
В статье, что Вы указали, в методе при помощи css указан только тег border-radius, но он не может дать необходимого эффекта, так ведь?
И этот вариант работает только со скругленными краями (мне квадратные нужны).
Я в этом деле новичок, так что извиняюсь за вероятно ламерские вопросы...

P.S. И если не трудно можно 1-2 из 1001 метода решения проблемы, поподробнее.

InternetStranger · 03.09.2010, 20:31

Раньше не мог ответить - занят был. Вот наспех набросал одно из решений вашей задачи - на мой взгляд наиболее простое. Код не много не обтесанный.

PHP код:


			
<!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>Untitled Document</title>

    <style type="text/css">

        body {

            padding-top: 0;

        }



        

        .button {

            padding: 20px 20px;

            padding-right: 0;

            line-height: 14px;

            margin: 0 5px;

            display: inline;

            width: auto;

            background-image: url(button.png);

            background-repeat: no-repeat;

            background-position: left top;

        }

        

        .button a {

            text-decoration: none;

            padding: 20px 15px;

            padding-left: 0;

            line-height: 14px;

            background-image: url(button.png);

            background-repeat: no-repeat;

            background-position: right top;

        }

    </style>

</head>



<body>



        <br />

        <div class="button"> <a href="#"> Кнопка №1 </a>  </div>

        <div class="button"> <a href="#"> Это более широкая Кнопка №2 </a>  </div>

        <div class="button"> <a href="#"> Узкая Кнопка №3 </a>  </div>

   

</body>

</html>

Необходимое изображение button.png и внешний вид приложены:

cobria2 · 03.09.2010, 20:53

Большое СПАСИБО, за помощь

28.08.2010, 22:01	#1
cobria2 Пользователь Регистрация: 28.08.2010 Сообщений: 11	Главное меню сайта На верхнем меню сайта есть несколько кнопок разной ширины, которые в css файле описываются этими тегами: #topnav{ background: #FFF url(../images/brown/top_menu_bg.png) top repeat-x; #B8AE71} #topnav ul li a:hover{background: #fff url(../images/brown/top_menu_button.png) no-repeat;} #topnav ul li a.active{ background: #B8AE71; color:#FFFF; background: url(../images/brown/top_menu_button2.png) left no-repeat;} Картинка-фон являет собой длинную кнопку *.png. Однако при отображении, ввиду большой ширины кнопки, часть с её завершением обрезается, поэтому получается вот-так: , а хотелось бы кнопку с правм краем, как здесь: . Я пробовал наложить изображение окончания кнопки на исходную, но получалось, что окончание кнопки перекрывает исходную. Можно ли как-то прописать в css наложение одной картинки на другую, вот примерно так: . Или написать для каждой кнопки отдельную картинку (для каждой кнопки есть id=menu#), но опять же у меня не получилось. Предложите пожалуйста варианты решения проблемы. На кнопки можно посмотреть на сайте http://spx.vacau.com Спасибо!

29.08.2010, 21:24	#2
InternetStranger php / delphi Форумчанин Регистрация: 10.06.2007 Сообщений: 175	На самом деле у вашей проблемы 1000 и 1 способ решения, Вы поищите фразой "Скругленные углы", например вот. G.Azamat { Web Development / Computer simulation } Начинающий программист думает, что в килобайте 1000 байтов, а законченный уверен, что в километре 1024 метра.

30.08.2010, 22:11	#4
InternetStranger php / delphi Форумчанин Регистрация: 10.06.2007 Сообщений: 175	Ну почему же для одной. Можно грамотно сделать так, чтобы ваш "контейнер со скругленными углами" автоматически растягивался под содержимое. Т.е. например, для 10 кнопок различной ширины применяются одни и те же css-стили. G.Azamat { Web Development / Computer simulation } Начинающий программист думает, что в килобайте 1000 байтов, а законченный уверен, что в километре 1024 метра.

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Главное меню и т.д.	robin39	Помощь студентам	1	23.05.2010 09:54
главное меню (в Delphi) не отображается	Student_2008	Помощь студентам	4	16.05.2010 12:14
WebBrowser и главное меню	RIO	Общие вопросы Delphi	3	10.01.2010 01:48
Нормальное отрывающееся Главное меню	Starscream	Общие вопросы Delphi	6	18.07.2008 02:39
Полноэкранный режим и главное меню	Voland	Общие вопросы Delphi	2	03.04.2007 10:56

03.09.2010, 20:53	#7
cobria2 Пользователь Регистрация: 28.08.2010 Сообщений: 11	Большое СПАСИБО, за помощь