Родились сегодня:
goldssky@yandex.ru


Лидеры рейтинга

ID: 226425

Konstantin Shvetski

Модератор

767

Россия, Северодвинск


ID: 259041

Алексеев Владимир Николаевич

Мастер-Эксперт

342

Россия, пос. Теплоозёрск, ЕАО


ID: 401284

Михаил Александров

Академик

278

Россия, Санкт-Петербург


ID: 325460

CradleA

Мастер-Эксперт

211

Беларусь, Минск


ID: 137394

Megaloman

Мастер-Эксперт

148

Беларусь, Гомель


ID: 400815

alexleonsm

6-й класс

130


ID: 400669

epimkin

Профессионал

120


8.8.15

09.05.2021

JS: 2.8.21
CSS: 4.5.5
jQuery: 3.6.0
DataForLocalStorage: 2021-05-14 03:16:12-standard


Установка, настройка и работа в программах графического дизайна Adobe Photoshop и CorelDRAW.

Администратор раздела: FOXhunter (Профессионал)

Консультация онлайн # 159631

Раздел: Графический дизайн
Автор вопроса: Slamjack
Дата: 04.02.2009, 20:28 Консультация закрыта
Поступило ответов: 0

У меня вопрос по HTML и CSS&
Вот сделал САЙТ.
Я любитель, обходился своими скудными знаниями.
Так вот -проблема в следующем: по задумке, почти на каждой странице есть центральный блок на фоне, а побокам небольшие изображения. Так вот, при уменьшении окна браузера, эти боковые изображения наезжают поверх главного содержимого, хотелось бы оставить их побокам, но запретить перекрывать основной блок. Как это сделать???
Боковые изображения position: absolute, как я понимаю - в этом проблема.

Попрошу показать на примере.

Вы можете посмотреть исходники, а для удобства я отдельно выношу проблемные части:

Основной блок, фон и наложенный сверху логотип, а также изображения ссылки:

Код
div#logo {position: absolute; width: 600px; height: 90px; top:180px;border:0;margin:-120px -300px 0;left:50%;}

<div id ="logo"><DIV style="border:0;"><p align = "center"><img src="Images/logo.png" width="600" height="90" border ="0" /></p></div></div>

<div style="margin-top:3% ;"> <p align = "center"><img src="Images/background_yooopee2.jpg" width="700" height="710" ></p>
</div></div>

<div id ="link1"><div style="border:0"><p align = "center"><a href="gallery_choice.html"><IMG src="Images/gallery_button_bw.png"  height="110" border="0" width="500" alt ="Галерея" onMouseOver="this.src = img['second'].src" onMouseOut="this.src = img['first'].src" /></a></a></p></div></div>

<div id ="link2"><div style="border:0"><p align = "center"><a href="author.html"><IMG src="Images/author_button_bw.png"  height="80" border="0" width="380" alt =" Автор" onMouseOver="this.src = img['second1'].src" onMouseOut="this.src = img['first1'].src" /></a></a></p></div></div>



CSS и слои боковых картинок
Код
body, html {width:100%; height:100%;}
   
   
div#left { position: absolute; width: 100px; height: 710px; top:100px; left: -1px;}
div#lefttop { position: absolute; width: 100px; height: 500px; top:0px; left: 50px;}

div#rightdown { position: absolute;width:190px; height: 400px; top:400px; right:45px;}


div#link1 {position: absolute; width: 500px; height: 110px; top:350px;border:0;margin:-120px -250px 0;left:50%;}	
div#link2 {position: absolute; width: 380px; height: 80px; top:600px;border:0;margin:-120px -200px 0;left:50%;}

<div id = "rightdown"><DIV style="border:0">
<img src="Images/aqua_group2.jpg">		
</DIV></div>



<div id= "lefttop"><DIV style=" border:0">
<img src="Images/aqua_group1.jpg">		
</DIV></DIV>

Ответов пока не поступило

Мини-форум консультации # 159631

Нет сообщений в мини-форуме

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

Лучшие эксперты раздела

Коцюрбенко Алексей Владимирович

Старший модератор

Рейтинг: 74

Лысков Игорь Витальевич

Мастер-Эксперт

Рейтинг: 0

FOXhunter

Профессионал

Рейтинг: 0

LfiN

Специалист

Рейтинг: 0

Сучкова Татьяна Михайловна

Мастер-Эксперт

Рейтинг: 0

Belotchik

Студент

Рейтинг: 0