Как правильно создать большой баннер во всю ширину сайта?

Question

[Ihorets]

Здравствуйте. Только начал изучать HTML и столкнулся с проблемой, прописал код для будущего баннера в нотпаде и при просмотре готового файла через браузер все окей.

Но, когда пытаюсь добавить его на сайт, то получается следующее:

Помогите пожалуйста разобраться в чем проблема. Вот сам код:

<div class="baner" style="width:100%;">
<div class="banerleft"  style="width:50%;float: right;">
<a href="sample.html"><img src="/img/baner1.jpg" width="100%" alt=""></a>

  </div>

<div class="baneright" style="width:50%;background: #000;float: left;">
<a href="sample.html"><img src="/img/baner.jpg" width="100%" alt=""></a>
<img style="opacity: 0.7;">
<a href="#" style="position: absolute;
    top: 50%;
    z-index: 10;
    left: 17%;
    text-align: center;
    color: #fff;
    font-size: 46px;
    font-family: arial;
	    text-decoration: none;
    border: 3px solid #fff;
	padding: 14px;">SAUCONY<br>@JAZZ 4000</a>
  </div>

Comments

[Ankhena]

Похоже, что ошибки в путях к картинкам, они не загрузились и соответственно, нет высоты.

p.s.

прописал код в нотпаде

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

float

float нужен для обтекания одного элемента другими.
В вашем случае больше подходит flex или grid


У img где-то должен быть src.
А если вы им пытались сделать черный полупрозрачный, то он делается с помощью background-color: rgba(0, 0, 0, 0.7) или сплошной полупрозрачной тенью

и т.д.

[Ihorets]

Ankhena, спасибо, путь к картинке поправил. Не подскажите, как опустить ниже кнопку с текстом и откуда могла появиться черная полоска внизу левой картинки?

[Ankhena]

Ihorets, как-то так https://jsfiddle.net/zsophjxk/
Или абсолютом

[Ihorets]

Ankhena, большое спасибо за помощь.