html - Why isn't one background color for a div not showing -
i can't seem figure out why background color class menubar isn't showing. "hello"s placeholders can see each thing is. i've scoured interwebs , have yet prevail. can see little bit of beginner in programming, that's why came here, learn best. ;)
here's css , html
* { padding: 0; margin: 0; border: 0; } body { background-image: url(' 3d mike.jpg '); background-repeat: no-repeat; background-position: center; background-attachment: fixed; background-size: 100% auto; } .blended_grid { display: block; width: 1200px; overflow: auto; margin: 60px auto 0 auto; } .header { float: left; clear: none; min-width: 100px; min-height: 35px; } .topbanner { background-image: url(' topbanner.png '); background-repeat: no-repeat; background-position: center; float: left; clear: none; height: 200px; width: 1200px; } .menubar { background-color: rgba(0, 0, 0, 0.3); float: left; clear: none; height: 35px; width: 1200px; } .leftcolumn { background-color: rgba(0, 0, 0, 0.3); float: left; clear: none; height: 600px; width: 200px; } .feedhost { float: left; clear: none; min-width: 80px; min-height: 80px; } .feed_00 { background-color: rgba(0, 0, 0, 0.2); float: none; clear: both; height: 100px; width: 800px; } .feed_01 { background-color: rgba(0, 0, 0, 0.2); float: none; clear: both; height: 100px; width: 800px; } .feed_02 { background-color: rgba(0, 0, 0, 0.2); float: none; clear: both; height: 100px; width: 800px; } .feed_03 { background-color: rgba(0, 0, 0, 0.2); float: none; clear: both; height: 100px; width: 800px; } .feed_04 { background-color: rgba(0, 0, 0, 0.2); float: none; clear: both; height: 100px; width: 800px; } .feed_05 { background-color: rgba(0, 0, 0, 0.2); float: none; clear: both; height: 100px; width: 800px; } .rightcolumn { background-color: rgba(0, 0, 0, 0.3); float: left; clear: none; height: 600px; width: 200px; }
<html> <head> <title> welcome! </title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="blended_grid"> <div class="header"> <div class="topbanner"> </div> <div class "menubar"> <p>hello</p> </div> </div> <div class="leftcolumn"> <p>hello</p> </div> <div class="feedhost"> <div class="feed_00"> <p>hello</p> </div> <div class="feed_01"> <p>hello</p> </div> <div class="feed_02"> <p>hello</p> </div> <div class="feed_03"> <p>hello</p> </div> <div class="feed_04"> <p>hello</p> </div> <div class="feed_05"> <p>hello</p> </div> </div> <div class="rightcolumn"> <p>hello</p> </div> </div> </body> </html>
you missing equals sign:
<div class="menubar">
* { padding: 0; margin: 0; border: 0; } body { background-image: url(' 3d mike.jpg '); background-repeat: no-repeat; background-position: center; background-attachment: fixed; background-size: 100% auto; } .blended_grid { display: block; width: 1200px; overflow: auto; margin: 60px auto 0 auto; } .header { float: left; clear: none; min-width: 100px; min-height: 35px; } .topbanner { background-image: url(' topbanner.png '); background-repeat: no-repeat; background-position: center; float: left; clear: none; height: 200px; width: 1200px; } .menubar { background-color: rgba(0, 0, 0, 0.3); float: left; clear: none; height: 35px; width: 1200px; } .leftcolumn { background-color: rgba(0, 0, 0, 0.3); float: left; clear: none; height: 600px; width: 200px; } .feedhost { float: left; clear: none; min-width: 80px; min-height: 80px; } .feed_00 { background-color: rgba(0, 0, 0, 0.2); float: none; clear: both; height: 100px; width: 800px; } .feed_01 { background-color: rgba(0, 0, 0, 0.2); float: none; clear: both; height: 100px; width: 800px; } .feed_02 { background-color: rgba(0, 0, 0, 0.2); float: none; clear: both; height: 100px; width: 800px; } .feed_03 { background-color: rgba(0, 0, 0, 0.2); float: none; clear: both; height: 100px; width: 800px; } .feed_04 { background-color: rgba(0, 0, 0, 0.2); float: none; clear: both; height: 100px; width: 800px; } .feed_05 { background-color: rgba(0, 0, 0, 0.2); float: none; clear: both; height: 100px; width: 800px; } .rightcolumn { background-color: rgba(0, 0, 0, 0.3); float: left; clear: none; height: 600px; width: 200px; }
<html> <head> <title> welcome! </title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="blended_grid"> <div class="header"> <div class="topbanner"> </div> <div class="menubar"> <p>mrnu bar</p> </div> </div> <div class="leftcolumn"> <p>hello</p> </div> <div class="feedhost"> <div class="feed_00"> <p>hello</p> </div> <div class="feed_01"> <p>hello</p> </div> <div class="feed_02"> <p>hello</p> </div> <div class="feed_03"> <p>hello</p> </div> <div class="feed_04"> <p>hello</p> </div> <div class="feed_05"> <p>hello</p> </div> </div> <div class="rightcolumn"> <p>hello</p> </div> </div> </body> </html>
Comments
Post a Comment