>
Категории вопросов
Задать вопрос +

Основное

Контент-модули

Продвижение сайта

Управление сайтом

Доп. модули

Вебмастеру

Похожие вопросы



Оформление боковых блоков - как убрать полоску которая задублировалась

голоса: 0

Добрый день!
Пробовала сделать так, чтобы при наведении курсора в блоке увеличивалась картинка. Пробовала как здесь https://www.ucoz.ru/qa/index.php/13538/как-сделать-что-наведении-картинку-курсора-увеличивалась?show=13538#q13538, но влезла, убрала в коде ссылку на сайт (ГИА) и прописала тег стиль, чтобы притенилмя только в блоке. В общем результат интересный, картинка здоровая, и исчезли блоки ниже. После восстановления нижний блок отображается с двойной полосой, и не могу восстановить "календарь" и "архив новостей"

Вопрос:

1 как сделать чтобы в блоке "Важные объявления!" увеличивалась картинка при наведении

2 как восстановить "календарь" и "архив новостей"

3 как убрать двойную полосу при отображении нижнего блока

на данный момент блоки оформлены по одному принципу:

<a href="https://orenschool33.ucoz.net/index/ehlektronnaja_biblioteka/0-32"><img src="https://orenschool33.ucoz.net/ehb_2_copy.jpg" style="max-width:100%;"></a>

Заранее спасибо!

Адрес сайта orenschool33.ucoz.net
| Автор: | Категория: Дизайн сайта
Изменение категории | | Автор: Yuri_Geruk

Ответов: 1

голоса: 0

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

| Автор:

Контейнер "Важные объяления!"

<a href="https://orenschool33.ucoz.net/shestiletki.jpg"><img src="https://orenschool33.ucoz.net/shestiletki.jpg" style="max-width:100%;"></a>
<a href="https://orenschool33.ucoz.net/28026618.png"><img src="https://orenschool33.ucoz.net/28026618.png" style="max-width:100%;"></a>

контейнер "Полезные ссылки"

<a href="https://orenschool33.ucoz.net/index/ehlektronnaja_biblioteka/0-32"><img src="https://orenschool33.ucoz.net/ehb_2_copy.jpg" style="max-width:100%;"></a>
<a href="http://edu.orb.ru/auth/login"><img src="https://orenschool33.ucoz.net/ehd_2_copy.jpg" style="max-width:100%;"></a>
<a href="https://orenschool33.ucoz.net/index/virtualnye-ehkskursii/0-52"><img src="https://orenschool33.ucoz.net/BildSite/veh_2.jpg" style="max-width:100%;"></a>

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

| Автор:
Анастасия Лошадурова,

Я просил код второго контейнера - http://orenschool33.ucoz.net/panel/?a=tmpl;m=1;t=DRIGHTER

| Автор:
Yuri_Geruk,

перешла по ссылке - вот результат

<!-- <block6852> -->
<div class="block">
<div class="block-title"><!-- <bt> -->Полезные ссылки<!-- </bt> --></div>
<div class="block-top"><div class="block-content"><!-- <bc> --><a href="https://orenschool33.ucoz.net/index/ehlektronnaja_biblioteka/0-32"><img src="https://orenschool33.ucoz.net/ehb_2_copy.jpg" style="max-width:100%;"></a>
<a href="http://edu.orb.ru/auth/login"><img src="https://orenschool33.ucoz.net/ehd_2_copy.jpg" style="max-width:100%;"></a>
<a href="https://orenschool33.ucoz.net/index/virtualnye-ehkskursii/0-52"><img src="https://orenschool33.ucoz.net/BildSite/veh_2.jpg" style="max-width:100%;"></a><!-- </bc> --></DIV>
<!-- </block6852> -->

<!-- <block3087> -->
<div class="block">
<div class="block-title"><!-- <bt> -->Важные объявления!<!-- </bt> --></div>
<div class="block-top"><div class="block-content"><!-- <bc> --><a href="https://orenschool33.ucoz.net/shestiletki.jpg"><img src="https://orenschool33.ucoz.net/shestiletki.jpg" style="max-width:100%;"></a>
<a href="https://orenschool33.ucoz.net/28026618.png"><img src="https://orenschool33.ucoz.net/28026618.png" style="max-width:100%;"></a><!-- </bc> --></DIV>
<!-- </block3087> -->
<style>
.picters img {width:200px;height:300px;}/*Фиксированный размер для изображения*/
.picters img:hover {width:350px;} /*Размер изображения при наведении*/
</style><!-- </bc> --></div></div>
</div>
<!-- </block3087> -->

| Автор:
Анастасия Лошадурова,

Замените ваш код выше на следующий:

