не правильно работают слои

kent666 · May 11, 2011

Помогите пожалуйста. Мучаюсь со слоями. У меня есть html

<!-- ./skins/tpl/catalogue/unit.tpl begin -->
<link type="text/css" rel="stylesheet" href="style.css" /> 
<div id="unit">
    <div id="unit_pic">    
    </div>  
    <div id="unit_name">
    123
    </div> 
    <div id="unit_description">
    dfhxnj fkj fykfgj dtjegzdgsd sg sdg hs f hry wdsrh erhv
    </div>
    <div id="unit_cost">
    cost
    </div>
</div>

<!-- ./skins/tpl/catalogue/unit.tpl end -->

И есть CSS

#unit {
	height: 100px;
	width: 500px;
	border:1px solid;
	background-color: #FFCC99;
}
#unit_pic {
    height: 94px;
    width: 94px;
    margin: 2px;
    background-color: #FFFFFF;
    border:1px solid;
}
#unit_name {
	position: relative;
    font-size: 24px;
	left: 101px;
	top: 2px;
	width: 393px;
	font-weight: bold;
    border:1px solid;
}
#unit_description {
	position: relative;
    font-size: 15px;
	left: 101px;
	top: 33px;
	width: 393px;
    border:1px solid;
    height: 40px;    
}
#unit_cost {
    position: relative;
    font-size: 16px;
	left: 101px;
	top: 77px;
	width: 393px;
	font-weight: bold;
    border:1px solid;
}

По идее у меня каждый элемент в родительском теге должен позиционироваться относительно родительского тега!!! position: relative;

А они почему-то вылазят за рамки!!!! Помогите!!!!

Softlink · May 11, 2011

в родительском диве высоту-то больше сделайте

buddah · May 11, 2011

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />

  <style type="text/css">

#unit {

        width: 500px;
        border:1px solid red;
        background-color: #FFCC99;

}
#unit_pic {
    height: 94px;
    width: 94px;
    margin: 2px;
    background-color: #FFFFFF;
    border:1px solid;

}
#unit_name {

    font-size: 24px;
        left: 101px;
        top: 2px;
        width: 393px;
        font-weight: bold;
    border:1px solid;

}
#unit_description {

    font-size: 15px;
        left: 101px;
        top: 33px;
        width: 393px;
    border:1px solid;
    height: 40px; 

}
#unit_cost {

    font-size: 16px;
        left: 101px;
        top: 77px;
        width: 393px;
        font-weight: bold;
    border:1px solid;

}

</style>
 </head> 
 <body>

<div id="unit">
    <div id="unit_pic">    
    </div>  
    <div id="unit_name">
    123
    </div> 
    <div id="unit_description">
    dfhxnj fkj fykfgj dtjegzdgsd sg sdg hs f hry wdsrh erhv
    </div>
    <div id="unit_cost">
    cost
    </div>
</div>
 </body>
 </html>

Поработайте над отступами и разметкой, ваш код читать трудно. Я оставил ваши отступы, потренеруйтесь в чтении

В родительском высоту убрать, позиции убрать.

Edited May 11, 2011 by buddah

kent666 · May 11, 2011

Чего!?? У меня #unit_name как раз высотой в родительский тег помещается

Softlink · May 11, 2011

Чего!?? У меня #unit_name как раз высотой в родительский тег помещается

вам же надо чтобы все помещалось в нем, правильно?

Поработайте над отступами и разметкой, ваш код читать трудно. Я оставил ваши отступы, потренеруйтесь в чтении
В родительском высоту убрать, позиции убрать.

так, а смысл от оставшихся top и left? Они же без position не работают.

kent666 · May 11, 2011

Я наверное не правильно описал желаемый для меня результат! Мне надо что то на подобии этого

Softlink · May 11, 2011

Я наверное не правильно описал желаемый для меня результат! Мне надо что то на подобии этого

так?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru-ru" lang="ru-ru"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251" />
</head>
<style>
#unit {
        width: 500px;
		height:100%;
        border:1px solid;
        background-color: #FFCC99;
		overflow:hidden;
}
#unit_pic {
	float:left;
    height: 94px;
    width: 94px;
    margin: 0px;
    background-color: #FFFFFF;
    border:1px solid;
}
#unit_name {
        float:right;
    font-size: 24px;
        width: 393px;
        font-weight: bold;
		margin:3px;
    border:1px solid;
}
#unit_description {
        float:right;
    font-size: 15px;
        width: 393px;
    border:1px solid;
	margin:3px;
    height: 40px;    
}
#unit_cost {
    float:right;
    font-size: 16px;
        width: 393px;
        font-weight: bold;
    border:1px solid;
	margin:3px;
}
</style>

	<body>
		<div id="unit">
			<div id="unit_pic"></div>  
			<div id="unit_name">123</div> 
			<div id="unit_description">dfhxnj fkj fykfgj dtjegzdgsd sg sdg hs f hry wdsrh erhv</div>
			<div id="unit_cost">cost</div>
		</div>
   </body> 
</html>

Edited May 11, 2011 by Softlink

kent666 · May 11, 2011

В принципе да. А можно это сделать без margin:

Softlink · May 11, 2011

В принципе да. А можно это сделать без margin:

ну вам же отступы нужны между пунктами? Можно конечно и position повычислять. Но если блоки будут тянуться, то все пойдет насмарку.

kent666 · May 11, 2011

Понял. Спасибо)))

Sign In

не правильно работают слои

Question

kent666

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

Softlink

Link to comment

Share on other sites

buddah

Link to comment

Share on other sites

kent666

Link to comment

Share on other sites

Softlink

Link to comment

Share on other sites

kent666

Link to comment

Share on other sites

Softlink

Link to comment

Share on other sites

kent666

Link to comment

Share on other sites

Softlink

Link to comment

Share on other sites

kent666

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information