CODEWITHSUNDEEP
htmlcss
user3075987
user3075987

Reputation: 881

Why is my background color not showing up on the top of my window?

I'm trying to put an orange bar across the top of my page. Why isn't the color showing? The topbar should be 34 pixels in height.

Here's my jsfiddle: http://jsfiddle.net/huskydawgs/z9j9rsz2/19/

Here's my code:

<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>

Here's my 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;
    }

Upvotes: 0

Views: 78

Answers (4)

UID
UID

Reputation: 4494

Because you have assigned topbar to DIV as class, but in CSS you are calling as ID

In CSS, we select an element by its ID with a leading hash sign # e.g. #topbar

AND

By its class with a leading dot . e.g. .topbar

Here is a nice article: http://htmldog.com/guides/css/intermediate/classid/

Change your code from:

#topbar { /* ... */ }

To:

.topbar { /* ... */ }

Here is the Working Fiddle.

Upvotes: 1

GeekByDesign
GeekByDesign

Reputation: 436

change from class to id<div id="topbar">

your css is using #

but if this is going to be used on multiple pages then just change the css to #topbar

Upvotes: 0

GentlePurpleRain
GentlePurpleRain

Reputation: 529

You are using #topbar, which refers to an id, but you are setting class = "topbar" in your HTML. You need to either change your div to use id = "topbar", or change the CSS to use .topbar instead of #topbar.

Upvotes: 3

Major Productions
Major Productions

Reputation: 6042

A CSS class is denoted by a period, not a hash. Change:

#topbar{}

to:

.topbar{}

Upvotes: 2

Related Questions