Перейти к публикации
View in the app

A better way to browse. Learn more.

Дизайн и модификация Invision Community

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Как изменить наложение слоев изображения

Опубликовано:

Здравствуйте! Хочу попросить вас о помощи. Дело в том, что был установления скин на IP Board 2.3.6 с последующей заменой логотипа на свой (здесь).

Проблема в том, что при изменении разрешения экрана или при сворачивание в браузера в окно, изображение А перекрывается изображениями B и С.

 

 

5ef776e93687t.jpg

 

 

Вот код из шаблона global_board_header

 

<!--ipb.javascript.start-->
<script type="text/javascript">
//<![CDATA[
var ipb_var_st            = "{$this->ipsclass->input['st']}";
var ipb_lang_tpl_q1       = "{$this->ipsclass->lang['tpl_q1']}";
var ipb_var_s             = "{$this->ipsclass->session_id}";
var ipb_var_phpext        = "{$this->ipsclass->vars['php_ext']}";
var ipb_var_base_url      = "{$this->ipsclass->js_base_url}";
var ipb_var_image_url     = "{$this->ipsclass->vars['img_url']}";
var ipb_input_f           = "{$this->ipsclass->input['f']}";
var ipb_input_t           = "{$this->ipsclass->input['t']}";
var ipb_input_p           = "{$this->ipsclass->input['p']}";
var ipb_var_cookieid      = "{$this->ipsclass->vars['cookie_id']}";
var ipb_var_cookie_domain = "{$this->ipsclass->vars['cookie_domain']}";
var ipb_var_cookie_path   = "{$this->ipsclass->vars['cookie_path']}";
var ipb_md5_check         = "{$this->ipsclass->md5_check}";
var ipb_new_msgs          = {$this->ipsclass->member['new_msg']};
var use_enhanced_js       = {$this->ipsclass->can_use_fancy_js};
var use_charset           = "{$this->ipsclass->vars['gb_char_set']}";
var ipb_myass_chars_lang  = "{$this->ipsclass->lang['myass_chars']}";
var ajax_load_msg		   = "{$this->ipsclass->lang['ajax_loading_msg_new']}";
//]]>
</script>
<script type="text/javascript" src='jscripts/ips_ipsclass.js'></script>
<script type="text/javascript" src='jscripts/ipb_global.js'></script>
<script type="text/javascript" src='jscripts/ips_menu.js'></script>
<script type="text/javascript" src='{$this->ipsclass->vars['img_url']}/folder_js_skin/ips_menu_html.js'></script>
<script type="text/javascript" src='cache/lang_cache/{$this->ipsclass->lang_id}/lang_javascript.js'></script>
<script type="text/javascript">
//<![CDATA[
var ipsclass = new ipsclass();
ipsclass.init();
ipsclass.settings['do_linked_resize'] = parseInt( "{$this->ipsclass->vars['resize_linked_img']}" );
ipsclass.settings['resize_percent']   = parseInt( "{$this->ipsclass->vars['resize_img_percent']}" );
//]]>
</script>
<!--ipb.javascript.end-->
<table border="0" width="100%" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="300" height="345" align="right"><img width="300" height="345" src="style_images/<#IMG_DIR#>/top_left.png" /></td> <----------- Изображение B
<td align="center" width="100%" style="background: url('style_images/<#IMG_DIR#>/top.png') no-repeat top center;"> </td> <----------- Изображение А
<td width="300" height="345" align="left"><img src="style_images/<#IMG_DIR#>/top_right.png" width="300" height="345" /></td> <----------- Изобрадение С
</tr>
</table>
<table border="0" width="100%" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="150" height="50" align="right"><img width="150" height="50" src="style_images/<#IMG_DIR#>/l2.png" alt="" /></td>
<td align="center" width="100%" style="background: url('style_images/<#IMG_DIR#>/t.png') repeat-x top center;"> </td>
<td width="150" height="50" align="left"><img src="style_images/<#IMG_DIR#>/r1.png" width="150" height="50" alt="" /></td>
</tr>
</table>


<div align="center">
<div class="page" style="width:100%; text-align:left">
	<div style="padding:0px 25px 0px 25px">


<div class="borderwrap">

<div id="submenu">
	<!--ipb.leftlinks.start-->
	<if="$this->ipsclass->vars['home_url']">
		<div class='ipb-top-left-link'><a href="{$this->ipsclass->vars['home_url']}">{$this->ipsclass->vars['home_name']}</a></div>
	</if>
	<if="$this->ipsclass->vars['csite_on']">
		<div class='ipb-top-left-link'><a href="{$this->ipsclass->base_url}act=home">{$this->ipsclass->vars['csite_title']}</a></div>
	</if>		
	<!--IBF.RULES-->
	<!--ipb.leftlinks.end-->
	<!--ipb.rightlinks.start-->
	<div class='ipb-top-right-link'><a href="{$this->ipsclass->base_url}act=Help">{$this->ipsclass->lang['tb_help']}</a></div>
	<div class='ipb-top-right-link' id="ipb-tl-search"><a href="{$this->ipsclass->base_url}act=Search&f={$this->ipsclass->input['f']}">{$this->ipsclass->lang['tb_search']}</a></div>
	<div class='ipb-top-right-link'><a href="{$this->ipsclass->base_url}act=Members">{$this->ipsclass->lang['tb_mlist']}</a></div>
	<div class='ipb-top-right-link'><a href="{$this->ipsclass->base_url}act=calendar">{$this->ipsclass->lang['tb_calendar']}</a></div>
	<if="$component_links != """>
		{$component_links}
	</if>
	<div class='popupmenu-new' id='ipb-tl-search_menu' style='display:none;width:210px'>
		<form action="{$this->ipsclass->base_url}act=Search&CODE=01" method="post">
			<input type='hidden' name='forums' id='gbl-search-forums' value='all' /> 
			<input type="text" size="20" name="keywords" id='ipb-tl-search-box' />
			<input class="button" type="image" style='border:0px' src="{$this->ipsclass->vars['img_url']}/login-button.gif" />
			<if="($this->ipsclass->input['act'] == 'sf' OR $this->ipsclass->input['act'] == 'st') AND $this->ipsclass->input['f']">
				<br /><input type='checkbox' id='gbl-search-checkbox' value='1' onclick='gbl_check_search_box()' checked='checked' /> {$this->ipsclass->lang['gbl_forum_search']}
			</if>
		</form>
		<div style='padding:4px'>
			<a href='{$this->ipsclass->base_url}act=Search'>{$this->ipsclass->lang['gbl_more_search']}</a>
		</div>
	</div>
	<script type="text/javascript">
		ipsmenu.register( "ipb-tl-search", 'document.getElementById("ipb-tl-search-box").focus();' );
		gbl_check_search_box();
	</script>
	<!--ipb.rightlinks.end-->
</div>
</div>
<if="$this->ipsclass->can_use_fancy_js != 0">
<script type="text/javascript" src='jscripts/ips_xmlhttprequest.js'></script>
<script type="text/javascript" src='jscripts/ipb_global_xmlenhanced.js'></script>
<script type="text/javascript" src='jscripts/dom-drag.js'></script>
<div id='get-myassistant' style='display:none;width:400px;text-align:left;'>
<div class="borderwrap">
<div class='maintitle' id='myass-drag' title='{$this->ipsclass->lang['myass_drag']}'>
 <div style='float:right'><a href='#' onclick='document.getElementById("get-myassistant").style.display="none"'>[X]</a></div>
 <div>{$this->ipsclass->lang['myass_title']}</div>
</div>
<div id='myass-content' style='overflow-x:auto;'></div>
</div>
</div>
<!-- Loading Layer -->
<div id='loading-layer' style='display:none'>
<div id='loading-layer-shadow'>
   <div id='loading-layer-inner'>
 	<img src='style_images/<#IMG_DIR#>/loading_anim.gif' border='0' alt='{$this->ipsclass->lang['ajax_loading_msg']}' />
	<span style='font-weight:bold' id='loading-layer-text'>{$this->ipsclass->lang['ajax_loading_msg']}</span>
    </div>
</div>
</div>
<!-- / Loading Layer -->
<!-- Msg Layer -->
<div id='ipd-msg-wrapper'>
<div id='ipd-msg-title'>
	<a href='#' onclick='document.getElementById("ipd-msg-wrapper").style.display="none"; return false;'><img src='style_images/<#IMG_DIR#>/close.png' alt='X' title='Close Window' class='ipd' /></a>   <strong>{$this->ipsclass->lang['gbl_sitemsg_header']}</strong>
