www.webdeveloper.com
Results 1 to 4 of 4

Thread: Getting the background color of container in all div's

  1. #1
    Join Date
    Sep 2008
    Posts
    10

    Getting the background color of container in all div's

    Below is code of a webpage.
    HTML Code:
    <html>
    <head>
    <title> Simple web page using division tags</title>
    <style type="text/css">
    <!--
    body {
    	background-color:#36F;
    	
    }
    h1 {
    	font-family: cambria;
    	font-size: 22px;
    }
    p {
    	font-family: calibri;
    	font-size: 16;
    }
    ul {
    	margin-left : 0px;
    	padding-left : 0px;
    }
    li {
    	text-align: center;
    	list-style-type: none;
    	padding :20px;
    	margin : 0px;
    }
    li:hover {
    	background-color: black;
    	font-color: yellow;
    }
    
    #wrapper {
    	width:960px;
    	background-color: white;
    	margin: auto;
    	height: inherit;
    }
    
    #header {
    	text-align : center;
    	padding-top : 20px;
    	width : 960px;
    	height : 150px;
    	background-color: pink;
    }
    
    #leftsb {
    	float : left;
    	width : 200px;
    	background-color: grey;
    	color: white;	
    }
    
    #rightsb {
    	float : left;
    	width : 300px;
    	background-color: grey;
    	color: white;
    }
    #content {
    	float: left;
    	width : 460px;
    	background-color: inherit;
    }	
    -->
    </style>
    
    
    </head>
    <body>
    <div id="wrapper">
    
    <div id="header">
    	<h1>XYZ group of Industries</h1>
    </div>
    
    <div id="leftsb">
    	<ul>
    
    		
    <li> Home </li>
    		<li> Services </li>
    		<li> About </li>
    		<li> Contact </li>
    		<li> Blog </li>
    	
    </ul>
    </div>
    
    <div id="content"> 
    	<p> CSS stands for Cascading style sheets. CSS is used to style any web page. We can design webpages in the way we want it to show up in the browser.
    	CSS is very easy to learn. Most of the designing work on web is done using css. CSS3 is the latest version of CSS which is in the developmet process right
    	now. We may start using it by next year.
    	</p>
    </div>
    
    <div id="rightsb">
    <ul>
    <li> Recent Posts </li>
    <li> Most Popular </li>
    <li> Archive </li>
    <li> Tutorials </li>
    <li> Articles </li>
    </ul>
    </div>
    
    </div>
    </body>
    </html>
    I have put all the div tags in a div with id=wrapper.

    But when I load the page in any web browser I cannot see the background color of the wrapper div in all the divs.

    How can I make the background color of all the divs by default to be that of wrapper div.

  2. #2
    Join Date
    Mar 2010
    Posts
    2,803
    I would use

    Code:
     
    background-color: inherit;

  3. #3
    Join Date
    Sep 2008
    Posts
    10
    I have given inherit value to background-color property of the #content div and I have also given some margins to the divs but background-color: white of the #wrapper div does not appear in the gaps of the div. Still the background color of the body appears.

    Any solution for this.
    HTML Code:
    <html>
    <head>
    <title> Simple web page using division tags</title>
    <style type="text/css">
    <!--
    body {
    	background-color:#36F;
    	
    }
    h1 {
    	font-family: cambria;
    	font-size: 22px;
    }
    p {
    	font-family: calibri;
    	font-size: 16;
    }
    ul {
    	margin-left : 0px;
    	padding-left : 0px;
    }
    li {
    	text-align: center;
    	list-style-type: none;
    	padding :20px;
    	margin : 0px;
    }
    li:hover {
    	background-color: black;
    	font-color: yellow;
    }
    
    #wrapper {
    	width:960px;
    	background-color: white;
    	margin: auto;
    	height: inherit;
    }
    
    #header {
    	margin-bottom: 20px;
    	text-align : center;
    	padding-top : 20px;
    	width : 960px;
    	height : 150px;
    	background-color: pink;
    }
    
    #leftsb {
    	float : left;
    	width : 200px;
    	background-color: grey;
    	color: white;	
    }
    
    #rightsb {
    	float : left;
    	width : 300px;
    	background-color: grey;
    	color: white;
    }
    #content {
    	float: left;
    	width : 420px;
    	margin: 0 20px 0 20px;
    	background-color: inherit;
    }	
    -->
    </style>
    
    
    </head>
    <body>
    <div id="wrapper">
    
    <div id="header">
    	<h1>XYZ group of Industries</h1>
    </div>
    
    <div id="leftsb">
    	<ul>
    
    		
    <li> Home </li>
    		<li> Services </li>
    		<li> About </li>
    		<li> Contact </li>
    		<li> Blog </li>
    	
    </ul>
    </div>
    
    <div id="content"> 
    	<p> CSS stands for Cascading style sheets. CSS is used to style any web page. We can design webpages in the way we want it to show up in the browser.
    	CSS is very easy to learn. Most of the designing work on web is done using css. CSS3 is the latest version of CSS which is in the developmet process right
    	now. We may start using it by next year.
    	</p>
    </div>
    
    <div id="rightsb">
    <ul>
    <li> Recent Posts </li>
    <li> Most Popular </li>
    <li> Archive </li>
    <li> Tutorials </li>
    <li> Articles </li>
    </ul>
    </div>
    
    </div>
    </body>
    </html>

  4. #4
    Join Date
    Mar 2010
    Posts
    2,803
    you asked in your first post

    How can I make the background color of all the divs by default to be that of wrapper div.
    If you give all the child divs in #wrapper the style background-color: inherit; then all the child divs should have the bg color of their parent div (wrapper).

    Now since wrapper is 960px wide, if the <body> is wider than that, then the <body> bg color will appear around wrapper.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles