Jump to content
  • 0

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

kent666

Asked by kent666,

 Share

Question

kent666 Explorer

kent666

Posted
Posted

Помогите пожалуйста. Мучаюсь со слоями. У меня есть 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;

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

Link to comment
Share on other sites

9 answers to this question

Recommended Posts

  • 0
buddah Explorer

buddah

Posted
Posted (edited) 

<!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 by buddah
Link to comment
Share on other sites
  • 0
Softlink Explorer

Softlink

Posted
Posted

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

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

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

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

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

Link to comment
Share on other sites
  • 0
Softlink Explorer

Softlink

Posted
Posted (edited)

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

2602010.jpg

так?

<!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 by Softlink
Link to comment
Share on other sites
  • 0
Softlink Explorer

Softlink

Posted
Posted

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

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

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
Go to question listing
×
×
  • 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

  I accept