</div>
<div id='ipd-msg-inner'><span style='font-weight:bold' id='ipd-msg-text'></span><div class='pp-tiny-text'>{$this->ipsclass->lang['gbl_auto_close']}</div></div>
</div>
<!-- Msg Layer -->
</if>
<!-- / End board header -->

 

Вопрос: возможно ли сделать изображение А зависимым от разрешения экрана, т.е. чтобы оно автоматически меняло свой размер при том или ином разрешении экрана, или возможно ли сделать так, чтобы изображения В и С не перекрывали изображение А, а наоборот, оно было верхнем слоем?

Заранее спасибо за ответ!

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

Опубликовано:

У Вас не слои, а таблица.

Средняя картинка находится в ячейке без фиксированной ширины

<td align="center" width="100%" style="background: url('style_images/<#IMG_DIR#>/top.png') no-repeat top center;"> </td>

А боковые имеют ширину по 300px.

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

 

Вы просто выньте картинку оттуда и сделайте слой со свойствами большого z-индекса и абсолютной позицией.

Например добавьте внизу перед

Опубликовано:
  • Автор

А можно поподробнее написать что и где изменять, а то я пока новичок в этом... :)

Опубликовано:

Я подробно уже объяснила.

Более подробно просто не умею.

Опубликовано:
  • Автор

