LINUX.ORG.RU

Вопрос по CSS


0

1

Я хочу сделать рамку для страницы, но при добавлении левой и правой рамки для блока #middle, он начинает выпирать вправо, как раз на толщину рамки.Как бы избавиться от такого еффекта?


Вот css:

#wrapper {
   width: 900px;   
   min-width: 768px;
   max-width: 1024px;
   margin: 0 auto;
   
}

/* Header
----------------------------------------------------------------------*/
#header {
padding-top:40px;   
border:2px solid #000000;
border-bottom:0px;
background-color: #B4B5B4;
height: 150px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-topleft: 40px;
-moz-border-radius-topright: 40px;
-moz-border-radius-bottomleft: 0px;

}

/* Middle
-----------------------------------------------------------------------------*/
#middle {
   width: 100%;
   position: relative;
   border-right:2px solid #000000;
background-color: #B4B5B4;
}
#middle:after {
   content: '.';
   display: block;
   clear: both;
   visibility: hidden;
   height: 0;
   background-color: #B4B5B4;

}
#container {
   width: 100%;
   float: left;
   overflow: hidden;
   background: #B5E3FF;
   
}
#content {
   padding: 20px 20px 20px 270px;
   
}

/* Sidebar Left
-----------------------------------------------------------------------------*/
#sideLeft {
   float: left;
   width: 150px;
   margin-left: -100%;
   position: relative;
   background: #f5f5F5;
   padding:20px;
   
}


/* Footer
-----------------------------------------------------------------------------*/
#footer {
   height: 50px;
   padding:30px;
background-color: #B4B5B4;
-moz-border-radius-bottomright: 40px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomleft: 40px;
border:2px solid #000000;
border-top:0px;

}

А вот HTML:

<div id=«wrapper»>

   <div id=«header»>
   </div>

   <div id=«middle»>

      <div id=«container»>
         <div id=«content»>
         </div>
      </div>

      <div id=«sideLeft»>   
      </div>

   </div>

   <div id=«footer»>
   </div>

</div>







>#middle {

width: 100%;


Не нужно. И добавь обычный border-radius, на свете не только Firefox в живых остался.

Deleted ()
Ответ на: комментарий от geekless

Это не смешно, малыш. Несмотря на то, что box-sizing это очень интересно и хорошо, но есть куда более простое решение в данном случае. См. выше.

Deleted ()
Ответ на: комментарий от Deleted

Костыль, который придумали, чтобы можно было делать «как в старом IE», не поддерживается в одном из «новых» IE. Нет, это очень смешно. MS как обычно на высоте, лол.

geekless ★★ ()
Ответ на: комментарий от geekless

Это не новый IE. В новом как раз был -ms-box-sizing, это ж MS — все новинки в продуктах уже через 10 лет от их появления :)

Deleted ()
Ответ на: комментарий от doomgl

Вообще-то актуальная версия оперы — 11.51, а бордер-радиус там поддерживается с хз какой версии. Вот чего в «любимой» опере нет — так это стилизации плейсхолдера, например, драгндропа, сокетов, свг прямо в хтмл, вебгл… Багов зато навалом.

В 11.50 драгонфлай на маке поломали, идиоты, до сих пор не исправлено.

Apple-ch ★★ ()
Ответ на: комментарий от Deleted

Ах да, сокеты там есть, просто выключены :}

Deleted ()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.