Что-то я не могу понять (или глупый вопрос по CSS)

Smallbear · 13 вересня 2011

Появился у меня как всегда глупый вопрос по CSS а может и несовсем глупый :)Надеюсь кто-нибудь сможет помочь.

В общем есть сайт http://cms.template-help.com/virtuemart_30545/ на нем меня очень заинтерисовало горизонтальное меню,а кокретно фон кнопок,чтобы лучше понимать вот скриншот:

Хочу вот такую же кнопочку сделать и в шаблоне на опенкарте,но вот что-то не получается.На этом сайте кнопочка реализована из двух кусочков,вот таких:

Т.е. картинка одна справа и другая слева

В опенкарте же горизонтальное меню реализовано,немного по другому-там используется всего одна картинка.Впринципе я нашел альтернативное решение:

background: -moz-linear-gradient(top,  #baceb6,  #93f5eb);
	-moz-border-radius: 20px;

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

Также пробовал "украсть" стиль у кнопок в опенкарте ,вот этот:

.button {
	padding-left: 8px;
	display: inline-block;
	margin-right: 5px;
	background: url('../image/button_left.png') top left no-repeat;
	text-decoration: none;
	color:#FFF;
}
.button span {
	color: #FFF;
	display: block;
	padding: 4px 12px 5px 5px;
	background: url('../image/button_right.png') top right no-repeat;
}

но и он мне особо не помог , т.к. в горизонтальном меню нужно это как-то прописать именно для ссылок, а этот span все портит.

В общем много написал,для того чтобы понятно было , что-то и сам пытался делать,но главный вопрос довольно простой - Как сделать такую же кнопочку в опенкарте ? Но сделать корректно, чтобы и всякие там id="tab_home" тоже работали,т.е. чтобы и после нажатия кнопки подсвечивались.

Ritter · 13 вересня 2011

Ух. Честно говоря до конца вас не понял.

1) border-radius работает во всех браузерах (в том числе и в ie)

2) background: url('../image/button_left.png') top left no-repeat;

непонтяно для чего здесь нужен top (т.е. top left), вообще убрать его.

3) Почему именно для ссылок, если делать кнопку "двойным изображением", то здеть только span адекватное решение.

<a href="ссылка">
<span>ссылка</span>
</a>

css

.a { 
        padding-left: свое значение; 
        display: inline-block; 
        margin-right: свое значение; 
        background: url('../image/button_left.png') no-repeat; 
        text-decoration: none; 
        color:#FFF; 
}

.span { 
        color: #FFF; 
        display: block; 
        padding: свое значение; 
        background: url('../image/button_right.png') no-repeat; 
}

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

Если вам нужно, как в том дизайне (при наведении появляется кнопка), то hover, т.е. так

.a:hover { 
        padding-left: свое значение; 
        display: inline-block; 
        margin-right: свое значение; 
        background: url('../image/button_left.png') no-repeat; 
        text-decoration: none; 
        color:#FFF; 
}

.span:hover { 
        color: #FFF; 
        display: block; 
        padding: свое значение; 
        background: url('../image/button_right.png') no-repeat; 
}

Smallbear · 13 вересня 2011

Спасибо за помощь,но всеравно не совсем то,постараюсь обьяснить подробнее , надеюсь смогу :) (просто сам не пойму как точнее написать)

В общем результат хочу получить один в один с тем сайтом.

По порядку :

1)

border-radius работает во всех браузерах (в том числе и в ie)

это я немного неправильно написал,я имел ввиду что градиентная заливка с помощью только CSS работает только в мозиле,т.е. вот этот код:

background: -moz-linear-gradient(top, #baceb6, #93f5eb);

2)

background: url('../image/button_left.png') top left no-repeat;

непонтяно для чего здесь нужен top (т.е. top left), вообще убрать его.

в этот код если чесно не вникал,просто скопировал код который отвечает за похожую кнопку.

3)

Почему именно для ссылок, если делать кнопку "двойным изображением", то здеть только span адекватное решение.