:( Не могу найти тег </body>. В CSS новый код добавил, но там где высота и ширина, я так понял надо вписывать высоту и ширину картинки? Я прав?

Опубликовано:

В главном шаблоне.

Впрочем, вписать можно и в global_boarf_header в конце

 

Да. В пикселях. Высоту точно надо. Ширину можно и 100%

Опубликовано:
  • Автор

Да, спасибо, все сделал, все добавил... Только вот изменений не ощущаю... :(

Опубликовано:

Я там по-прежнему вижу в коде

<td align="center" width="100%" style="background: url('style_images/lineage_wh1281105626/top.png') repeat-x top center;"> </td>

Причем картинка даже не открывается.

Следов нового кода не заметила.

Опубликовано:
  • Автор

Все изменения я делал на локальном хосте у себя на компьютере )

 

Вот новый код:

 

global_board_header

 

<!--ipb.javascript.start-->
<script type="text/javascript">
//<![CDATA[
var ipb_var_st            = "{$this->ipsclass->input['st']}";
var ipb_lang_tpl_q1       = "{$this->ipsclass->lang['tpl_q1']}";
var ipb_var_s             = "{$this->ipsclass->session_id}";
var ipb_var_phpext        = "{$this->ipsclass->vars['php_ext']}";
var ipb_var_base_url      = "{$this->ipsclass->js_base_url}";
var ipb_var_image_url     = "{$this->ipsclass->vars['img_url']}";
var ipb_input_f           = "{$this->ipsclass->input['f']}";
var ipb_input_t           = "{$this->ipsclass->input['t']}";
var ipb_input_p           = "{$this->ipsclass->input['p']}";
var ipb_var_cookieid      = "{$this->ipsclass->vars['cookie_id']}";
var ipb_var_cookie_domain = "{$this->ipsclass->vars['cookie_domain']}";
var ipb_var_cookie_path   = "{$this->ipsclass->vars['cookie_path']}";
var ipb_md5_check         = "{$this->ipsclass->md5_check}";
var ipb_new_msgs          = {$this->ipsclass->member['new_msg']};
var use_enhanced_js       = {$this->ipsclass->can_use_fancy_js};
var use_charset           = "{$this->ipsclass->vars['gb_char_set']}";
var ipb_myass_chars_lang  = "{$this->ipsclass->lang['myass_chars']}";
var ajax_load_msg		   = "{$this->ipsclass->lang['ajax_loading_msg_new']}";
//]]>
</script>
<script type="text/javascript" src='jscripts/ips_ipsclass.js'></script>
<script type="text/javascript" src='jscripts/ipb_global.js'></script>
<script type="text/javascript" src='jscripts/ips_menu.js'></script>
<script type="text/javascript" src='{$this->ipsclass->vars['img_url']}/folder_js_skin/ips_menu_html.js'></script>
<script type="text/javascript" src='cache/lang_cache/{$this->ipsclass->lang_id}/lang_javascript.js'></script>
<script type="text/javascript">
//<![CDATA[
var ipsclass = new ipsclass();
ipsclass.init();
ipsclass.settings['do_linked_resize'] = parseInt( "{$this->ipsclass->vars['resize_linked_img']}" );
ipsclass.settings['resize_percent']   = parseInt( "{$this->ipsclass->vars['resize_img_percent']}" );
//]]>
</script>
<!--ipb.javascript.end-->
<div id="logostrip"><a href='{$this->ipsclass->base_url}'><!--ipb.logo.start--><img src='style_images/<#IMG_DIR#>/logo4.gif' style='vertical-align:top' alt='IPB' border='0' /><!--ipb.logo.end--></a></div>
<div id="submenu">
	<!--ipb.leftlinks.start-->
	<div id='submenu_left'>
	<if="$this->ipsclass->vars['home_url']">
		<a href="{$this->ipsclass->vars['home_url']}">{$this->ipsclass->vars['home_name']}</a>
	</if>
	<if="$this->ipsclass->vars['csite_on']">
		<a href="{$this->ipsclass->base_url}act=home">{$this->ipsclass->vars['csite_title']}</a>
	</if>	
	<!--IBF.RULES-->
	</div>
	<!--ipb.leftlinks.end-->
	<!--ipb.rightlinks.start-->
	<div id='submenu_right'>
		<a href="{$this->ipsclass->base_url}act=Help">{$this->ipsclass->lang['tb_help']}</a>
		<a href="{$this->ipsclass->base_url}act=Search&f={$this->ipsclass->input['f']}" id="ipb-tl-search">{$this->ipsclass->lang['tb_search']}</a>
		<a href="{$this->ipsclass->base_url}act=Members">{$this->ipsclass->lang['tb_mlist']}</a>
		<a href="{$this->ipsclass->base_url}act=calendar">{$this->ipsclass->lang['tb_calendar']}</a>
		<if="$component_links != """>
			{$component_links}
		</if>
		<div class='popupmenu-new' id='ipb-tl-search_menu' style='display:none;width:210px'>
			<form action="{$this->ipsclass->base_url}act=Search&CODE=01" method="post">
				<input type='hidden' name='forums' id='gbl-search-forums' value='all' /> 
				<input type="text" size="20" name="keywords" id='ipb-tl-search-box' />
				<input class="button" type="image" style='border:0px' src="{$this->ipsclass->vars['img_url']}/login-button.gif" />
				<if="($this->ipsclass->input['act'] == 'sf' OR $this->ipsclass->input['act'] == 'st') AND $this->ipsclass->input['f']">
					<br /><input type='checkbox' id='gbl-search-checkbox' value='1' onclick='gbl_check_search_box()' checked='checked' /> {$this->ipsclass->lang['gbl_forum_search']}
				</if>
			</form>
			<div style='padding:4px'>
				<a href='{$this->ipsclass->base_url}act=Search'>{$this->ipsclass->lang['gbl_more_search']}</a>
			</div>
		</div>
		<script type="text/javascript">
			ipsmenu.register( "ipb-tl-search", 'document.getElementById("ipb-tl-search-box").focus();' );
			gbl_check_search_box();
		</script>
	</div>
	<!--ipb.rightlinks.end-->
</div>
<if="$this->ipsclass->can_use_fancy_js != 0">
<script type="text/javascript" src='jscripts/ips_xmlhttprequest.js'></script>
<script type="text/javascript" src='jscripts/ipb_global_xmlenhanced.js'></script>
<script type="text/javascript" src='jscripts/dom-drag.js'></script>
<div id='get-myassistant' style='display:none;width:400px;text-align:left;'>
<div class="borderwrap">
<div class='maintitle' id='myass-drag' title='{$this->ipsclass->lang['myass_drag']}'>
 <div style='float:right'><a href='#' onclick='document.getElementById("get-myassistant").style.display="none"; return false;' title='{$this->ipsclass->lang['myass_close']}'>[X]</a></div>
 <div>{$this->ipsclass->lang['myass_title']}</div>
</div>
<div id='myass-content' style='overflow-x:auto;'></div>
</div>
</div>
<!-- Loading Layer -->
<div id='loading-layer' style='display:none'>
<div id='loading-layer-shadow'>
   <div id='loading-layer-inner'>
 	<img src='style_images/<#IMG_DIR#>/loading_anim.gif' border='0' alt='{$this->ipsclass->lang['ajax_loading_msg']}' />
	<span style='font-weight:bold' id='loading-layer-text'>{$this->ipsclass->lang['ajax_loading_msg']}</span>
    </div>
</div>
</div>
<!-- / Loading Layer -->
<!-- Msg Layer -->
<div id='ipd-msg-wrapper'>
<div id='ipd-msg-title'>
	<a href='#' onclick='document.getElementById("ipd-msg-wrapper").style.display="none"; return false;'><img src='style_images/<#IMG_DIR#>/close.png' alt='X' title='Close Window' class='ipd' /></a>   <strong>{$this->ipsclass->lang['gbl_sitemsg_header']}</strong>
</div>
<div id='ipd-msg-inner'><span style='font-weight:bold' id='ipd-msg-text'></span><div class='pp-tiny-text'>{$this->ipsclass->lang['gbl_auto_close']}</div></div>
</div>
<!-- Msg Layer -->
</if>
<!-- / End board header -->

 

Главный шаблон:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=<% CHARSET %>" />
<link rel="shortcut icon" href="favicon.ico" />
<title>Клан DeLorean</title>
<% GENERATOR %> 
<% CSS %> 
<% JAVASCRIPT %> 
</head> 
<body>
<div id="ipbwrapper">
<% BOARD HEADER %>
<% MEMBER BAR %>
<% NAVIGATION %>
<!--IBF.NEWPMBOX-->
<% BOARD %>
<% BOARD FOOTER %>
<% STATS %> 
<% COPYRIGHT %>
<div class:'top-center'> </div>
</body> 
</html>

 

CSS:

 

}

