Почему мой фоновый цвет не отображается вверху моего окна?

Question

Я пытаюсь поставить оранжевый бар в верхней части моей страницы. Почему не отображается цвет? Верхняя панель должна быть высотой 34 пикселя.

Вот мой jsfiddle: http://jsfiddle.net/huskydawgs/z9j9rsz2/19/

Вот мой код:

<div class="topbar"> 
</div> 

<div class="wrapper-data"> 
    <div class="data_row"> 
     <div class="data_cell1_rt-20-80"><img alt="Seattle" src="http://www.alltooflat.com/pranks/myths/penny/spaceneedle_big_3.jpg" height="150" width="144"></div> 

     <div class="data_cell2_rt-20-80">&nbsp;</div> 

     <div class="data_cell3_rt-20-80"> 
      <p> 
       Seattle a coastal seaport city and the seat of King County, in the U.S. state of Washington. With an estimated 652,405 residents as of 2013, Seattle is the largest city in the Pacific Northwest region of North America and the fastest-growing major city in the United States.[5] The Seattle metropolitan area of around 3.6 million inhabitants is the 14th largest metropolitan area in the United States.[6] The city is situated on a narrow isthmus between Puget Sound (an inlet of the Pacific Ocean) and Lake Washington, about 100 miles (160 km) south of the Canada–United States border. A major gateway for trade with Asia, Seattle is the 8th largest port in the United States and 9th largest in North America in terms of container handlin</p> 
     </div> 
    </div> 
</div> 

Вот мой CSS:

#topbar { 
    width: 100%; 
    background: #f66511; 
    height: 34px; 
    line-height: 1; 
} 

.wrapper-data { 
    position:relative; 
    width:100%; 
    border: none; 
    margin: 40px 0 0 0; 
    overflow: hidden; 
} 

    .data_row { 
     height:100%; 
     min-height:100%; 
     white-space:nowrap; 
     display:table; 
     width: 100%; 
    } 

/* Landing Data - Left Content - 2 col */ 
    .data_cell1_lt-20-80 { 
     width:74%; 
     white-space:normal; 
     display:table-cell; 
     vertical-align:top; 
    } 

    .data_cell2_lt-20-80 { 
     width:6%; 
     display:table-cell; 
     white-space:normal; 
    } 

    .data_cell3_lt-20-80 { 
     width:20%; 
     display:table-cell; 
     white-space:normal; 
    } 

     .data_cell3_lt-20-80 img { 
     display:block; 
     margin:0 auto; 
     } 
     .data_cell3_lt-20-80 p { 
     text-align:left; 
     } 

/* Landing Data - Right Content - 2 col */ 
    .data_cell1_rt-20-80 { 
     width:20%; 
     white-space:normal; 
     display:table-cell; 
    } 

    .data_cell2_rt-20-80 { 
     width:6%; 
     display:table-cell; 
     white-space:normal; 
    } 

    .data_cell3_rt-20-80 { 
     width:74%; 
     display:table-cell; 
     white-space:normal; 
     vertical-align:top; 
    } 

Answer 1

Вы используете #topbar, который относится к идентификатору, но вы настраиваете class = "topbar" в вашем HTML. Вам необходимо либо изменить div на использование id = "topbar", либо изменить CSS, чтобы использовать .topbar вместо #topbar.

Answer 2

Класс CSS обозначается период, а не хэш. Изменение:

#topbar{} 

к:

.topbar{} 

Answer 3

переход от класса к идентификатору <div id="topbar">

ваш CSS использует #

, но если это будет использоваться на нескольких страницах, то просто изменить CSS для #topbar

Answer 4

Поскольку вы назначили topbar в DIV, как класса, но в CSS вы звоните в ID

в CSS, ш e выберите элемент по его идентификатору с ведущим символом хеша #, например. #topbar

И

В своем классе с ведущей точкой . например, .topbar

Вот хорошая статья: http://htmldog.com/guides/css/intermediate/classid/

Изменить код из:

#topbar { /* ... */ } 

To:

.topbar { /* ... */ } 

Вот Working Fiddle.