0

I m having Problem
i want to put green image on black image...
my css code is..

@charset "utf-8";
/* CSS Document */

#Container
{
	background-image:url(../Layers/Container.jpg);
	width:1024px;
	height:768px;
	background-repeat:no-repeat;
	
}

#MiniContainer
{
	background-image:url(../Layers/MiniContainer.jpg);
	background-repeat:no-repeat;
	/*margin:150px 10px 100px 150px;*/
	margin-top:100;
	margin-left:50px;
	margin-bottom:100px;
	margin-right:50px;
}

and my html code is

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="Style.css" type="text/css" rel="stylesheet" />
</head>

<body>
<center>
<div id="Container">

<div id="MiniContainer">
<img src="../Layers/MiniContainer.jpg" width="873"  height="452"/>
</div>

</div>
</center>
</body>
</html>

i m trying to fix it since 2 hours but not able to do it kindly help me..i have attached picture as i want to do it..

Attachments pro.jpg 14.26 KB
2
Contributors
1
Reply
2
Views
6 Years
Discussion Span
Last Post by Arkinder
0

First you need use a strict doctype. Using anything but on any new page is just lazy. Also, if you aren't parsing XML data, then you shouldn't be using XHTML syntax. To center the boxes you need to use margin: 0 auto; and make sure that both elements have a set width. You're using margin the wrong way.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
     
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <style type="text/css">
     
	    @charset "utf-8";
	    /* CSS Document */
				
            * { margin: 0; padding: 0;}
	    #Container 
            {
	        background-color: #000;
	        background-image: url('../Layers/Container.jpg');
                width: 1024px;
	        height: 768px;
	        margin: 0 auto;
	        padding-top: 24%;
	        background-repeat: no-repeat;
	    }

	    #MiniContainer 
            {
	        background-color: green;
		background-image: url('../Layers/MiniContainer.jpg');
		background-repeat: no-repeat;
		width: 85%;
	        height: 59%;
	        margin: 0 auto;
	    }
	 
         </style>
     </head>
     
     <body>
     <div id="Container">

     <div id="MiniContainer">
         <img alt="" src="../Layers/MiniContainer.jpg">
     </div>

     </div>
     </body>
     
</html>

Regards
Arkinder

Edited by Arkinder: n/a

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.