Форум Сайтостроение Веб-строительство

Нужна помощь с вёрсткой

vlasoff
На сайте с 31.08.2007
Offline
101
vlasoff
499

Доброго всем времени суток,

есть кроссбраузерный код макета страницы с заданными ограничениями макс и минимальной ширины, а также с прижатым к низу экрана футером: 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="ru">

<head>

<title>Прижимаем футер к низу страницы</title>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Windows-1251">

<style>

	html, body {margin:0;padding:0;width:100%;height:100%;background: #646464;text-align:center; color:#646464}

    #container,#footer {min-width: 800px; max-width: 1000px; width:expression((document.documentElement.clientWidth||document.body.clientWidth)<800?'800px':(document.body.clientWidth > 1000? "1000px": "auto")); margin: 0 auto; text-align: left; background: white;}

#container p {padding:10px 0px; margin:0; text-align: justify;}

	html, body {margin:0;padding:0;width:100%;height:100%;}

    #container {position:relative; min-height:100%; color: #646464; text-align: justify;}

    #content .empty {height:100px; }

	#content { padding: 20px }

	* html #container {height:100%;}

	#footer {position:relative; margin-top:-100px; height:90px; background:#ffccff; border-top:10px solid #389DC3; color:#FFFFFF}

	#popup { position:absolute;left:50%;top:50%;width:600px;height:400px;margin-left:-300px;margin-top:-200px;background-color:#fff;border:solid 1px #999;margin-bottom:300px }

</style>

</head>

<body>

	<div id="container">

	<div id="content">

      <div id="popup" style="display:none">&nbsp;</div>

    	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>

        <p><a href="#" onclick="document.getElementById('popup').style.display = (document.getElementById('popup').style.display == 'none') ? 'block' : 'none';">Click Here</a></p>

        <div class="empty"></div>

	</div>

    </div>

	<div id="footer">footer text</div>

</body>

</html>

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

Не знает ли кто-нибудь как решить проблему ?

ПЗ
На сайте с 10.10.2006
Offline
92
Павел Зотов
#1

возможно, 

position:absolute; z-index:5;

поможет

Автомобили в России (http://www.autobb.ru/). Спецтехника BIZ - вся строительная, дорожная, коммунальная техника (http://www.spectehnika.biz/) и другая спецтехника в одном месте.
vlasoff
На сайте с 31.08.2007
Offline
101
vlasoff
#2
Павел Зотов:
возможно, 
position:absolute; z-index:5;

поможет

Забыл сказать, z-index не помогает в IE6, в Опере работает, в FF тоже... хочется кросс-браузерное решение

T.R.O.N
На сайте с 18.05.2004
Offline
314
T.R.O.N
#3
vlasoff:
Забыл сказать, z-index не помогает в IE6

С каких пор? поставьте не 5, а 1000 или 5000

От воздержания пока никто не умер. Хотя никто и не родился! Prototype.js был написан теми, кто не знает JavaScript, для тех, кто не знает JavaScript (Richard Cornford)
vlasoff
На сайте с 31.08.2007
Offline
101
vlasoff
#4
T.R.O.N:
С каких пор? поставьте не 5, а 1000 или 5000

попробовал 5000 - не помогает

T.R.O.N
На сайте с 18.05.2004
Offline
314
T.R.O.N
#5
vlasoff:
попробовал 5000 - не помогае

чудес не бывает

a.fatman
На сайте с 15.01.2006
Offline
127
a.fatman
#6

Попап-окно -- это div c id="popup"? Называйте вещи своими именами.

Попробуйте в коде поставить его ниже #footer.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий