CSS and Div help

sampson1 · 04-21-2011, 02:52 PM

Hello there.

I am coding a website together and it seems as though my #wrapper and #cont divs are not allowing me too have any color onto the background.

Any help will be great. I don't understand why it doesn't work

Here is the index page.

Code:

<!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>
		<link href="index.css" rel="stylesheet" type="text/css"/>
		<title>Music Website</title>
	</head>
<body>

	<div id="wrapper">
		
		<div id="header">
		
				<div id="connect">	
			
					<ul>
						<li class="textconnect">Spread the word</li>
						<li> <iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fgraphics.uclan.ac.uk%2F%7EMSampson%2FMusic%2520Website%2F&amp;layout=button_count&amp;show_faces=true&amp;width=75&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:75px; height:21px;" allowTransparency="true"></iframe></li>
						<li> <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></li> <!-- twitter tweet api -->
					</ul>
					
				</div>
			
				<img src="images/logo.png" alt="Artist Search" width="300px" height="100px" /> <!--The logo image -->
			
									
					<div id="searchbar">
							<form id="search" action="results.php" method="get">
								<input id="band" name="band" value="Search Band" onfocus="if (this.value=='Search Band') this.value='';"/>
								<input type="submit" value="Search"/> 
					</div>
			
			
				<div id="clear">
				</div>
			
		</div>
		
		
		<div id="cont">
			
				<div id="pipe">
					<h2>Latest News</h2>
					<script src="http://l.yimg.com/a/i/us/pps/listbadge_1.4.js">  <!-- Yahoo pipe start -->
					{
					"pipe_id":"92d5cc4697a1f950463a708c7f59fcc7", 
					"_btype":"list",
					"hideHeader" : "true",
					"width" : "400px", <!-- Width of pipe-->
					"height" : "450px",<!--Height of pipe -->
					"backgroundColor" : "#87CEEB",
					"evenBackgroundColor" : "#87CEEB", <!-- Colour of even news stories - 2nd 4th etc-->
					"oddBackgroundColor" : "#87CEEB", <!-- Colour of odd news stories - 1st 3rd etc -->
					"count" : 20 <!-- Limit the pipe too show the top 20 stories. -->
					}	
					</script> <!-- Yahoo pipe end-->
				</div>
			
		</div>
		
	</div>
	
	<div id="footer">
	</div>
	
	
</body>
</html>

And here is the CSS code.

Code:

#clear {
	clear: both;
	}

h1{
color:#ffffff;
text-align:center;
font-family: Arial;
font-size: 16px;
	}

h2{
color:#fff;
text-align:left;
font-family: Arial;
font-size: 22px;
	}	

h3{
text-align:left;
color:#fff
	}	

body{
color: #fff;
	}

#footer {
	clear:both;
	}
	
#header{
background-color:#26527c;
	}

#wrapper {
	height: 80%;
	width: 80%;
	margin: 0 auto;
	}

#searchbar {
text-align: center;
margin: 0 auto;
	}

#pipe {
float: left;
	}

#cont {
background-color: #4682B4;
width: 500px;
	}

#connect {
	float:right;
	}

#connect ul li {
	color:#fff;
	font-family: arial;
	font-size: 14px;
	display: inline;
	list-style: none;
	}
	
.textconnect {
	padding-right: 15px;
	}

I am seeing to have problems attribute colors onto the background of my website, as the color is just the body colouring. I am looking to have the whole background of the website a white and then for my cont too have a blue colour matching the #header div.

Thanks alot.

Matt

tracknut · 04-21-2011, 03:19 PM

To make the body background white, you'll want body {background-color:#ff} in there. And your cont div only has a floated object in it, so cont itself has no size, hence its background-color is not relevant. If you put an object after the floated object(s) in cont (commonly something like <p class="clear:both"> </p> is used), then it should contain the objects as you'd expect.

Dave

sampson1 · 04-21-2011, 03:32 PM

Hi Dave,

Thanks for your response but that doesn't seem too work either. I can get my body too change colour but I am wanting the wrapper and the cont divs to change there background colour too a different colour (a lighter blue) But I cant seem to change the colour of either of these.

Do you suppose there is some sort of conflict between the 2?

Thanks Matt

tracknut · 04-21-2011, 03:35 PM

Do you have this up on a server somewhere I can see it online?

Dave

effpeetee · 04-21-2011, 03:37 PM

Trying to be helpful, I have assembled the page here.
I have removed the css link as it is the same name as my own site css. The css is now in the head portion.

It will need putting back when the problem is sorted.

Frank

Link now removed.

tracknut · 04-21-2011, 03:43 PM

Ah, thanks Frank. So there's no background-color listed for the #wrapper div (... so the white background of the body shows through), and it suffers from the same float issue as the #cont div. So you could again put that hack of the <p>  business in, just before the corresponding </div> for #wrapper. That should fix it, from what I see.

Dave

sampson1 · 04-21-2011, 04:03 PM

Hi again,

The colour that I wanted has shown up, but only very slight.

http://graphics.uclan.ac.uk/~MSampson/Music%20Website/

Login Details

username access
password access

Thank you for putting me one up Frank.

The problem still seems to be occuring however. :S

Thank you again

Matt

tracknut · 04-21-2011, 04:16 PM

Annoying problem...

Is there a reason #pipe needs to be floated? I suspect this would be fine if you removed the float.

(and I didn't see a background-color applied to #wrapper yet)

Dave

sampson1 · 04-21-2011, 04:26 PM

Hi Dave,

That seems to of fixed it. Thank you very much. It was the pipe float causing all the problems. The pain.

Thank you

Matt

tracknut · 04-21-2011, 04:28 PM

Whew

effpeetee · 04-21-2011, 04:39 PM

Persevance pays.

Frank

All OK now. My site updated too.

Will remove in one hour.

Link now removed.