gdebojyoti.mail96
Member
- Messages
- 89
- Reaction score
- 0
- Points
- 6
I have created an HTML page ( http://sociallizze.in/debojyotighosh/projects/isn/test.html )
The CSS file ( http://sociallizze.in/debojyotighosh/projects/isn/scripts/css/style.css ) is as follows:
Please note this part of the CSS file:
Although, I have provided this background-color: #ddddff line, it is not showing. Only thing I can see is a black line above the "Match of the Week" box and the adjacent white box (which is because of the border property).
I cannot provide a fixed "height" property because it is going to vary (depending upon "Latest news from ISN")..
So how do I provide a background colour to the "body" division?
P.S.: I hope that my question is clear and understandable.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Indian Soccer Net</title>
<meta />
<meta />
<link href="http://x10hosting.com/forums/images/favicon.png" rel="icon"/>
<link href="http://x10hosting.com/forums/images/favicon.png" rel="shortcut icon" type="image/x-icon" />
<link rel="stylesheet" href="scripts/css/style.css">
<link rel="stylesheet" href="scripts/3rdparty/themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="scripts/3rdparty/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="scripts/3rdparty/style.css" type="text/css" media="screen" />
</head>
<body>
<div align='center'>
<div id='header'>
<font color='#500' size='5'><a href=#>Home</a> | Menu1 | Menu2 | Menu3</font>
</div>
<div id='main'>
<div id='headerImage'>
</div><br><br><br>
<div id='header1'>
</div><br><br>
<div id='body' align='left' style="border:1px solid black">
<div id='col1'>
<div id='mow'>
<h4>Match of the Week</h4>
</div>
<div id='separator1'>
</div>
<div id='headlines'>
<h4>Headlines</h4>
<ul>
<li>news 1 Lorem Ipsum Doler Mite</li><br>
<li>news 2 blah blah</li><br>
<li>Fulham holds Chesea 1-1</li><br>
<li>Messi stars in Barcelona's 3-1 win over Real Madrid</li><br>
<li>Man U thrash Arsenal 8-2</li><br>
<li>News stuff blah blah</li><br>
</div>
</div>
<div id='col2'>
<div id='slide'>
<div id="wrapper">
</div>
</div>
<div id='separator2'>
</div>
<div id='col3'>
<div id='blog' align='center'>
<h4>Latest news from ISN</h4>
<?php include('admin/blogpost.php'); ?>
<br><br>
</div>
</div>
<div id='col4'>
<div id='adv' align='center'>
<br><br><br><br><br><br><br>
Your ad here
</div>
<div id='poll'>
<h4>Poll</h4>
</div>
</div>
</div>
</div>
</div>
<div id='footerzone'>
<div id='footer'>
This is a footer.
</div>
</div>
</div>
</body>
</html>The CSS file ( http://sociallizze.in/debojyotighosh/projects/isn/scripts/css/style.css ) is as follows:
Code:
/*=================================*/
/* Main css file for the home page of Indian Soccer Net
/* December 2011
/* By: Debojyoti Ghosh
/* http://debojyotighosh.com
/*=================================*/
body
{
/images/bg1.jpg);*/images/bg3.jpg);
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: 100%;
color: #29272a;
font-family: Verdana, Geneva, sans-serif;
}
#header {
width: 100%;
height: 35px;
margin: -7 0 0 0;
background-color: #000044;
}
#main {
width: 100%;
}
#headerImage1 {
width: 1350px;
height: 20px;
float: center;
background-color: #4444FF;
}
#header1 {
width: 1050px;
height: 50px;
float: center;
background-color: #4444FF;
}
#body {
width: 1050px;
height: 100%; /* Problem with this part */images/ul.gif) no-repeat 0 7px;
}
#col1{
width: 255px;
float:left;
background-color: #ddddff;
}
#mow{
width:253px;
height:198px;
background-color: #eee;
border: 1px solid #999;
}
#separator1{
width: 255px;
height: 2px;
}
#headlines{
width: 253px;
background-color: #eee;
border: 1px solid #999;
}
#leaguetab{
width: 253px;
background-color: #eee;
border: 1px solid #999;
}
#col2{
width: 790px;
float:right;
background-color: #ddddff;
}
#slide{
width: 788px;
height: 398px;
border: 1px solid #999;
background-color: #fff;
}
#separator2{
width: 790px;
height: 2px;
}
#col3{
width: 450px;
float: left;
}
#blog{
width: 448px;
float: left;
background-color: #eee;
border: 1px solid #999;
margin-bottom: 15px;
}
#blogpost{
width: 440px;
text-align: left;
line-height: 20px;
}
#col4{
width: 340px;
float: right;
}
#adv{
width: 338px;
height: 298px;
background-color: #eee;
border: 1px solid #999;
}
#poll{
width: 338px;
height: 248px;
background-color: #eee;
border: 1px solid #999;
}
#footerzone{
width: 100%;
float: left;
margin-top:10px;
margin-bottom:10px;
}
#footer{
width: 1050px;
height: 150px;
background-color: #eee;
float: center;
}
a
{
text-decoration:none;
}Please note this part of the CSS file:
Code:
#body {
width: 1050px;
float: center;
background-color: #ddddff;
border: 1px solid #999;
}Although, I have provided this background-color: #ddddff line, it is not showing. Only thing I can see is a black line above the "Match of the Week" box and the adjacent white box (which is because of the border property).
I cannot provide a fixed "height" property because it is going to vary (depending upon "Latest news from ISN")..
So how do I provide a background colour to the "body" division?
P.S.: I hope that my question is clear and understandable.
Last edited:
