Jump to content
vmars316

Having Trouble with <div style="background-color:">

Recommended Posts

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>&copy; 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 by vmars316

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

×