Как сделать фон активным

@temagraf · Регистрация: 03.04.2015

Author24 — интернет-сервис помощи студентам

Добрый День. Пытаюсь на сайте http://mc-mk.ru/ сделать активный беграунд, чтобы работал в дальнейшем tooltip, но уже весь css облазил, так и не получается сделать его активным, т.е. сейчас на нем стоит ссылка, но она не видна.
В css стиле(style.ss) строка 534 ставлю z-index: 0. Фон становиться активным, но бока пропадают del Прошу помощи специалистов.

Spirt Tesla · 14.01.2016, 17:26

Для указания того, что изображение является картой, используется атрибут usemap тега <img>. В качестве значения указывается ссылка на описание конфигурации карты. Для указания браузеру, что изображение является картой, применяется атрибут usemap. Он является ссылкой на описание конфигурации карты, которая задается тегом <map>. Значение атрибута name данного тега должно соответствовать имени в usemap. Для задания активой области, являющейся ссылкой на HTML-документ, используется тег <area>. Возможно я вас неправильно понял)

@temagraf · 15.01.2016, 00:05 **[ТС]**

Дело в том что у меня эта картика находиться типа за боковыми картинками. Я просто даже сейчас сделал линк на всю картинку но вы не сможете перейти на нее. А когда уберете В css стиле(style.ss) строка 534 ставлю z-index: 0. Фон становиться активным и гиперсылка работает, но картинки по бокам самого шаблона исчезают.

Добавлено через 6 часов 33 минуты
Кто знает решение этой проблемы прошу вашей помощи.

@temagraf · 17.01.2016, 21:44 **[ТС]**

никто не знает решение проблемы?

@Fedor92 · 17.01.2016, 23:46

temagraf, если честно не понятно о какой ссылке идёт речь... Попробуйте максимально точно сформулировать, что именно не получается - быстрее получите помощь... Немного переварив, полученную от Вас ранее информацию возник вопрос: а почему бы боковым картинкам не задать z-index:2, тогда как основной фон будет иметь свойство, скажем z-index:1? Ко всему прочему напрашивается использование трёх колонок: одна слева, одна по центру и одна справа...

@temagraf · 18.01.2016, 00:26 **[ТС]**

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

в этом блоке css кода прописываются боковые панели:

CSS

#wrapper {
  height: 100%;
  min-height: 100%;
  width: 100%;
  margin: 0 auto;
  background: url(images/grdrop.png) top left repeat-y,
  url(images/grlines-white.png) right top no-repeat,
  url(images/grline.png) right top repeat-y;
}

а в этом блоке главный фон:

CSS

#circle-center_new {
 
  z-index: -1; 
    width: 100%; 
    height: 100%; 
    position: fixed;
    left: 0;
    top: 0;
}

Саму картинку размещаю в материале с этим id(#circle-center_new).

Если поставить вместо z-index: -1; z-index: 0; в блоке(#circle-center_new)

То на фоне гиперссылки начинают работать но пропадают панели боковые, а если поставить в блоке (#wrapper)
z-index: 2; то они все равно пропадают, т.е. они получаются как бы за фоном. Вот в этом то у меня и проблема, где прописать так чтобы панельки боковые оставались на месте и гиперссылки на фоне работали.

Spirt Tesla · 18.01.2016, 05:48

Переверстайте ваш сайт немного,сделайте его 3х колоночным,и все будет как вы хотите

@temagraf · 18.01.2016, 10:55 **[ТС]**

А по другому никак не сделать? Ведь Переверстать весь сайт прийдется

@Fedor92 · 18.01.2016, 11:25

temagraf, при отрицательном z-index ссылки работать не будут... Верстайте тремя колонками не лепите тройной фон...

@temagraf · 18.01.2016, 11:31 **[ТС]**

Скажите а можно сделать Position модулей, т.е. создать позицию слева и справа и размещать там боковые картинки?

@Fedor92 · 18.01.2016, 11:44

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

Скажите а можно сделать Position модулей

Что значит модулей?
Можно сделать например при помощи position: absolute... Для левого блока - left:0, для правого блока - right:0, родитель должен быть растянут на высоту окна и иметь position relative... Или можно выстроить блоки в ряд... левый к примеру с шириной - 5%, блок по центру - 80% и правый-15%... Можно попробовать использовать фиксированную ширину для правого и левого блоков...

@temagraf · 18.01.2016, 11:54 **[ТС]**

А если у меня правая сторона (боковая) состоит из 2 элементов т.е. 2-х картинок.

Добавлено через 4 минуты
т.е. мне нужно так прописать в css стиле

#col1 {
width: 10%;
background: url(images/grdrop.png) top left repeat-y;
}
#col2 {
width: 70%;
position: fixed;
left: 0;
top: 0;
}
#col3 {
width: 20%;
background: url(images/grline.png) right top repeat-y, url(images/grlines-white.png) right top no-repeat;
}