.top-center {
background: url('style_images/<#IMG_DIR#>/top.png') 50% 0 no-repeat;
position: absolute;
top: 10px;
width: 482px;
height: 342px;
z-index: 10000;

Изменено пользователем Zudi

Опубликовано:

Моя ошибка. Двоеточие поставила вместо равно

 

Надо

<div class='top-center'> </div>

Опубликовано:
  • Автор

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

 

Т.е. При развернутом окне браузеро изображение стоит идеально

 

5db1ccf3a639t.jpg

 

А при свертывании (или изменении разрешения экрана) оно съезжает:

 

0d59fcf6bf11t.jpg

 

Как сдеать, чтобы оно всегда оставалось по центру? Буду очень признателен!!! :(

Изменено пользователем Zudi

Опубликовано:

Не совсем поняла.

 

М.б. добавить

background-attachment: fixed;

?

 

Или имеется ввиду фиксированная высота?

Опубликовано:
  • Автор

В CSS добавить?

background-attachment: fixed;

 

Ммм, чтобы всегда был фиксированный отступ от левого и правого края, вот так вот наверное. =)

 

 

Да,

background-attachment: fixed;

помогло, этого и хотел, только теперь это изображение ездиет вверх-вниз вместе со скроллом :D

 

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

 

11d307f93762t.jpg

 

c68ad14d9d55t.jpg

 

Надеюсь понятно выразил свою мысль )

 

background-attachment: fixed;

дает именно то, что нужно, вот только не ездило бы изображение еще за скроллом, было бы совсем идельно.

 

 

АААааа, я нашел то, что мне помогло, а имеенно вот этот код:

 

html {
 min-width: 1440px;
}

 

Здесь, я установил фиксированные размер наиболее часто используемого разрешения экрана, что даже при сворачивании в окно не изменяет положение изображения!!!11

Fisana, огромное спасибо Вам за помощь, вы - гений! :(

Изменено пользователем Zudi

Опубликовано:

Не за что.

 

Чтобы от разрешения не так зависело, верхнюю позицию укажите в процентах.

 

Это, где в css

top: ....

Опубликовано:
  • Автор

Ага, спасибо, сделал.

Создайте аккаунт или войдите в него для комментирования

Сейчас на странице 0

  • Нет пользователей, просматривающих эту страницу.

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.