XHTML

can any one help? i have an assignment of a twent page site to make, so i decided to create one page as a template, but since this is my first time its kind of hard. the problem is i wanted the top of my page to be two color one under the other with writing in both of them, but they are not becoming the height i want them and there is space between them. i tried tabling it but i not getting the table to work either so it could look neater. another thing is the table i made for the links like home and contact us etc... it not going into the correct space it going at the bottom of everything and not getting any color in the table either. heere is the code could anyone help because its due on the 23rd.
HAVE TO DO IT FROM SCTRACH EVEN ADD JQUERY. OH COULD SOMEONE RECOMMEND A JQUERY SITE TO GET SOME COOL PLUGINS
PLEASE HELP.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Generation Changers Production Company</title>
		
		<style type = "text/css">
			div.heading1 { background-color: #FFD700; 
							text-align: center;
							height: 100%
							font-family: Arial, Helvetica, sans-serif;
							padding: .9em}
			div.heading2 { background-color: #FF69B4; 
							text-align: center;
							font-family: Arial, Helvetica, sans-serif;
							padding: .2em}
			div {background-color: #FF8C00;
				margin-bottom: .9em;
				font-family: Arial, Helvetica, sans-serif;}
				
			div.floated {background-color: #FFF0F5;
							font-size: 1.5em;
							font-family: Arial, Helvetica, sans-serif;
							padding-right: .5em;
							float:right;
							text-align:right;
							width: 80%}
							
	</style>
	</head>
	<body bgcolor= #9370DB>
		<div class = "heading1">generation changers production company</div>
		
		
		<div class = "heading2"> scripture comes here</div> 
		
		<div style = "width: 20%; height: 500px">
			<ul>
				<!-- adding link in list form -->
				<li><a href= "NHRT.html">New Heart Revival Tabernacle</a></li>
				<li><a href= "WAR.html">World Assembly Deliverence Center</a></li>
				<li><a href= "MISSION.html">Mission</a></li>
				
			</ul>
		</div>
		
		<div class = "floated">
			
			<table border = "1" width= "100%" bgcolor= #F0F8FF>
			
			<thead>
			<tr align="top">
				
				<th><a href= "HOME.html"> Home</a></th>
				<th><a href= "ABOUTUS.html">about us</a></th>
				<th><a href= "IMAGES.html">images</a></th>
				<th><a href= "CONTACT.html">contact</a></th>
			</tr>
		</thead>
		</div>
		
		</table>
		
		
	</body>
</html>

chinee

Junior Poster

115 posts since Apr 2010

Reputation Points: 10

Solved Threads: 0

1 Year Ago

Here is a few pointers that may help you along.

1. Make sure you properly define the code, like here:

height: 100%

should be: height: 100%;

See the little ; after the 100%? You forgot that, and that is why you were unsuccesfull to adjust the hight.

To define hight in heading 2, you should insert it there, like you have with heading 1. Include the ; and you can even define it in px, like 150px; in stead of 100%;.

To remove the space between the heading 1 and heading 2 colours, take out this at heading 2: padding: .2em and the 2 colours will touch, with no space inbetween.

I am not sure where you want the table at the bottom to appear, but to get colour into it, you have to define it.

Kraai

Senior Poster

3,981 posts since Feb 2008

Reputation Points: 76

Solved Threads: 87

1 Year Ago

thank you that was helpful i was able to fix the height but even though i removed padding from heading 2 there was still space so i tried removing padding from 1 and there is still space where you can see the body background color

chinee

Junior Poster

115 posts since Apr 2010

Reputation Points: 10

Solved Threads: 0

1 Year Ago

See the code below, I made it up quickly to show you how to get the two colors in the header area together with no space.

<html>

<head>



<title>Stylesheets</title>
<style type="text/css">

<!--

BODY      { background-color: #9370DB }


h1 { height: 100px; color: black; font-size: 37px; font-family: impact; background: blue; text-align: center; 

margin-top:20px; margin-bottom:0px; margin-left:0px; margin-right:0px; border-top-width:2px; } 

h2 { height: 70px; color: black; font-size: 26px; font-family: Arial, Helvetica, sans-serif; background: yellow; text-align: 

center; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px }




-->

</style>



</head>

<body>

<h1>Simple stylesheet coding</h1>
<h2>Example text<h2>



</body>



</html>

Kraai

Senior Poster

3,981 posts since Feb 2008

Reputation Points: 76

Solved Threads: 87

1 Year Ago

thank you very much it was hellpful

chinee

Junior Poster

115 posts since Apr 2010

Reputation Points: 10

Solved Threads: 0

1 Year Ago

ok the next thing is the links with home,contacts and evrything. on other sites you can always see them on higher up but on my page no matter how i try to better define it, it going at the bottom of evrything and i want it in the upper body just under heading2.

chinee

Junior Poster

115 posts since Apr 2010

Reputation Points: 10

Solved Threads: 0

1 Year Ago

Any function in css you can plot exactly where you want to place it, and how it must be placed, and how it must react.

You do the where it must go, by the "position:" tag.

In your case, you build a table with html code. Now you want to position it and decorate it within your webpage, probably by using some more html to get it to the right place, making the code all messy at the end.

You dont have to do all that, and thats the good news, using only css to do your horizontal table menu, you can place it where you want it, and making it look funky as well, by defining some hoover functions as well.

See on my example below, how I made up your table with only css style, and placed it within the h2 part of the site.

You should read up all you can on the various functions and things that can be done with css stylesheets. All of us are learning new things each day with it.

Good luck with the rest of your assignment

<html>

<head>



<title>Stylesheets</title>
<style type="text/css">

<!--

BODY      { background-color: #9370DB }


h1 { height: 100px; color: black; font-size: 37px; font-family: impact; background: blue; text-align: center; margin-top:0px; 

margin-bottom:0px; margin-left:0px; margin-right:0px; border-top-width:2px; } 

h2 { height: 70px; color: black; font-size: 26px; font-family: Arial, Helvetica, sans-serif; background: yellow; text-align: 

center; margin-top:0px; margin-left:0px; margin-right:0px }


-->

</style>

<style type="text/css">

ul{
list-style-type:none; 
}
li{
display:inline;
}
a{
float:center;
width:180px;
text-decoration:none;
color:white;
font-weight:bold;
background:#999900;
border-right:1px solid #FFFFFF;
}
a:hover{
background:#CCCC00;
}
</style> 

</head>

<body>

<h1>Simple stylesheet coding</h1>
<h2>Example text<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Images</a></li>
<li><a href="#">Contact</a></li>
</ul></h2>



</body>



</html>

Kraai

Senior Poster

3,981 posts since Feb 2008

Reputation Points: 76

Solved Threads: 87

1 Year Ago

thank you very much it was very helpful

chinee

Junior Poster

115 posts since Apr 2010

Reputation Points: 10

Solved Threads: 0