@Fedor92 · 18.01.2016, 11:54

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

А если у меня правая сторона (боковая) состоит из 2 элементов т.е. 2-х картинок.

И как это Вам может помешать?

Можно сделать блок с двойным фоном... Можно опять же спозиционировать картинки внутри блока...

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

т.е. мне нужно так прописать в css стиле

Вроде того... Для второго блока не обязательно использовать фиксированную позицию... Сейчас пример накидаю...

@temagraf · 18.01.2016, 11:57 **[ТС]**

т.е. мне нужно так прописать в css стиле

#col1 {
width: 10%;
background: url(images/grdrop.png) top left repeat-y;
position:relative;
z-index:2;
}

#col2 {
width: 70%;
position: fixed;
left: 0;
top: 0;
z-index:1

}
#col3 {
width: 20%;
background: url(images/grline.png) right top repeat-y, url(images/grlines-white.png) right top no-repeat;
position:relative;
z-index:2;
}

@Fedor92 · 18.01.2016, 13:06

Схематический пример:

HTML5

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Shablon</title>
    <link href="style.css" rel="stylesheet">
</head>
<body>
<div class="wrapper">
    <div class="left-sidebar"></div>
    <div class="right-sidebar"></div>
    <div class="middle"><a href="#">Жамкни меня :-)</a></div>
</div>
<footer class="footer"></footer>
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
}
html {
    height: 100%;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
    display: block;
}
body {
    font: 12px/18px Arial, sans-serif;
    height: 100%;
}
.wrapper {
    min-width: 1000px;
    max-width: 1920px;
    margin: 0 auto;
    min-height: 100%;
    height: auto !important;
    height: 100%;
}
.middle {
    width: 80%;
    min-height:95%;
    margin: 0 15% 0 5%;
    position: absolute;
    background:yellow;
    z-index:1
}
 
.left-sidebar {
    position: absolute;
    left:0;
    width: 5%;
    min-height:100%;
    background: #B5E3FF;
    z-index:2
}
 
.right-sidebar {
    position:absolute;
    right:0;
    min-height:100%;
    z-index:2;
    width: 15%;
    margin-left: -250px;
    background: #FFACAA;
}
 
.footer {
    margin: -51px 15% 0 5%;
    min-width: 1000px;
    max-width: 1920px;
    height: 5%;
    background: #BFF08E;
    position: relative;
}

Естественно, если воспользуетесь ширину и высоту блоков надо пересчитать под свои размеры... Можно сделать и с помощью свойство float... Вариантов реализации множество...

@temagraf · 18.01.2016, 13:46 **[ТС]**

Посмотрите правильно сделал? вроди все отображает единственно теперь нужно адаптировать под разрешения.

Spirt Tesla · 18.01.2016, 14:18

насколько я понимаю вам z-index не нужен совсем,просто вам надо спозиционировать блоки один за одним,что в принципе легко делается при помощи display:inline-block; задаете свои размеры,картинки кладете в боковые блоки,карту в центральный блок и все.

