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

Kat · June 23, 2007

не от экрана

Пусть имеется таблица, 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>

Kat · June 23, 2007

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

Или хотя бы скажите, что брать за таблицу, а что за див

ARA · June 23, 2007

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

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

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

Kat · June 23, 2007

нет конечно, не обязательно.

X, Y - разной высоты, заданы в px

ARA · June 23, 2007

Скажи мне на сером фоне, что будет, какая-то картинка?

Синий блок по ширине фиксированый, и по высоте?

И еще, тебе какой DOCTYPE важен? или не важно какой?

Kat · June 23, 2007

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

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

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

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

ARA · June 25, 2007

Привет!

Ну вот я по размыслел, этот вариант полностью на дивах, можешь проверить, он и 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, но тогда код станет не валиден!

Kat · June 27, 2007

ARA, спасибо, ты мне очень помог.

И спасибо за идею с окошками появляющимися.

ARA · June 27, 2007

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

.listik {

width: 150px;

height: 130px;

margin: 0px;

padding: 0px;

border: solid 1px red;

position: absolute;

cursor: hand;}

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

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

Sign In

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

Question

Kat

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

Kat

Link to comment

Share on other sites

ARA

Link to comment

Share on other sites

Kat

Link to comment

Share on other sites

ARA

Link to comment

Share on other sites

Kat

Link to comment

Share on other sites

ARA

Link to comment

Share on other sites

Kat

Link to comment

Share on other sites

ARA

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information