Позиционирование в css3
Здравствуйте.Пытаюсь создать страницу для сайта.Пока только удалось создать два объекта с закругленныли углами один внутри другого.Как внутренние двигать,конкретно ни где не прочитал.Вот код
<style type="text/css">
div {
margin: 0 auto;
}
.bord
{
background: #EBECDF;
width:90%;
height:90%;
border:2px solid #B0B384;
border-radius:30px;
-webkit-border-radius:30px;
-moz-border-radius:30px;
}
.mord
{
background: #EBECDF;
width:600px;
height:400px;
border:2px solid #B0B384;
border-radius:30px;
-webkit-border-radius:30px;
-moz-border-radius:30px;
}
</style>
<div class="bord">
<div class="mord">
</div>
</div>
рисунок [IMG]<a href="http://smages.com/?v=image2ulu.jpg"><img src="http://smages.com/thumbs/image2ulu.jpg" border="0"></a>[/IMG] |
А теперь внимание вопрос! :) ?
|
Как передвинуть внутренний объект к левому краю?
|
.mord
{
background: #EBECDF;
width:600px;
height:400px;
border:2px solid #B0B384;
border-radius:30px;
-webkit-border-radius:30px;
-moz-border-radius:30px;
float:left;
}
|
Получилось.
<style type="text/css">
.bord
{
margin: 0 auto;
background: #EBECDF;
width:90%;
height:90%;
border:2px solid #B0B384;
border-radius:20px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
}
.mord
{
position:relative; /* относительное */
top:8px;
left: 10px; /* Положение от правого края */
background: #EBECDF;
width:240px;
height:30px;
border:2px solid #B0B384;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}
.maxc
{
position:relative; /* относительное */
top:18px;
left:-3px; /* Положение от правого края */
background: #EBECDF;
width:240px;
height:200px;
border:2px solid #B0B384;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}
</style>
<div class="bord">
<div class="mord">
второй
<div class="maxc">
третий
</div>
</div>
</div>
работает во всех браузерах кроме IE7 как это исправить? |
zoom:1скорее всего, гуглить HasLayout Или вы про уголки закругленные? |
про уголки закругленные
|
|
| Часовой пояс GMT +3, время: 13:11. |