@Fedor92 · 18.01.2016, 14:57

Сообщение от Spirt Tesla

насколько я понимаю вам z-index не нужен совсем,просто вам надо спозиционировать блоки один за одним,что в принципе легко делается при помощи display:inline-block

Ну так наверстайте шаблон своим методом...

Spirt Tesla · 18.01.2016, 15:04

Да я же не говорю что ваш метод не работает)просто у меня голова думает не как у вас,и это вполне нормально-верно ведь?)Ваше решение тоже хорошее,я этого не отрицаю)

@Fedor92 · 18.01.2016, 15:05

Сообщение от Spirt Tesla

Да я же не говорю что ваш метод не работает)

Причём тут мой метод...? Предложите альтернативную вёрстку может она подойдёт лучше, чем мой вариант... Заодно тему прокачаем...

@temagraf 0 / 0 / 0 Регистрация: 03.04.2015 Сообщений: 15
		1
	Как сделать фон активным 14.01.2016, 16:11. Показов 1750. Ответов 19 Метки нет (Все метки) Добрый День. Пытаюсь на сайте http://mc-mk.ru/ сделать активный беграунд, чтобы работал в дальнейшем tooltip, но уже весь css облазил, так и не получается сделать его активным, т.е. сейчас на нем стоит ссылка, но она не видна. В css стиле(style.ss) строка 534 ставлю z-index: 0. Фон становиться активным, но бока пропадают del Прошу помощи специалистов. Миниатюры 0

Spirt Tesla 16 / 16 / 3 Регистрация: 03.01.2015 Сообщений: 115
	14.01.2016, 17:26	2
	Для указания того, что изображение является картой, используется атрибут usemap тега <img>. В качестве значения указывается ссылка на описание конфигурации карты. Для указания браузеру, что изображение является картой, применяется атрибут usemap. Он является ссылкой на описание конфигурации карты, которая задается тегом <map>. Значение атрибута name данного тега должно соответствовать имени в usemap. Для задания активой области, являющейся ссылкой на HTML-документ, используется тег <area>. Возможно я вас неправильно понял) 0

@temagraf 0 / 0 / 0 Регистрация: 03.04.2015 Сообщений: 15
	15.01.2016, 00:05 [ТС]	3
	Дело в том что у меня эта картика находиться типа за боковыми картинками. Я просто даже сейчас сделал линк на всю картинку но вы не сможете перейти на нее. А когда уберете В css стиле(style.ss) строка 534 ставлю z-index: 0. Фон становиться активным и гиперсылка работает, но картинки по бокам самого шаблона исчезают. Добавлено через 6 часов 33 минуты Кто знает решение этой проблемы прошу вашей помощи. 0

@temagraf 0 / 0 / 0 Регистрация: 03.04.2015 Сообщений: 15
	17.01.2016, 21:44 [ТС]	4
	никто не знает решение проблемы? 0

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	17.01.2016, 23:46	5
	temagraf, если честно не понятно о какой ссылке идёт речь... Попробуйте максимально точно сформулировать, что именно не получается - быстрее получите помощь... Немного переварив, полученную от Вас ранее информацию возник вопрос: а почему бы боковым картинкам не задать z-index:2, тогда как основной фон будет иметь свойство, скажем z-index:1? Ко всему прочему напрашивается использование трёх колонок: одна слева, одна по центру и одна справа... 0

Spirt Tesla 16 / 16 / 3 Регистрация: 03.01.2015 Сообщений: 115
	18.01.2016, 05:48	7
	Переверстайте ваш сайт немного,сделайте его 3х колоночным,и все будет как вы хотите 0

@temagraf 0 / 0 / 0 Регистрация: 03.04.2015 Сообщений: 15
	18.01.2016, 10:55 [ТС]	8
	А по другому никак не сделать? Ведь Переверстать весь сайт прийдется 0

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	18.01.2016, 11:25	9
	temagraf, при отрицательном z-index ссылки работать не будут... Верстайте тремя колонками не лепите тройной фон... 0

