Перейти к содержанию
siniovvitia

переверстать дефолтный шаблон

Рекомендуемые сообщения

Эта тема для тех кто хочет научиться переделывать дизайн из дефолтного шаблона.

На форуме видел много вопросов от новичков по поводу дизайна,- их очень часто посылают на htmlbook.

...я сам немного понимаю в css, и неплохо разбираюсь в html, и когда столкнулся с практической задачей, то решил не засорять форум новой темой типа: а как сделать это? , а в ответ - хотите сделать это - идите на htmlbook, поэтому я пошел сразу на htmlbook )))

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

А для тех, кто в этом разбирается, - дело пяти минут написать решение и еще пяти минут объяснить как и что и почему...

Буду благодарен всем кто примет участие в этой теме!!!

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

если кому надо - могу выложить решение.

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

Подскажите как это реализовать,- что изменить или добавить в css и что изменить или добавить в файл footer.tpl

коды файлов выложу в следующем сообщении.

Заранее благодарен за помощь!

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

это код css

html {
	overflow: -moz-scrollbars-vertical;
	margin: 0;
	padding: 0;
}
* {
	font-family: Arial, Helvetica, sans-serif;
}
body {
	margin: 0px;
	padding: 0px;
	text-align: center;
}
body, td, th, input, textarea, select, a {
	font-size: 12px;
}
form {
	padding: 0;
	margin: 0;
	display: inline;
}
input, textarea, select {
	margin: 3px 0px;
}
a, a:visited {
	color: #1B57A3;
	text-decoration: underline;
	cursor: pointer;
}
a:hover {
	text-decoration: none;
}
a img {
	border: none;
}
p {
	margin-top: 0px;
}
/* layout */
#container {
margin: 0 10px 0 10px;
        text-align: left;
}
#header .div2 {
	float: left;
	padding-top: 15px;
	padding-left: 15px;
}
#header .div3 {
	float: right;
	padding-top: 7px;
	height: 38px;
}
#header .div3 a {
	margin-left: 15px;
	padding: 1px 0px 2px 20px;
	background-repeat: no-repeat;
	background-position: left center;
}
#header .div4 {
	width: 510px;
	clear: right;
	float: right;
	height: 32px;
	padding-right: 14px;
}
#header .div4 a {
	float: left;
	margin-right: 2px;
	width: 100px;
	height: 18px;
	padding-top: 9px;
	padding-bottom: 9px;
	background: url('../image/tab_1.png') no-repeat;
	text-align: center;
	color: #333333;
	text-decoration: none;
	font-size: 14px;
	font-weight: bold;
	position: relative;
	z-index: 1;
}
#header .div4 a.selected {
	background: url('../image/tab_2.png') no-repeat;
	color: #FFF;
	padding-bottom: 10px;
	z-index: 3;
}
#header .div5 {
	clear: both;
}
#header .div5 .left {
	background: url('../image/header_1_left.png') no-repeat;
	width: 5px;
	height: 40px;
	float: left;
}
#header .div5 .right {
	background: url('../image/header_1_right.png') no-repeat;
	width: 5px;
	height: 40px;
	float: right;
}
#header .div5 .center {
	background: url('../image/header_1_center.png') repeat-x;
	height: 40px;
	margin-left: 5px;
	margin-right: 5px;
}
#header .div6 {
	clear: both;
	margin-bottom: 10px;
}
#header .div6 .left {
	background: url('../image/header_2_left.png') no-repeat;
	width: 5px;
	height: 32px;
	float: left;
}
#header .div6 .right {
	background: url('../image/header_2_right.png') no-repeat;
	width: 5px;
	height: 32px;
	float: right;
}
#header .div6 .center {
	background: url('../image/header_2_center.png') repeat-x;
	height: 32px;
	margin-left: 5px;
	margin-right: 5px;
	padding-left: 5px;
	padding-right: 5px;
}
#header .div7 {
	float: right;
	padding-top: 2px;
}
#header .div8 {
	float: left; margin-top: 6px;
}
#header .div9 {
	float: left;
}
#header .div10 {
	float: left; 
	margin-top: 2px;	
}
#search {
	padding-top: 7px;
	padding-left: 5px;
	color: #FFF;
	font-weight: bold;
}
#search select {
	border: 1px solid #0A5391;
	padding: 1px;
}
#search a {
	color: #FFF;
}
#search input {
	border: 1px solid #0A5391;
	padding: 2px;
}
#breadcrumb {
	float: left;
	padding-top: 7px;
	padding-bottom: 11px;
	height: 13px;
	margin-bottom: 10px;
	color: #000000;
}
.switcher {
	float: right;	
	margin-top: 3px;
	margin-left: 10px;
}
.switcher a {
	text-decoration: none;
	display: block;
}
.switcher .selected {
	background: #FFFFFF url('../image/switcher.png') repeat-x;
}
.switcher .selected a {
	border: 1px solid #CCCCCC;
	background: url('../image/arrow_down.png') 116px center no-repeat;
	color: #666666;
	padding: 2px 5px 2px 5px;
	width: 121px;
}
.switcher .selected a:hover {
	background: #F0F0F0 url('../image/arrow_down.png') 116px center no-repeat;
}
.switcher .option {	
	position: absolute;
	z-index: 3;
	border-left: 1px solid #CCCCCC;
	border-right: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
	background-color: #EEEEEE;
	display: none;
	width: 131px;
}
.switcher .option a {
	color: #000;
	padding: 3px 5px 3px 5px;
}
.switcher .option a:hover {
	background: #FFC;
}
.switcher img {
	position: relative;
	top: 1px;
}
#column_left {
	float: left;
	width: 180px;
	margin-right: 10px;
	clear: left;
}
#column_right {
	float: right;
	width: 180px;
	margin-left: 10px;
	clear: right;
}
#content {
	margin-left: 190px;
	margin-right: 190px;
	margin-bottom: 10px;
}
#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;
}
#content .top h1, .heading {
	padding: 8px 0px 8px 7px;
}
#content h1, .heading {
	color: #000000;
	font-size: 14px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	margin: 0px;
}
#content .middle {
	border-left: 1px solid #215eab;
	border-right: 1px solid #215eab;
	background: #FFFFFF;
	padding: 10px 10px 1px 10px;
	min-height: 30px;
}
#content .bottom .left {
	background: url('../image/content_bottom_left.png') no-repeat;
	width: 5px;
	height: 5px;
	float: left;
}
#content .bottom .right {
	background: url('../image/content_bottom_right.png') no-repeat;
	width: 5px;
	height: 5px;
	float: right;
}
#content .bottom .center {
	background: url('../image/content_bottom_center.png') repeat-x;
	height: 5px;
	margin: 0 5px 10px 5px;
}
.box {
	margin-bottom: 10px;
	background: url('../image/box_top.png') no-repeat;
}
.box .top {
	padding: 8px 0px 8px 7px;
	color: #000000;
	font-size: 14px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-transform: uppercase;
}
.box .top img {
	float: left;
	margin-right: 5px;
}
.box .middle {
	border-left: 1px solid #215eab;
	border-right: 1px solid #215eab;
	background: #FFFFFF;
	padding: 10px;
}
.box .bottom {
	height: 5px;
	background: url('../image/box_bottom.png') no-repeat;
}
.success {
	padding: 5px 0px;
	margin-bottom: 10px;
	background: #E4F1C9;
	border: 1px solid #A5BD71;
	font-size: 11px;
	font-family: Verdana, Geneva, sans-serif;
	text-align: center;
}
.warning {
	padding: 5px 0px;
	margin-bottom: 10px;
	background: #FFDFE0;
	border: 1px solid #FF9999;
	font-size: 11px;
	font-family: Verdana, Geneva, sans-serif;
	text-align: center;
}
.wait {
	padding: 5px 0px;
	margin-bottom: 10px;
	background: #FBFAEA;
	border: 1px solid #EFEBAA;
	font-size: 11px;
	font-family: Verdana, Geneva, sans-serif;
	text-align: center;
}
.required {
	color: #FF0000;
	font-weight: bold;
}
.error {
	color: #FF0000;
	display: block;
}
.help {
	cursor: pointer;
}
.tooltip {
	border: 1px solid #FDDA5C;
	background: #FBFF95;
	padding: 5px;
	font-size: 11px;
	width: 250px;
}
.clear { /* generic container (i.e. div) for floating buttons */
	overflow: hidden;
	width: 100%;
}
.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;
}
.buttons {
	background: #F8F8F8;
	border: 1px solid #DDDDDD;
	padding: 5px;
	margin-bottom: 10px;
}
.buttons input {
	padding: 0px;
	margin: 0px;
}
.buttons table {
	width: 100%;
	border-collapse: collapse;
}
.buttons table td {
	vertical-align: middle;
}
.content {
	background: #F7F7F7;
	border: 1px solid #DDDDDD;
	padding: 10px;
	margin-top: 3px;
	margin-bottom: 10px;
}
.list {
	margin-bottom: 10px;
	width: 100%;
}
.list td {
	text-align: center;
	vertical-align: top;
	padding-bottom: 10px;
}
.sort {
	margin-bottom: 10px;
	background: #F8F8F8;
	height: 30px;
	width: 100%;
}
.sort .div1 {
	float: right;
	margin-left: 5px;
	padding-top: 6px;
	padding-right: 9px;
}
.sort .div2 {
	text-align: right;
	padding-top: 9px;
}
.sort select {
	font-size: 11px;
	margin: 0;
	padding: 0;
}
.pagination {
	display: inline-block;
	width: 100%;
	background: #F8F8F8;
	margin-bottom: 10px;
}
.pagination .links, .pagination .results {
	padding: 7px;
}
.pagination .links {
	float: left;
}
.pagination .links a {
	border: 1px solid #CCCCCC;
	padding: 4px 7px;
	text-decoration: none;
	color: #000000;
}
.pagination .links b {
	border: 1px solid #CCCCCC;
	padding: 4px 7px;
	text-decoration: none;
	color: #000000;
	background: #FFFFFF;
}
.pagination .results {
	float: right;
}
.tabs {
	width: 100%;
	height: 31px;
	margin-bottom: 0px;
}
.tabs a {
	float: left;
	display: block;
	padding: 6px 15px 7px 15px;
	margin-right: 2px;
	border-top: 1px solid #DDDDDD;
	border-bottom: 1px solid #DDDDDD;
	border-left: 1px solid #DDDDDD;
	border-right: 1px solid #DDDDDD;
	background: #FFFFFF url('../image/tab_3.png') repeat-x;
	color: #000000;
	font-weight: bold;
	font-size: 13px;
	text-decoration: none;
	z-index: 1;
	position: relative;
	top: 1px;
}
.tabs a.selected {
	background: #FFFFFF url('../image/tab_3.png') repeat-x;
	border-bottom: 0px;
	padding-bottom: 8px;
	z-index: 3;
}
.tab_page {
	border: 1px solid #DDDDDD;
	background: #FFFFFF;
	padding: 10px;
	display: block;
	z-index: 2;
	margin-bottom: 10px;
}
#footer {
	width: 100%;
	clear: both;
	padding-top: 5px;
	border-top: 1px solid #215eab;
	background: 
     url('../catalog/view/theme/red/image/1/left-foot.png') left bottom no-repeat,
     url('../catalog/view/theme/red/image/1/right-foot.png') right bottom no-repeat, 
     url('../catalog/view/theme/red/image/1/center-foot.png') bottom repeat-x;
}
#footer .div1 {
	float: left;
	text-align: left;
}
#footer .div2 {
	float: right;
	text-align: right;
}
#category ul {
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 8px;
	padding-left: 12px;
	list-style: url('../image/bullet_1.png');
}
#information ul {
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 8px;
	padding-left: 12px;
	list-style: url('../image/bullet_2.png');
}
.cart {
	border-collapse: collapse;
	width: 100%;
	border: 1px solid #EEEEEE;
	margin-bottom: 10px;
}
.cart th {
	background: #EEEEEE;
	padding: 5px;
	font-weight: normal;
}
.cart td {
	padding: 5px;
}
.tags, .tags a {
	font-style: italic;
	font-size: x-small;
}
#module_cart .middle {
	padding: 5px;
}
.cart_module_total {
	padding: 0 3px 0 3px;
	font-size: 0.9em; 
	color: #222;
}
.cart_remove {
	margin-top: 3px;
	background: url('../image/list_remove_btn.gif') no-repeat left center transparent;
	padding-right:10px;
	cursor:pointer;
}
.cart_remove_loading {
	margin-top: 3px;
	background: url('../image/ajax_load.gif') no-repeat transparent;
	padding-right:10px;
}
.button_add_small, a.button_add_small:visited {
	margin-top: 3px;
	background: url('../image/button_add_small.png') no-repeat left center transparent;
	padding:5px;
	text-decoration: none;
	cursor:pointer;
}
#content .middle .box {
	float: left;
	margin: 0 6px 10px 6px;
	min-height: 0px;
}
#content .middle .box .middle {
	width: 158px;
	min-height: 0px;
}