<a href="ссылка">

<span>ссылка</span>

</a>

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

Если не сложно попробуйте реализовать такую кнопку в опенкарте и выложте код,так было бы намного быстрее и понятнее во всяком случае для меня.А то я уже начал пробовать вариант из трех картинок:)Т.е. по типу как сделан фон в теге H1

#content .top .left {
	background: url('../image/content_top_left.png') no-repeat;
	width: 5px;
	height: 32px;
	float: left;
}
#content .top .right {
	background: url('../image/content_top_right.png') no-repeat;
	width: 5px;
	height: 32px;
	float: right;
}
#content .top .center {
	background: url('../image/content_top_center.png') repeat-x;
	margin-left: 5px;
	margin-right: 5px;
}

Но и тут загвозда.Как по такому принципу прописать фон именно для ссылок?

Smallbear · 13 вересня 2011

Кстати насчет этого сайта http://cms.template-help.com/virtuemart_30545/

там очень интресный фон (кружочки которые при наведении двигаются интересно как это сделано..

Ritter · 13 вересня 2011

Ок, завтра помогу :) Если позволит свободное время.

Кстати насчет этого сайта http://cms.template-help.com/virtuemart_30545/

там очень интресный фон (кружочки которые при наведении двигаются интересно как это сделано..

двойной фон + скрипт

Smallbear · 13 вересня 2011

Ок, завтра помогу :) Если позволит свободное время.

двойной фон + скрипт

Спасибо.

Мне вообще это не горит,но чисто для себя бы хотелось увидеть правильную реализацию.Так что буду рад , если у Вас что-то получится

Ritter · 14 вересня 2011

Надеюсь вам нужно так:

Что надо сделать, чтобы было также как на картинке:

1. убрать внимательно блоки div5 и div6 из header.tpl

2. в header.tpl заменить:

<div class="div4"><a href="<?php echo str_replace('&', '&', $home); ?>" id="tab_home"><?php echo $text_home; ?></a>
      <?php if (!$logged) { ?>
      <a href="<?php echo str_replace('&', '&', $login); ?>" id="tab_login"><?php echo $text_login; ?></a>
      <?php } else { ?>
      <a href="<?php echo str_replace('&', '&', $logout); ?>" id="tab_logout"><?php echo $text_logout; ?></a>
      <?php } ?>
      <a href="<?php echo str_replace('&', '&', $account); ?>" id="tab_account"><?php echo $text_account; ?></a><a href="<?php echo str_replace('&', '&', $cart); ?>" id="tab_cart"><?php echo $text_cart; ?></a><a href="<?php echo str_replace('&', '&', $checkout); ?>" id="tab_checkout"><?php echo $text_checkout; ?></a></div>

на:

<div class="div4">
 <ul>
    <li><a href="<?php echo str_replace('&', '&', $home); ?>" id="tab_home"><span id="tab_home2"><?php echo $text_home; ?></span></a></li>
      <?php if (!$logged) { ?>
     <li><a href="<?php echo str_replace('&', '&', $login); ?>" id="tab_login"><span id="tab_login2"><?php echo $text_login; ?></span></a></li>
      <?php } else { ?>
     <li><a href="<?php echo str_replace('&', '&', $logout); ?>" id="tab_logout"><span id="tab_logout2"><?php echo $text_logout; ?></span></a></li>
      <?php } ?>
     <li><a href="<?php echo str_replace('&', '&', $account); ?>" id="tab_account"><span id="tab_account2"><?php echo $text_account; ?></span></a></li>
      <li><a href="<?php echo str_replace('&', '&', $cart); ?>" id="tab_cart"><span id="tab_cart2"><?php echo $text_cart; ?></span></a></li>
      <li><a href="<?php echo str_replace('&', '&', $checkout); ?>" id="tab_checkout"><span id="tab_checkout2"><?php echo $text_checkout; ?></span></a></li>
</ul>
      </div>

3. В этом же файле заменить в скрипте:

if (!route) {
		$('#tab_home').addClass('selected');
	} else {
		part = route.split('/');
		
		if (route == 'common/home') {
			$('#tab_home').addClass('selected');
		} else if (route == 'account/login') {
			$('#tab_login').addClass('selected');	
		} else if (part[0] == 'account') {
			$('#tab_account').addClass('selected');
		} else if (route == 'checkout/cart') {
			$('#tab_cart').addClass('selected');
		} else if (part[0] == 'checkout') {
			$('#tab_checkout').addClass('selected');
		} else {
			$('#tab_home').addClass('selected');
		}
	}

на

if (!route) {

		$('#tab_home').addClass('selected');
        $('#tab_home2').addClass('selected');

	} else {

		part = route.split('/');

		

		if (route == 'common/home') {

			$('#tab_home').addClass('selected');
            $('#tab_home2').addClass('selected');

		} else if (route == 'account/login') {

			$('#tab_login').addClass('selected');
            $('#tab_login2').addClass('selected');	

		} else if (part[0] == 'account') {

			$('#tab_account').addClass('selected');
            $('#tab_account2').addClass('selected');

		} else if (route == 'checkout/cart') {

			$('#tab_cart').addClass('selected');
            $('#tab_cart2').addClass('selected');

		} else if (part[0] == 'checkout') {

			$('#tab_checkout').addClass('selected');
            $('#tab_checkout2').addClass('selected');

		} else {

			$('#tab_home').addClass('selected');
            $('#tab_home2').addClass('selected');

		}

	}

4. Заливаем картинки меню и кнопки в папку image шаблона.

5. В css заменяем #header .div4 на

#header .div4 { 
    clear: both; 
    width: 960px; 
    height: 56px; 
    margin-bottom: 15px; 
    background: url('../image/menu-bg.gif') repeat-x;   
} 
 
#header .div4 ul { 
    list-style: none; 
    margin: 0; 
    padding: 8px 0 8px 13px; 
} 
 
#header .div4 ul li { 
    float: left; 
    margin-right: 1px; 
} 
 
#header .div4 ul li a { 
    font-size: 14px; 
    text-decoration: none; 
    display: block; 
} 
 
#header .div4 li span { 
    color: #FFFFFF; 
    padding: 11px 23px; 
    display: block;
    overflow: hidden;
} 
 
#header .div4 li span:hover, #header .div4 li span.selected { 
    background: url("../image/menu-left-bg.jpg") no-repeat scroll left top transparent; 
    color: #FFFFFF; 
    padding: 11px 23px; 
    text-decoration: none; 
    display: block;
    overflow: hidden;
} 
 
#header .div4 li a:hover, #header .div4 li a.selected { 
    background: url("../image/menu-right-bg.jpg") no-repeat scroll right top transparent; 
    color: #FFFFFF; 
    display: block; 
}

Метод немного извращенный, делал на скорую руку.

Smallbear · 14 вересня 2011

Ritter , спасибо большое. Я знал,что не все так просто там))Буду пробовать повторить.

P.S. Только вот не понял к чему там в коде css встречаются строки касающиеся ul и li,ведь в опенкарте , именно в меню вроде никаких списков нет.

Вхід

Что-то я не могу понять (или глупый вопрос по CSS)

Recommended Posts

Smallbear

Надіслати

Поділитися на інших сайтах

Ritter

Надіслати

Поділитися на інших сайтах

Smallbear

Надіслати

Поділитися на інших сайтах

Smallbear

Надіслати

Поділитися на інших сайтах

Ritter

Надіслати

Поділитися на інших сайтах

Smallbear

Надіслати

Поділитися на інших сайтах

Ritter

Надіслати

Поділитися на інших сайтах

Smallbear

Надіслати

Поділитися на інших сайтах

Створіть аккаунт або увійдіть для коментування

Створити обліковий запис

Вхід

Зараз на сторінці 0 користувачів

Покупцям

Розробникам

Корисна інформація

Останні розширення

Ваші замовлення

ocStore

Шаблони

OpenCart.Pro

Important Information