| |
|
|
| | Всем здравствуйте!
Пожалуйста помогите разобраться со слоями!
Задача:
наложить друг на друга 2 слоя
1 слой: картинка шириной 100% экрана и высотой большей чем высота слоя 2
2 слой: форма авторизации - 2-3 поля + кнопка, ширина и высота слоя меньше чем параметры слоя 1
а проблема такая: второй слой соответственно имеет некоторую высоту, и вот именно на это расстояние происходит отступ вниз после первого слоя, несмотря на то, что у него top=-200. Т.е. после этих слоев получается пробел, который соответсвенно мешает. Как можно избавиться от этого лишнего отступа? Быть может есть другой вариант решения этой задачи? (ниже приведен код, с помощью которого пытаюсь дотичь результата)
Заранее спасибо!
<head>
<title></title>
<link rel='stylesheet' type='text/css' href='lib/css.css'>
<meta name='keywords' content=''>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251'>
<meta http-equiv='expires' content='Tue, 20 October 2009 12:00:00 GMT'>
</head>
<body marginwidth='0' marginheight='0' leftmargin='0' topmargin='0'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td>
<div style='position:relative; z-index:1; float:left;'>
<img src='images/mustang.jpg' border='0' width='1280' height='390'>
</div>
<div style='position:relative; float:left; top:-200; left:5; width:90%; height:200; z-index:2;'>
<table border='0' cellpadding='0' cellspacing='0' width='200'>
<tr>
<td colspan='2' class='Авторизация'></td>
</tr>
<tr>
<td class='text11'>Mail</td>
<td><input type='text' name='mail' class='enter_grey_white_black_11' style='width:100;'></td>
</tr>
<tr>
<td class='text11'>Пароль</td>
<td><input type='password' name='password' class='enter_grey_white_black_11' style='width:100;'></td>
</tr>
<tr>
<td><input type='submit' value='Вход' class='button' style='width:40;height:16;'></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<table border='1' cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td>продолжение</td>
</tr>
</table></body>
|
| |
| |
|
|
| |
|
|
| |
для: andrey215
(16.02.2010 в 16:16)
| | | Смысл в том, что место под относительно-позиционированный элмемент все равно отводится. Зато внутри позиционированного элемента, относительно его границ, будет работать абсолютное позиционирование дочернего элемента.
А еще возьми мел и 100 раз напиши на доске: "Я обещаю всегда указывать единицы измерения в css". ))
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<title></title>
<link rel='stylesheet' type='text/css' href='lib/css.css'>
<meta name='keywords' content=''>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251'>
<meta http-equiv='expires' content='Tue, 20 October 2009 12:00:00 GMT'>
<style type='text/css'>
body {margin:0}
#pic img {
border:0;
width:100%;
height:390px;
}
#pic{
position:relative;
width:100%;
}
#formm{
position:absolute;
top:10%;
left:30%;
border:1px solid red;
background-color:red;
opacity:0.8;
}
</style>
</head>
<body>
<div id=pic>
<img src='mustang.jpg' alt=''>
<form id=formm action=''>
<table border='0' cellpadding='0' cellspacing='0' width='200'>
<tr>
<td colspan='2' class='Авторизация'></td>
</tr>
<tr>
<td class='text11'>Mail</td>
<td>
<input type='text' name='mail' class='enter_grey_white_black_11' style='width:100px;'>
</td>
</tr>
<tr>
<td class='text11'>Пароль</td>
<td>
<input type='password' name='password' class='enter_grey_white_black_11' style='width:100px;'>
</td>
</tr>
<tr>
<td>
<input type='submit' value='Вход' class='button' style='width:40px;height:40px;'>
</td>
</tr>
</table>
</form>
</div>
<table border='1' cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td>продолжение</td>
</tr>
</table>
</body>
|
| |
| |
|
|
| |
|
|
| |
для: DJ Paltus
(16.02.2010 в 16:51)
| | | спасибо огромное | |
| |
|
|
