vmars316 Posted August 11, 2018 Share Posted August 11, 2018 (edited) Hello & Thanks , I am having trouble giving a <div> a background color : <div class="Cell" style="width: 25%; border-style: solid; border-color: #FF0000; background-color: D3DDEB; display: inline-block; padding-left: 5px; padding-right: 5px; "> I am using this example: https://www.w3schools.com/htmL/tryit.asp?filename=tryhtml5_migrate_7 I am using inline style= , when I get proper results , then I will transpose code into css styles . <!DOCTYPE html> <html lang="en"> <head> <title>HTML5</title> <meta charset="utf-8"> <style> body { font-family: Verdana, sans-serif; font-size: 0.8em; } header, nav, section, article, footer, div.city { border: 1px solid grey; margin: 5px; padding: 8px; } nav ul { margin: 0; padding: 0; } nav ul li { display: inline; margin: 5px; } </style> </head> <body> <header> <h1>HTML5 Skeleton</h1> </header> <nav> <ul> <li>News</li> <li>Sports</li> <li>Weather</li> </ul> </nav> <article> <h2>Famous Cities</h2> <div class="London" style="background-color: #00FF00;"> <h2>London</h2> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> </div> <div class="Paris" style="background-color: #FF0000;"> <h2>Paris</h2> <p>Paris is the capital and most populous city of France.</p> </div> <div class="Tokyo" style="background-color: #0000FF;"> <h2>Tokyo</h2> <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p> </div> </article> <footer> <p>© 2014 W3Schools. All rights reserved.</p> </footer> </body> </html> And here is my example code: <!DOCTYPE html> <html> <head> <title>DIVs Template WIP</title> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DivsOnlyTemplate</title> <!-- file:///C:/vmars.us/DivsOnly-STARTover.html https://www.dummies.com/web-design-development/css3/using-the-div-tag-to-create-tables/ https://htmlformatter.com/ https://www.w3schools.com/htmL/tryit.asp?filename=tryhtml5_migrate_7 --> <style type="text/css"> </style> </head> <body style="background-color: #FFFFFF;"> <br> <div class="Table" style="border-style: solid; text-align: center; border-color: #5A697D; border-width: 16px;"> <!-- ============NewRow============== --> <p></p> <div class="Row" style="border-style: solid solid solid solid; border-width: 4px; border-color: #000000;"> <div class="Cell" style="width: 25%; border-style: solid; border-color: #FF0000; background-color: D3DDEB; display: inline-block; padding-left: 5px; padding-right: 5px; "> <p style="border-style: solid; border-color: #0000FF; background-color: D3DDEB"> Row 1 Column 1 <br><img src="Empty.png" alt="Empty.png"></p> </div> <!-- <div class="Cell" --> <div class="Cell" style="width:70%; border-style: solid; border-color: #00FF00; background-color: 000000; display: inline-block; padding-left: 5px; padding-right: 5px; "> <p> Row 1 Column 2 <br><img src="Empty.png" alt="Empty.png"> </p> </div> <!-- <div class="Cell" --> </div> <!-- <div class="Row" --> </div> <!-- <div class="Table"> --> </body> </html> Please what am I doing wrong ? Thanks Edited August 11, 2018 by vmars316 Link to comment Share on other sites More sharing options...
dsonesuk Posted August 12, 2018 Share Posted August 12, 2018 What is missing from border colour used compared to the background colour used, non of the six alpha-numeric hex colour characters will not show any colour without it at the beginning. Link to comment Share on other sites More sharing options...
vmars316 Posted August 12, 2018 Author Share Posted August 12, 2018 Ugh ! Thanks dsonesuk , Sorry , I missed that . Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now