Установка поля div для фона в белый цвет?

Я пытаюсь установить фон маленьких разделов в этом поле на белый.
Образ
На изображении над горизонтальным правилом написано «Тестовый элемент», а позади него есть небольшой белый фон. Я пытаюсь сделать фон выглядит так …
Образ

Это мой php файл.

<div class="containerwhite">
<div id="container" class="container">
<?php
$sql = "SELECT id, name, description, imgpath, price, sold FROM traceylynn";
$result = $db->query($sql);
$num = 0;
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
echo '<div id="item">';
echo '<div class="name">';
echo '<p>' .$row["name"].' </p>';
echo '</div>';
echo '<hr class="namehr">';

echo '<div class="price">';
echo '<p> $'.$row["price"].'</p>';
echo '<hr class="pricehr">';
echo '</div>';

echo '<div class="image">';
echo '<img alt="Cannot load image" src="'.$row["imgpath"].'"/>';
echo '</div>';

echo '<div class="button">';
if($row["sold"]==0){
echo '<button type="button" class="btn btn-success btn-lg" data-toggle="modal"data-target="#'.$row["id"].'"> More Info </button>';
}else{
echo '<button type="button" class="btn btn-success btn-lg disabled"> Sold! </button>';
}
echo '</div>';
echo '</div>';
}
}
?>
</div>
</div>

CSS

@font-face {
font-family: "BlendaScript";
src: url('../fonts/BlendaScript1.otf') format("opentype");
src: url('../fonts/BlendaScript2.woff') format("woff"), url('../fonts/BlendaScript3.ttf') format("TrueType"), url('../fonts/BlendaScript4.woff2') format("woff2");
}

@font-face {
font-family: Sugar;
src: url('../fonts/Sugar.ttf' format("truetype"));
}

body {
background-color: #EFC6D3;
}

.containerwhite {
background-color: white;
width: 100%;
height: auto;
margin-top: -15px;
}

.container {
margin-bottom: 20px !important;
}

.traceylynnheader {
padding-top: 20px;
font-size: 30px;
font-family: BlendaScript;
text-align: center;
color: #3D3028;
}

.traceylynnheader hr {
margin-top: -15px;
width: 80%;
border: none;
height: 1px;
color: #333;
/* old IE */
background-color: #333;
/* Modern Browsers */
}

#item {
border: 1px solid black;
padding-right: 30px;
padding-left: 30px;
margin-top: 50px;
margin-right: 20px;
width: 350px;
height: 400px;
float: left;
background-color: #d0e0aa;
margin-bottom: 20px;
}

#item>.name {
text-align: center;
color: black;
font-family: Sugar;
font-size: 20px;
padding-top: 10px;
color: #3D3028;
background-color: white;
}

#item>.name>.namewhite {
background-color: white;
}

#item>.namehr {
display: block;
height: 1px;
border: 0;
border-top: 2px solid #3D3028;
margin: 1em 0;
padding: 0;
}

#item>.price {
text-align: center;
color: green !important;
font-family: Sugar;
font-size: 20px;
}

#item>.price>.pricehr {
display: block;
height: 1px;
border: 0;
border-top: 2px solid #3D3028;
margin: 1em 0;
padding: 0;
}

.image {
width: 100%;
height: 150px;
position: relative;
display: inline-block;
overflow: hidden;
margin: 0;
}

.image img {
display: block;
position: absolute;
top: 50%;
left: 50%;
min-height: 100%;
min-width: 100%;
transform: translate(-50%, -50%);
}

.button {
text-align: center;
padding: 25px;
}

0

Решение

Это потому что вы использовали padding-left а также padding-right из 30pxв #item div, что очевидно, что вы хотите пространство слева и справа в #item ДИВ …

…так сделать #item > .name на полную ширину вы должны использовать отрицательное поле (то же значение, что и у родительского отступа) в .name лайк

#item > .name{
margin-left:-30px;
margin-right:-30px;
}

Кроме того, похоже, что вы запускаете цикл элементов, имеющих #item как id что означает, что у вас будет несколько id с тем же именем на одной странице, что не является хорошей практикой … использовать class вместо

0

Другие решения

Других решений пока нет …

По вопросам рекламы ammmcru@yandex.ru
Adblock
detector