2014-09-03 99 views
0

我正在尝试在我的页面上放一个橙色条。为什么不显示颜色? 顶栏应该是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; 
    } 

回答

3

您正在使用#topbar,这是指一个id,但是你在你的HTML设置class = "topbar"。您需要将div更改为使用id = "topbar",或更改CSS以使用.topbar而不是#topbar。从类ID

2

CSS类是由一个时期,而不是一个哈希表示。更改:

#topbar{} 

到:

.topbar{} 
+1

[工作示例](http://jsfiddle.net/z9j9rsz2/20/) – showdev 2014-09-03 21:11:33

0

变化<div id="topbar">

你的CSS使用#

但如果这是将要在多个页面上使用,那么只需更改CSS来#topbar

1

因为您已经分配topbar到DIV为,但是在CSS您所呼叫的ID

在CSS中,w e通过其ID与前导散列符号#(例如, #topbar

通过其类带有前导点.例如.topbar

这里是一个很好的文章:http://htmldog.com/guides/css/intermediate/classid/

从改变你的代码:

#topbar { /* ... */ } 

要:

.topbar { /* ... */ } 

这里是Working Fiddle

相关问题