Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Exclamation CSS and Div help

    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
    Last edited by Apostropartheid; 04-21-2011 at 03:24 PM.

  • #2
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,301
    Thanks
    10
    Thanked 283 Times in 282 Posts
    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">&nbsp;</p> is used), then it should contain the objects as you'd expect.

    Dave

  • #3
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

  • #4
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,301
    Thanks
    10
    Thanked 283 Times in 282 Posts
    Do you have this up on a server somewhere I can see it online?

    Dave

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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.
    Last edited by effpeetee; 04-21-2011 at 07:51 PM. Reason: Extra comments added
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #6
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,301
    Thanks
    10
    Thanked 283 Times in 282 Posts
    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>&nbsp; business in, just before the corresponding </div> for #wrapper. That should fix it, from what I see.

    Dave

  • #7
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

  • #8
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,301
    Thanks
    10
    Thanked 283 Times in 282 Posts
    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

  • Users who have thanked tracknut for this post:

    sampson1 (04-21-2011)

  • #9
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

  • #10
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,301
    Thanks
    10
    Thanked 283 Times in 282 Posts
    Whew

  • #11
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Persevance pays.

    Frank

    All OK now. My site updated too.

    Will remove in one hour.

    Link now removed.
    Last edited by effpeetee; 04-21-2011 at 07:51 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    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
    •