Jump to content
  • 0

положение слоя в ячейке таблици


Kat
 Share

Question

не от экрана

Пусть имеется таблица, 2*2., последняя ячейка голубая. И в нее надо поместить div красного цвета. Делаю эту ячейку блоком relative, помещяю в нее div. При этом IE правильно понимает, что отмерять положени дива надо от ячейки, а не от границы брауза.

Как заствить понять тоже самое Opera и FireFox?

<html>
<head>
<style type="text/css">
<!--
html, body {
margin:0;
padding:0;
width:100%;
height:100%;

}
#card1 {
background-color: red;
height: 30%;
width: 20%;
border:5px;
border-color :#336633;
left:0%;
top:0%;
position: absolute;
border-style: solid;
}


</style>
<head>
<body>

<table width="80%" height="100%" border="1" style="position:relative; ">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td style="position:relative; background-color:#00FFCC "> <p style="position:absolute; left:0; top:0; ">
<div id="card1" >card1Here</div> </p>
</td>
</tr>
</table>

Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 0

Теперь я так понимаю, если вверху отсуп X, а внизу - Y, то получатся что они не обязательно должны бать ровны?)

Давненько надо было показать задуму, так проще предложить отличный вариант)

Сейчас придумаю что-нибудь..

Link to comment
Share on other sites

  • 0

Синий блок по ширине - 80% от ширины экрана

По высоте синий блок= высота экрана -X-Y

На сером фоне будет логотип слева вверху и картинка справа вверху (как нарисовано), но расположение картинок привязано к синему блоку

DOCTYPE - не важно какой, наверно.

Link to comment
Share on other sites

  • 0

Привет!

Ну вот я по размыслел, этот вариант полностью на дивах, можешь проверить, он и 800_600 показывает нормально, расчитан на 1024_768, и выше (при 1280_1024 рстягивается остаточно нормано, хотя во весь экран мало кто открывает, ведь такое разрешения делают, чтоб можно было несколько окон просматривать одновременно), просто нужно подкоректировать), и грамотно сделать фон! HTML код, валиден, CSS еще не проверял!

Правда не большая проблема, с самым нижнем (левым, без фона блоком)!

Можно тыкать по окошкам, они будут перекрывать друг друга! (те что на красном фоне!), пожеланию можно ко всем добавить))

вот:

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

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
html, body {
margin: 0px;
padding: 0px;
border: none;
background: #fff;}

#list {
width: 70%;
height: 400px;
margin: 100px auto auto auto;
padding: 0px;
border: none;
background: red;}

.listik {
width: 150px;
height: 130px;
margin: 0px;
padding: 0px;
border: solid 1px red;
position: absolute;}

.listik h3 {
width: auto;
height: auto;
margin: 0px;
padding: 3px 4px;
border: none;
background: #6c9;}


#l1 {background: #ff7; left: 18%; top: 24%; z-index: 1;}
#l2 {background: #ff6; left: 21%; top: 29%; z-index: 2;}
#l3 {background: #ff5; left: 24%; top: 34%; z-index: 3;}
#l4 {background: #ff4; left: 27%; top: 39%; z-index: 4;}
#l5 {background: #ff3; left: 30%; top: 44%; z-index: 5;}
#l6 {background: #ff2; left: 33%; top: 49%; z-index: 6;}
#l7 {background: #ff1; left: 36%; top: 54%; z-index: 7;}

#listok {
width: 200px;
height: 100px;
margin: 35px 3% auto 10px;
padding: 0px;
border: solid 1px red;
background: #ff6;
float: right;}

#listok1 {
width: 200px;
height: 150px;
margin: auto;
padding: 0px;
border: solid 1px red;
background: #ff1;
position: absolute;
top: 37%;
left: 70%;}

.smail_list {
width: 100px;
height: 90px;
margin: auto;
padding: 0px;
border: solid 1px red;
background: #ff1;
position: absolute;}

#smail_l1 {top: 20%; left: 2%;}
#smail_l2 {top: 40%; left: 2%;}
#smail_l3 {top: 60%; left: 2%;}

#kalkul {
width: 200px;
height: 150px;
margin: 0;
padding: 0px;
border: solid 1px green;
position: absolute;
left: 10%;
bottom: 0;}

#navigator {
width: auto;
height: auto;
margin: auto;
padding: 0px;
border: solid 1px red;
background: green;
float: left;
position: absolute;
top: 1%;
left: 58%;}

#nav {
width: auto;
height: auto;
margin: 90px 0px 0px 0px;
padding: 0px;
border: none;
background: #ff3;
float: left;}

#nav a {
width: auto;
height: auto;
margin: 0px;
padding: 4px 20px;
border: none;
background: #f89;
display: block;
float: left;}

#nav a:link {color: red; text-decoration: none;}
#nav a:visited {color: red; text-decoration: none;}
#nav a:hover {color: #fff; text-decoration: none; background: red;}
--></style>

<script type="text/javascript">
<!--
var zIndex = 100;
function up(what){
zIndex++;
what.style.zIndex = zIndex;
}
//-->
</script>

</head>

<body>
<div id="list">
<div id="listok"></div>
<div id="listok1"></div>
<div class="listik" id="l1" onclick="up(this)"><h3>Zagolovok</h3></div>
<div class="listik" id="l2" onclick="up(this)"><h3>Zagolovok</h3></div>
<div class="listik" id="l3" onclick="up(this)"><h3>Zagolovok</h3></div>
<div class="listik" id="l4" onclick="up(this)"><h3>Zagolovok</h3></div>
<div class="listik" id="l5" onclick="up(this)"><h3>Zagolovok</h3></div>
<div class="listik" id="l6" onclick="up(this)"><h3>Zagolovok</h3></div>
<div class="listik" id="l7" onclick="up(this)"><h3>Zagolovok</h3></div>
</div>
<div class="smail_list" id="smail_l1"></div>
<div class="smail_list" id="smail_l2"></div>
<div class="smail_list" id="smail_l3"></div>

<div id="navigator">
<div id="nav">
<a href="">menu</a>
<a href="">menu</a>
<a href="">menu</a>
</div>
</div>

<div id="kalkul"></div>

</body>
</html>

Я думаю этот вариант самое-то (учитывая дизайн), высоту (красной ячейки) можно поставить и в процентах, но тогда переделывать придется DOCTYPE, но тогда код станет не валиден!

Link to comment
Share on other sites

  • 0

Забыл... добывь в свойства:

.listik {

width: 150px;

height: 130px;

margin: 0px;

padding: 0px;

border: solid 1px red;

position: absolute;

cursor: hand;}

Кстати я не помню "hand" помоему устарел, место него лучше использовать "pointer"!

Но в любом случае, так и так работает!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy