Jump to content

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


vmars316
 Share

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
Link to comment
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
 Share

×
×
  • Create New...