8 Replies - 619 Views - Last Post: 19 July 2012 - 05:53 PM

#1 mindiapolis  Icon User is offline

  • D.I.C Head

Reputation: -4
  • View blog
  • Posts: 175
  • Joined: 31-October 11

Background color

Posted 17 July 2012 - 06:56 PM

On http://siteservicesu...om/homepage.php why isn't the whole height of the companyInfo the light green?

<?php
require_once("functions.php");
?>
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
    <title>Untitled Document</title>
    <!--meta description -->
    <link rel="stylesheet" href="siteServices.css">
    <!--[if It IE 9]>
    <script src="http://html5shiv.googlecode-.com/svn/trunk/html5.js">
    </script>
    <![endif]-->
<style type="text/css">
#companyInfo {
        background-color:#8FBCA6;  
}
#skills {
    width:750px;
    font-size:  18px;
    text-align:center;
    background: -moz-radial-gradient(#FFFFFF, #B8B8B8);
    background: -ms-radial-gradient(#FFFFFF, #B8B8B8);
    background: -webkit-radial-gradient(#FFFFFF, #B8B8B8);
    -moz-border-radius: 100px / 50px;
    -webkit-border-radius: 100px / 50px;
    border-radius: 100px / 50px;
}

</style>
<script type="text/javascript" language="javascript">
var slideArray = new Array()
slideArray[0]= "Web Design";
slideArray[1]= "Website Maintenance";
slideArray[2]= "Article Writing";
slideArray[3]= "Internet Research";
slideArray[4]=  "Blogging";
function textSlideShow()
{
var total_slides;
total_slides=Math.floor(Math.random()*slideArray.length)
document.getElementById('div_display').innerHTML=slideArray[total_slides];
setTimeout("textSlideShow()",800);
}
</script>
</head>

<body>
<div id="mainContent">
<div id="companyInfo">
    <div id="header">
           <?php logo(); ?>
        <div id="nav">  
            <?php menu(); ?>
        </div>
     </div>
</div>
<table id = "skills">
<tr>
<td>
<div id="div_display"><script type="text/javascript" language="javascript">textSlideShow();</script></div>
</td>
</tr>
</table>
     <footer>
        <?php  contactInfo(); ?>
     </footer>
</div>
</body>
</html>



Is This A Good Question/Topic? 0
  • +

Replies To: Background color

#2 mohananasundaramn90  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 14
  • Joined: 16-July 12

Re: Background color

Posted 17 July 2012 - 09:03 PM

because u gave that color code only...change your color code
Was This Post Helpful? 0
  • +
  • -

#3 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 4189
  • View blog
  • Posts: 11,864
  • Joined: 18-April 07

Re: Background color

Posted 17 July 2012 - 09:19 PM

It is because your menu on the right there is floating outside the company info box. You see, when you make an element into a floated element it is first put into the flow of the page but then taken out and shifted left or right allowing the content to flow up on the left or right side of the element.

This means that even though it is inside the div element for the header, it is not considered in the "flow" of elements of the header. So the trick to do is add a "clear element" after the menu to force the header to wrap around the floated element. Refer the code below...

<div id="nav">   
   <ul id="navBar">
     <li class="menuChoice"><a href="homepage.php">Home</a></li> &nbsp;
     <li class="menuChoice"><a href="benefits.php">Benefits</a></li> &nbsp;
     <li class="menuChoice"><a href="portfolio.php">Portfolio</a></li> &nbsp;	
     <li class="menuChoice"><a href="contact.php">Contact</a></li>
   </ul>        
</div>
<div style="clear: both;"></div>



Notice in the code above we added that div under the nav div. It is said to clear floats with a style of "clear: both;". This is going to cause the header, which contains the nav and this new div, to wrap around it. This should then give you the appearance of having the green move all the way after the menu.

For more information, check out CSS floats and how they work. :)

This post has been edited by Martyr2: 17 July 2012 - 09:20 PM

Was This Post Helpful? 0
  • +
  • -

#4 mindiapolis  Icon User is offline

  • D.I.C Head

Reputation: -4
  • View blog
  • Posts: 175
  • Joined: 31-October 11

Re: Background color

Posted 18 July 2012 - 11:14 AM

You explained it very well, thank you! however, now the navbar is not the light green. even if I set the navbar to light green I can't get the whole height of header to be light green. I want the header to be the same as the footer if that helps you understand what I'm looking for
Was This Post Helpful? 0
  • +
  • -

#5 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 4189
  • View blog
  • Posts: 11,864
  • Joined: 18-April 07

Re: Background color

Posted 18 July 2012 - 11:24 AM

Sorry, I meant put the clearing div after the <div> with the id=header...

<div id="header"></div>
<div style="clear: both;"></div>



That is the ONLY change you need to do to get the green to extend down. :)
Was This Post Helpful? 0
  • +
  • -

#6 mindiapolis  Icon User is offline

  • D.I.C Head

Reputation: -4
  • View blog
  • Posts: 175
  • Joined: 31-October 11

Re: Background color

Posted 18 July 2012 - 11:39 AM