@temagraf 0 / 0 / 0 Регистрация: 03.04.2015 Сообщений: 15
	18.01.2016, 11:31 [ТС]	10
	Скажите а можно сделать Position модулей, т.е. создать позицию слева и справа и размещать там боковые картинки? 0

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	18.01.2016, 11:44	11
	Сообщение от temagraf Скажите а можно сделать Position модулей Что значит модулей? Можно сделать например при помощи position: absolute... Для левого блока - left:0, для правого блока - right:0, родитель должен быть растянут на высоту окна и иметь position relative... Или можно выстроить блоки в ряд... левый к примеру с шириной - 5%, блок по центру - 80% и правый-15%... Можно попробовать использовать фиксированную ширину для правого и левого блоков... 0

@temagraf 0 / 0 / 0 Регистрация: 03.04.2015 Сообщений: 15
	18.01.2016, 11:54 [ТС]	12
	А если у меня правая сторона (боковая) состоит из 2 элементов т.е. 2-х картинок. Добавлено через 4 минуты т.е. мне нужно так прописать в css стиле #col1 { width: 10%; background: url(images/grdrop.png) top left repeat-y; } #col2 { width: 70%; position: fixed; left: 0; top: 0; } #col3 { width: 20%; background: url(images/grline.png) right top repeat-y, url(images/grlines-white.png) right top no-repeat; } 0

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	18.01.2016, 11:54	13
	Сообщение от temagraf А если у меня правая сторона (боковая) состоит из 2 элементов т.е. 2-х картинок. И как это Вам может помешать? Можно сделать блок с двойным фоном... Можно опять же спозиционировать картинки внутри блока... Сообщение от temagraf т.е. мне нужно так прописать в css стиле Вроде того... Для второго блока не обязательно использовать фиксированную позицию... Сейчас пример накидаю... 0

@temagraf 0 / 0 / 0 Регистрация: 03.04.2015 Сообщений: 15
	18.01.2016, 11:57 [ТС]	14
	т.е. мне нужно так прописать в css стиле #col1 { width: 10%; background: url(images/grdrop.png) top left repeat-y; position:relative; z-index:2; } #col2 { width: 70%; position: fixed; left: 0; top: 0; z-index:1 } #col3 { width: 20%; background: url(images/grline.png) right top repeat-y, url(images/grlines-white.png) right top no-repeat; position:relative; z-index:2; } 0

@temagraf 0 / 0 / 0 Регистрация: 03.04.2015 Сообщений: 15
	18.01.2016, 13:46 [ТС]	16
	Посмотрите правильно сделал? вроди все отображает единственно теперь нужно адаптировать под разрешения. 0

Spirt Tesla 16 / 16 / 3 Регистрация: 03.01.2015 Сообщений: 115
	18.01.2016, 14:18	17
	насколько я понимаю вам z-index не нужен совсем,просто вам надо спозиционировать блоки один за одним,что в принципе легко делается при помощи display:inline-block; задаете свои размеры,картинки кладете в боковые блоки,карту в центральный блок и все. 0

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	18.01.2016, 14:57	18
	Сообщение от Spirt Tesla насколько я понимаю вам z-index не нужен совсем,просто вам надо спозиционировать блоки один за одним,что в принципе легко делается при помощи display:inline-block Ну так наверстайте шаблон своим методом... 0

Spirt Tesla 16 / 16 / 3 Регистрация: 03.01.2015 Сообщений: 115
	18.01.2016, 15:04	19
	Да я же не говорю что ваш метод не работает)просто у меня голова думает не как у вас,и это вполне нормально-верно ведь?)Ваше решение тоже хорошее,я этого не отрицаю) 0

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	18.01.2016, 15:05	20
	Сообщение от Spirt Tesla Да я же не говорю что ваш метод не работает) Причём тут мой метод...? Предложите альтернативную вёрстку может она подойдёт лучше, чем мой вариант... Заодно тему прокачаем... 0