это код footer.tpl

<div id="footer">
  <div class="div1"><!--<a onclick="window.open('https://www.paypal.com/uk/mrb/pal=W9TBB5DTD6QJW');"><img src="catalog/view/theme/default/image/payment.png" alt="" /></a>-->
  <body><!--LiveInternet counter--><script type="text/javascript"><!--
document.write("<a href='http://www.liveinternet.ru/click' "+
"target=_blank><img src='//counter.yadro.ru/hit?t14.1;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+
";"+Math.random()+
"' alt='' title='LiveInternet: показано число просмотров за 24"+
" часа, посетителей за 24 часа и за сегодня' "+
"border='0' width='88' height='31'><\/a>")
//--></script><!--/LiveInternet-->
</body>
  </div>
  <div class="div2"><?php echo $text_powered_by; ?></div>
</div>
</div>
<?php echo $google_analytics; ?>
</body></html>

если понадобятся еще какие-нибудь файлы,- выложу

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

писать все подробно не стану :unsure:

посмотрите как реализован данный шаблон

как раз ваша задача, резиновый футер и хеадер

С уважением fantasm!

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

писать все подробно не стану :unsure:

посмотрите как реализован данный шаблон

как раз ваша задача, резиновый футер и хеадер

С уважением fantasm!

спасибо конечно за шаблон...

...но этот на нем футер и хедер состоит из одной фотки, а мне надо из трех фоток

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

банально....но всё же... htmlbook вам в помощь :rolleyes:

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

банально....но всё же... htmlbook вам в помощь :rolleyes:

прикол,- пишу-же на htmlbook такого нету

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.