Need help with "background-color" property in CSS

G

gdebojyoti.mail96

Member
Messages
89
Reaction score
0
Points
6
I have created an HTML page ( http://sociallizze.in/debojyotighosh/projects/isn/test.html )

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:
essellar

essellar

Community Advocate
Community Support
Messages
3,295
Reaction score
227
Points
63
The problem is that both of the columns inside of #body are floated and there's nothing to force the height of their container. As much as I hate extraneous markup, you need something after the columns set to clear: both; in order to force #body to have any height at all. Alternatively, you could make one column unfloated (either left or right) and just float the other, but then you're stuck deciding which one is going to be the taller of the two, and even with fixed content you can't always be sure (users can have some weirdo font-size settings that can play havoc with your best efforts). An HR can be made transparent and a single pixel high with no top or bottom margin, and is as close to properly semantic as you can get for this application. An empty span (set to block) or div could be used as well -- these class="clearfloat" elements, though distasteful, are very common.
 
G

gdebojyoti.mail96

Member
Messages
89
Reaction score
0
Points
6
Thanks a lot; the clear:both helped. :)

The new HTML code:

Code: 
<!DOCTYPE html>
<html>


<head>

	<title>Indian Soccer Net</title>
	<meta />
	<meta />
	
	<link href="images/favicon.png" rel="icon"/>
	<link href="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 style="clear:both"></div>				/* This line has been added */
				
			</div>
			
		</div>
		
		<div id='footerzone'>
			<div id='footer'>
				This is a footer.
			</div>
		</div>
		
	</div>
		
</body>


</html>

The CSS file was left unchanged.
 
descalzo

descalzo

Grim Squeaker
Community Support
Messages
9,372
Reaction score
326
Points
83
A. Create the page on your site
B. Post a link here
C. Describe EXACTLY what you want
D. Describe EXACTLY what you see (include what browser you are using).

I can get your HTML and CSS by looking at the page. Posting a wall of code, 90% of which does not relate to the problem, is counterproductive.
 
essellar

essellar

Community Advocate
Community Support
Messages
3,295
Reaction score
227
Points
63
The problem has been resolved (by the clearfloat div below the columns) and the solution required at least the content of the #body div and all of the related CSS in the original question. Sometimes the minimum case is more than a line or two, and in this case the PHP include is smaller than the rendered HTML would have been while at the same time being no less compact than a dummy entry would have been. The doctype matters, as do the linked stylesheets (any of which could have been overriding the styles set in the posted CSS if they had been loaded in a different order).

As much as I like compact, minimal examples, there wasn't a whole lot in what was posted (in the original) that could have been arbitrarily chopped; it was a well-asked question. The second posting merely indicates what was added in context, and I suppose you could call that extraneous -- except that it may help if anyone else has a similar problem and (let's not hold our breath for this) searches first.
 
M

misson

Community Paragon
Community Support
Messages
2,572
Reaction score
72
Points
48
Indeed, following up with the solution is a mitzvah. The post could perhaps have used a clarifying note that the problem was resolved and the code was the solution, but Debojyoti Ghosh did a much better job than many, overall.
 
You must log in or register to reply here.
Top