Как отодвинуть div от div'a ?

Zerro76 · March 3, 2012

Есть


@charset "utf-8";
/* CSS Document */

.header {
    background: #000;
    width:1100px;
    height:150px;
    margin:auto;
    border:0px solid #000;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    z-index:2;
}

.headeron {
    border:0px solid #000;
    background-color:#FFF;
    width:1080;
    height:100px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    z-index:5000;
}?

И


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Site</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body style="background: #933;padding:0;margin:0;height:100%;">
 <div class="header">
  <div class="headeron">
  </div>
 </div>
</body>
</html>

Нужно class .headeron сдвинуть сверху на 10px ,если добавить margin-top:10px к диву headeron , то сдвигается и .header .Мне нужно , чтобы header стоял на месте , по центру ,а headeron сдвигался .Пробовал добавить display:inline-block , но как мне тогда отцентрировать .header , т.к. он прижимается к левому краю ?

P.S. С margin-top:10px

С inline-block

Edited March 3, 2012 by Zerro76

Switch74 · March 3, 2012

.header padding-top:10px

alexandr_v-vich · March 3, 2012

Switch74, padding слишком частно решает проблему, для каждого дочернего элемента отдельный padding не проставить...

Zerro76, Ставьте для header не нулевой border, а какой-нибудь минимальный, главное, чтобы был.


    border: 1px solid transparent;
    border: 1px solid rgba(0, 0, 0, 0);
// ну или в тот же цвет
    border: 1px solid #000; 
    border: 1px solid #fff;

http://jsfiddle.net/xQa3q/18/

Edited March 3, 2012 by alexandr_v-vich

Switch74 · March 3, 2012

Switch74, padding слишком частно решает проблему, для каждого дочернего элемента отдельный padding не проставить...

а вы видите другие элементы в .header? Оо

у вашей реализации тоже есть минус - увеличение высоты блока на 1px минимум, иногда это критично, но вообще ваш способ действенный в том случае который вы описали

alexandr_v-vich · March 3, 2012

увеличение высоты блока на 1px минимум, иногда это критично

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

border-top: 1px solid transparent;

Тоже не всегда супер, но уже не так критично..А вообще, согласен конечно, от ситуации смотреть

Edited March 3, 2012 by alexandr_v-vich

Zerro76 · March 3, 2012

Всем спасибо за ответы ) .Все получилось :yahoo:

Sign In

Как отодвинуть div от div'a ?

Question

Zerro76

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

Switch74

Link to comment

Share on other sites

alexandr_v-vich

Link to comment

Share on other sites

Switch74

Link to comment

Share on other sites

alexandr_v-vich

Link to comment

Share on other sites

Zerro76

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information