didn't help

<?php
require_once("functions.php");
?>
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
    <title>Untitled Document</title>
    <!--meta description -->
    <link rel="stylesheet" href="siteServices.css">
    <!--[if It IE 9]>
    <script src="http://html5shiv.googlecode-.com/svn/trunk/html5.js">
    </script>
    <![endif]-->
<style type="text/css">
#header {
	clear:both;
}
#companyInfo {
		background-color:#8FBCA6;  
}
#skills {
	width:750px; 
	font-size:  18px; 
	text-align:center; 
	background: -moz-radial-gradient(#FFFFFF, #B8B8B8);
	background: -ms-radial-gradient(#FFFFFF, #B8B8B8);
	background: -webkit-radial-gradient(#FFFFFF, #B8B8B8);
    -moz-border-radius: 100px / 50px;
    -webkit-border-radius: 100px / 50px;
    border-radius: 100px / 50px;
}

</style>
<script type="text/javascript" language="javascript">
var slideArray = new Array()
slideArray[0]= "Web Design";
slideArray[1]= "Website Maintenance";
slideArray[2]= "Article Writing";
slideArray[3]= "Internet Research";
slideArray[4]=  "Blogging";
function textSlideShow()
{
var total_slides;
total_slides=Math.floor(Math.random()*slideArray.length)
document.getElementById('div_display').innerHTML=slideArray[total_slides];
setTimeout("textSlideShow()",800);
}
</script>
</head>

<body>
<div id="mainContent">
<div id="companyInfo">
	<div id="header"> 
           <?php logo(); ?>
        <div id="nav">   
            <?php menu(); ?>
        </div>
     </div>
</div>
<table id = "skills">
<tr>
<td>
<div id="div_display"><script type="text/javascript" language="javascript">textSlideShow();</script></div>
</td>
</tr>
</table>
     <footer>
        <?php  contactInfo(); ?>
     </footer>
</div>
</body>
</html>

Was This Post Helpful? 0
  • +
  • -

#7 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 4189
  • View blog
  • Posts: 11,864
  • Joined: 18-April 07

Re: Background color

Posted 18 July 2012 - 11:51 AM

Believe me, it is the solution. I am running Firebug on your page you have there with two different browsers. So you are probably not doing something right. I see from the example page that you still haven't moved the div clear element to be right after the "header" div. Again, put it right after that div.

:)

Edit: Added screenshot

Attached Image


Now playing with it I do see I was right originally too. You could put it right after the nav div as well. Might be more appropriate. but either place will work.

This post has been edited by Martyr2: 18 July 2012 - 12:02 PM

Was This Post Helpful? 0
  • +
  • -

#8 mindiapolis  Icon User is offline

  • D.I.C Head

Reputation: -4
  • View blog
  • Posts: 175
  • Joined: 31-October 11

Re: Background color

Posted 18 July 2012 - 05:38 PM

I think I did what you had but it 's still not working, I'm sorry

<?php
require_once("functions.php");
?>
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
    <title>Untitled Document</title>
    <!--meta description -->
    <link rel="stylesheet" href="siteServices.css">
    <!--[if It IE 9]>
    <script src="http://html5shiv.googlecode-.com/svn/trunk/html5.js">
    </script>
    <![endif]-->
<style type="text/css">
#skills {
	width:750px; 
	font-size:  18px; 
	text-align:center; 
	background: -moz-radial-gradient(#FFFFFF, #B8B8B8);
	background: -ms-radial-gradient(#FFFFFF, #B8B8B8);
	background: -webkit-radial-gradient(#FFFFFF, #B8B8B8);
    -moz-border-radius: 100px / 50px;
    -webkit-border-radius: 100px / 50px;
    border-radius: 100px / 50px;
}

</style>
<script type="text/javascript" language="javascript">
var slideArray = new Array()
slideArray[0]= "Web Design";
slideArray[1]= "Website Maintenance";
slideArray[2]= "Article Writing";
slideArray[3]= "Internet Research";
slideArray[4]=  "Blogging";
function textSlideShow()
{
var total_slides;
total_slides=Math.floor(Math.random()*slideArray.length)
document.getElementById('div_display').innerHTML=slideArray[total_slides];
setTimeout("textSlideShow()",800);
}
</script>
</head>

<body>
<div id="mainContent">
<div id="companyInfo">
	<div id="header"> </div>
    <div style="clear:both"></div>
           <?php logo(); ?>
        <div id="nav">   
            <?php menu(); ?>
        </div>
     </div>
<table id = "skills">
<tr>
<td>
<div id="div_display"><script type="text/javascript" language="javascript">textSlideShow();</script></div>
</td>
</tr>
</table>
     <footer>
        <?php  contactInfo(); ?>
     </footer>
</div>
</body>
</html>

Was This Post Helpful? 0
  • +
  • -

#9 mindiapolis  Icon User is offline

  • D.I.C Head

Reputation: -4
  • View blog
  • Posts: 175
  • Joined: 31-October 11

Re: Background color

Posted 19 July 2012 - 05:53 PM

did I do it right?
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1