<!-- <block6852> -->
<div class="block">
<div class="block-title"><!-- <bt> -->Полезные ссылки<!-- </bt> --></div>
<div class="block-top"><div class="block-content">
<!-- <bc> -->
<div class="picters"><a href="https://orenschool33.ucoz.net/index/ehlektronnaja_biblioteka/0-32"><img src="https://orenschool33.ucoz.net/ehb_2_copy.jpg" style="max-width:100%;"></a>
<a href="http://edu.orb.ru/auth/login"><img src="https://orenschool33.ucoz.net/ehd_2_copy.jpg" style="max-width:100%;"></a>
<a href="https://orenschool33.ucoz.net/index/virtualnye-ehkskursii/0-52"><img src="https://orenschool33.ucoz.net/BildSite/veh_2.jpg" style="max-width:100%;"></a>
</div>
<!-- </bc> --></div></div>
</div>
<!-- </block6852> -->

 

<!-- <block3087> -->
<div class="block">
<div class="block-title"><!-- <bt> -->Важные объявления!<!-- </bt> --></div>
<div class="block-top"><div class="block-content">
<!-- <bc> -->
<div class="picters"><a href="https://orenschool33.ucoz.net/shestiletki.jpg"><img src="https://orenschool33.ucoz.net/shestiletki.jpg" style="max-width:100%;"></a>
<a href="https://orenschool33.ucoz.net/28026618.png"><img src="https://orenschool33.ucoz.net/28026618.png" style="max-width:100%;"></a>
</div>
<style>
.picters img {width:200px;height:300px;}/*Фиксированный размер для изображения*/
.picters img:hover {width:350px;} /*Размер изображения при наведении*/
</style>
<!-- </bc> --></div></div>
</div>
<!-- </block3087> --

| Автор:
Yuri_Geruk,
Спасибо, двойная линия ушла, но при наведении картинка не увеличивается, только при нажатии открывается.
| Автор:
Анастасия Лошадурова,
Внес исправления в код выше, замените снова код текущий ваш на код что выше.
| Автор:
Yuri_Geruk,

Чуть поменяла параметры изображения, а то раятягивался. Нашла коды для увеличения по наведению, НО что еще бы дописать что бы смещение в центр экрана было, не видно половину сообщения. И Что сделать чт бы были разделены блоки. Вот "важные объявления!" нужно чтобы увеличивалиь и были первыми. А "Полезные ссылки" просто картинка-ссылка. Без увеличения и независима от первого блока.

Сейчас вид "Важные объявления" устраивают, кроме полускрытого изображения

<!-- <block3087> -->
<div class="block">
<div class="block-title"><!-- <bt> -->Важные объявления!<!-- </bt> --></div>
<div class="block-top"><div class="block-content">
<!-- <bc> -->
<div class="picters"><a href="https://orenschool33.ucoz.net/shestiletki.jpg"><img src="https://orenschool33.ucoz.net/shestiletki.jpg" style="max-width:100%;"></a>
<a href="https://orenschool33.ucoz.net/28026618.png"><img src="https://orenschool33.ucoz.net/28026618.png" style="max-width:100%;"></a>
</div>
<style>
.picters img {width:190px;height:142px;}/*Фиксированный размер для изображения*/
.picters img:hover {
background-color: #97CE68;
color: #000;
-webkit-transform: scale(3);
-moz-transform: scale(3);
-o-transform: scale(3);
} /*Размер изображения при наведении*/
</style>
<!-- </bc> --></div></div>
</div>
<!-- </block3087> --

<!-- <block6852> -->
<div class="block">
<div class="block-title"><!-- <bt> -->Полезные ссылки<!-- </bt> --></div>
<div class="block-top"><div class="block-content">
<!-- <bc> -->
<div class="picters"><a href="https://orenschool33.ucoz.net/index/ehlektronnaja_biblioteka/0-32"><img src="https://orenschool33.ucoz.net/ehb_2_copy.jpg" style="max-width:100%;"></a>
<a href="http://edu.orb.ru/auth/login"><img src="https://orenschool33.ucoz.net/ehd_2_copy.jpg" style="max-width:100%;"></a>
<a href="https://orenschool33.ucoz.net/index/virtualnye-ehkskursii/0-52"><img src="https://orenschool33.ucoz.net/BildSite/veh_2.jpg" style="max-width:100%;"></a>
</div>
<!-- </bc> --></div></div>
</div>
<!-- </block6852> -->

| Автор:
Анастасия Лошадурова,
Лучше вам эти стили для увеличения удалить и прописать уменьшенное фото, важно чтобы посетитель перешел на страницу по клику на фото, а не рассматривал фото при наведении. Никак не сделать то что вы хотите. Как написал выше, удаляйте эти стили и просто сделайте фото уменьшенными без эффектов наведения.
| Автор:
...