Нужна помощь по дизайну

DarksLight2

Знаток
⚖️
📜
  • Золотая медаль
Здравствуйте, нужна помощь.
Безымянный.png

С левой стороны, в низу не хватает куска картинки

HTML:
        <div class="block-grey-top">
            <div class="block-red-left"><div class="block-red-right"><div class="block-red-center">dfas</div></div></div>
            <div class="block-grey-center">
                fdsf
                <br>
                ads
            </div>
            <div class="block-grey-bottom"></div>
        </div>
CSS:
.block-grey-top
{
    padding: 5px;
    margin-left: 50px;
    background-image: url("/images/block-grey-top.png");
    background-repeat: no-repeat;
    height: 100px;
    width: 181px;
}
.block-grey-center
{
    background-image: url("/images/block-grey-center.png");
    background-repeat: repeat-y;
    margin-left: -5px;
    margin-top: 1px;
    padding-left: 10px;
}
.block-grey-bottom
{
    background-image: url("/images/block-grey-bottom.png");
    background-repeat: no-repeat;
    background-position: 100% 100%;
    height: 12px;
    margin-right: 5px;
}
.block-red-left
{
   
    background-image: url("/images/block-red-left.png");
    background-repeat: no-repeat;
}
.block-red-center
{
   
    background-image: url("/images/block-red-center.png");
    background-repeat: repeat-x;
    height: 45px;
    margin-left: 5px;
    margin-right: 5px;
}
.block-red-right
{
   
    background-image: url("/images/block-red-right.png");
    background-repeat: no-repeat;
    background-position: 100% 0;
    margin-right: 10px;
}
В чем дело?

PS. За код не судите строго, из меня плохой верстальщик)
 

Insallah

Раздолбай
📜
💎
  • Золотая медаль
Картинка маленькая. Чёрное на чёрном. Непонятно что у тебя сломалось.
Вот, йа покрасиль: Edit fiddle - JSFiddle
Расскажи на пальцах что не так.
 
Последнее редактирование:

DarksLight2

Знаток
⚖️
📜
  • Золотая медаль

Insallah

Раздолбай
📜
💎
  • Золотая медаль
я почему jsfiddle дал. потому что в нём я не вижу твоего бага.
 

Bayer

Специалист
⚖️
🏆
📜
💎
  • Надмозг
Возьми картинку справа и отрази влево
 

Insallah

Раздолбай
📜
💎
  • Золотая медаль
А в идеале, откажись от картинок вообще.
HTML:
<div class=container>
    <div class=header>Меню сайта</div>
    <div class=content>Самые разные штуки.</div>
</div>
CSS:
* {
  color: whitesmoke;
  font-family: Consolas, sans-serif;
}
div.header {
    background: linear-gradient(darkred, black);
    padding: 5px;
    text-align: center;
    border-bottom: 1px solid #f33;
}

div.container {
  width: 250px;
  border: 1px solid #666;
  border-radius: 5px;
}

div.content {
  background: #333;
  padding: 5px;
}
1565173510231.png

 

DarksLight2

Знаток
⚖️
📜
  • Золотая медаль
А в идеале, откажись от картинок вообще.
HTML:
<div class=container>
    <div class=header>Меню сайта</div>
    <div class=content>Самые разные штуки.</div>
</div>
CSS:
* {
  color: whitesmoke;
  font-family: Consolas, sans-serif;
}
div.header {
    background: linear-gradient(darkred, black);
    padding: 5px;
    text-align: center;
    border-bottom: 1px solid #f33;
}

div.container {
  width: 250px;
  border: 1px solid #666;
  border-radius: 5px;
}

div.content {
  background: #333;
  padding: 5px;
}
Посмотреть вложение 2183

Ну можно и так, спасибо)
 
Внимание! Эта тема устарела на 128 дней.
Тут обсуждать нечего, лучше создай новую тему. Конечно, если очень-очень нужно (например хочешь ответить на древний вопрос), то отвечай. Но помни: некропост — зло, а модератор не дремлет!
Сверху