Главная Вход в систему Регистрация
Задать вопрос Консультации Пользователи Форум
О системе Помощь
Задать вопрос экспертам
Консультация № 159631
04.02.2009, 20:28
0.00 руб.
0 0 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>

Обсуждение

Форма ответа