Создать кнопку поверх двух контейнеров div

Я создаю страничную веб-страницу, где цвет фона этого раздела является градиентом, установленным через CSS. Я создал серый цвет div для нижней части этого раздела, но то, с чем я борюсь, состоит в том, чтобы поместить 3 кнопки, чтобы наложить на серый и оранжевый. Как это делается?Создать кнопку поверх двух контейнеров div

Также можно сделать серое полотно внизу, не являясь нижним колонтитулом страницы? Я только хочу, чтобы это было видно для этого раздела, но не для остальных.

Предварительный просмотр того, что я хотел бы, чтобы это выглядело, как здесь:

источник

2015-08-14 Anu_5512

И, Вы отправляете ни один код. – nelek

И где ваш код? – user5173426

Добро пожаловать в [stackoverflow] (http://stackoverflow.com/tour), пожалуйста, поделитесь тем, что вы пробовали. то, если вы застряли с какой-то точной проблемой, мы поможем вам. Перейдите по этим ссылкам, чтобы задать правильные вопросы (http://stackoverflow.com/help/how-to-ask), (http://stackoverflow.com//help/mcve) и (http://sscce.org) – Panther

Похоже, что различные цвета фона не должны быть размещены в различных дивы, а вместе взятые в качестве фона одного DIV , Таким образом, вы можете использовать padding, чтобы поместить кнопки на подходящее расстояние от верхнего/нижнего и сделать их перекрывать фон в нужном месте.

пример:

<html> 
 

 
    <head> 
 
     <style type="text/css"> 
 
     .css3gradient { 
 
      width: 300px; 
 
      height: 100px; 
 
      background-color: #FFA500; 
 
      filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#FFA500, endColorstr=#000000); 
 
      background-image: -moz-linear-gradient(top, #FFA500 0%, #000000 100%); 
 
      background-image: -webkit-linear-gradient(top, #FFA500 0%, #000000 100%); 
 
      background-image: -ms-linear-gradient(top, #FFA500 0%, #000000 100%); 
 
      background-image: linear-gradient(top, #FFA500 0%, #000000 100%); 
 
      background-image: -o-linear-gradient(top, #FFA500 0%, #000000 100%); 
 
      background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0%, #FFA500), color-stop(100%, #000000)); 
 
     } 
 
     .overlap 
 
     { 
 
      color:White; 
 
      padding-top:40px; 
 
\t  padding-bottom:30px; 
 
\t  padding-left:10px; 
 
\t  padding-right:10px; 
 
     } 
 
\t  h1 
 
\t  { 
 
\t  font-size:180%; /* adding it to demonstrate how you can overlap the middle, this looks well with the current height & width */ 
 
\t  } 
 
     </style> 
 
    </head> 
 

 
    <body> 
 
     <div class="css3gradient"><b><h1 class="overlap">Here is the result</h1></b> 
 
     </div> 
 
    </body> 
 

 
    </html>

источник

2015-08-14 09:51:55

Используя один div для контейнера, два внутренней divs для верхней и нижней (оранжевый и серый цвета) и, наконец, один table, расположенный совсем в контейнере div как кнопки могут быть одинаково центрированы внутри контейнера.

.cnt 
 
{ 
 
    position:relative; 
 
    width:100%; 
 
    box-sizing:border-box; 
 
    display:block; 
 
    height:250px; 
 
} 
 
.div1 
 
{ 
 
    width:100%; 
 
    height:50%; 
 
    background-color:orange; 
 
    display:block; 
 
} 
 
.div2 
 
{ 
 
    position:relative; 
 
    width:100%; 
 
    height:50%; 
 
    background-color:gray; 
 
    display:block; 
 
} 
 
.divC 
 
{ 
 
    position:absolute; 
 
    top:0;left:0;width:100%;height:100%; 
 
    background-color:transparent; 
 
} 
 
.divC td {text-align:center;vertical-align:middle;} 
 

 
.btn 
 
{ 
 
    height:150px; 
 
    width:150px; 
 
    border-radius:75px; 
 
    background-color:red; 
 
    display:inline-block; 
 
    border:solid 1px red; 
 
    cursor:pointer; 
 
}

<div class="cnt"> 
 
    <div class="div1"></div> 
 
    <div class="div2"></div> 
 
    <table cellpadding="0" cellspacing="0" class="divC"> 
 
     <tr> 
 
      <td><input type="button" class="btn" value="Button1"></td> 
 
      <td><input type="button" class="btn" value="Button2"></td> 
 
      <td><input type="button" class="btn" value="Button3"></td> 
 
     </tr> 
 
    </table> 
 
</div>

Изменение height контейнера и buttons размер (width и height, и 1/2 из них для border-radius получить кнопку с кружком).

Обновление:

Существует fiddle пример с использованием только один div (окрашенный оранжевый и серый, без градиента) и один table для buttons. Просто небольшие изменения для того же результата.

источник

2015-08-14 10:14:48 nelek

Вам не нужно 2 divs, вы можете применить несколько цветов к одному div, используя линейный градиент.

\t \t div{ 
 
\t \t \t height: 160px; 
 
\t \t \t text-align: center; 
 
\t \t \t line-height: 160px; 
 
\t \t \t background-image: linear-gradient(orange 50%, gray 50%); 
 
\t \t } 
 
\t \t button{ 
 
\t \t \t border-radius: 80px; 
 
\t \t \t height: 150px; 
 
\t \t \t width: 150px; 
 
\t \t \t margin-right: 5%; 
 
\t \t \t border: none; 
 
\t \t \t box-shadow: inset 0 0 10px 1px black; 
 
\t \t } 
 
\t \t div button:last-child{ 
 
\t \t \t margin-right: 0; 
 
\t \t }

\t <div> 
 
\t \t <button>Button 1</button> 
 
\t \t <button>Button 2</button> 
 
\t \t <button>Button 3</button> 
 
\t </div>

источник

2015-08-14 10:39:25 Muhammad

Создать кнопку поверх двух контейнеров div

ответ

Смежные вопросы