external css

[chinee]

urgent problem i have this code in external css for paragraph but what is stated in the paragraph is not appearing like the color and font size. here is the code.

.content{
	width:920px;
	height:1000;
	background-color:#FFFAF0;
	background-repeat:repeat-y;
	padding:5px;
	
	.p{
						align:center;
						color:#800000;
						text-align: justify;
						font-family: Arial, Helvetica, sans-serif;
						font-size: 16px;
			}
	img.floatLeft{
						float:left;
						margin: 4px	
						}
							
			img.floatRight{
						float:right;
						margin: 4px
						}

}

[hielo]

If all you have in your HTML is <p> then your css should NOT have that leading period in front of the "p".

If your markup is <p class="p"> THEN it is OK to have .p{---}

[chinee]

even though i put in the <p class="p"> the font and color still has not changed

[chinee]

i am trying to validate but that the table is not suppose to have width like this
this is at the content and footer. is this suppose to be written in the css file and if so how.

<tr class="menu" align="center"> 
    <td width=10%> 
      <div align="center"><a href="index.html">Home</a></div></td>
     <td width=10%> 
      <div align="center"><a href="about.html">About us</a></div></td>
    <td width=10%> 
      <div align="center"><a href="gallery.html">Gallery</a></div></td>
	  <td width=10%> 
      <div align="center"><a href="sponsors.html">Our Sponsors</a></div></td>
<td width=10%> 
      <div align="center"><a href="contact.html">Contact</a></div></td>
  </tr>
</table>

[Arkinder]

You are missing a right brace, }, at the end of your .content rule. Also, align: center; does not exist in CSS - align is a deprecated HTML attribute.

Regards, Arkinder

[Arkinder]

Yes it should be written in CSS.

table {
    text-align: center; /* this will replace the align: center; you have on your div. Note: it is not centering the div, but the a inside of it. */
}
.menu td { /* this selects all td that are inside of the element with the class menu */
    width: 10%;
}

Now your HTML is,

<table>
	<tr class="menu">
    	<td> 
    	  <div><a href="index.html">Home</a></div></td>
    	<td> 
    	  <div><a href="about.html">About us</a></div></td>
    	<td> 
    	  <div><a href="gallery.html">Gallery</a></div></td>
		<td> 
    	  <div><a href="sponsors.html">Our Sponsors</a></div></td>
		<td> 
    	  <div><a href="contact.html">Contact</a></div></td>
  	</tr>
</table>

Regards, Arkinder

[chinee]

there are four braces on each side in .p and i put the table in css like the e.g and removed the center and width from html but everything just shifted left.
in css it was done for both nav and footer.

nav{
	width:100%;
	height:60px;
	margin:0px;
	padding:0px;		
	background-color:#FFD700;
	background-repeat:no-repeat;
	table{
		text-align: center;
	}
	.menu td{
		width: 10%;
	}
}

<div class="footer">
				<table>
					
  <tr class="menu"> 
    <td> 
      <div><a href="index.html">Home</a></div></td>
     <td> 
      <div><a href="about.html">About us</a></div></td>
    <td> 
      <div><a href="gallery.html">Gallery</a></div></td>
	  <td> 
      <div><a href="sponsors.html">Our Sponsors</a></div></td>
		<td> 
      <div><a href="contact.html">Contact</a></div></td>
  </tr>
</table>
			</div>

[hielo]

On your original post you have:

.content{
  ...
  .p{
     ...
   }
}

you cannot NEST those rules. If what you are trying to express is "the .p within .content" then the syntax should be:

/* notice that it is TWO separate rules*/

.content{
 /* this applies ONLY to .content*/
}

.content .p{
    /* this applies only to element with class .p contained within .content */
}

[chinee]

ok this is how i have it what is wrong with it now

.nav{
	width:100%;
	height:60px;
	margin:0px;
	padding:0px;		
	background-color:#FFD700;
	background-repeat:no-repeat;
	table{
		text-align: center;
		}
	
	.menu td{
		width: 10%;
		}
}

.content{
	width:920px;
	height:1000;
	background-color:#FFFAF0;
	background-repeat:repeat-y;
	padding:5px;
	
	.content .p{
						color:#800000;
						text-align: justify;
						font-family: Arial, Helvetica, sans-serif;
						font-size: 16px;
			}
	img.floatLeft{
						float:left;
						margin: 4px	
						}
							
			img.floatRight{
						float:right;
						margin: 4px
						}
						
	
}

.footer{
	width:920px;
	height:80px;
	background-color:#FF69B4;
	background-repeat:no-repeat;
	table{
		text-align:center;
	}
	.menu td{
		width: 10%;
		}

}

[drjohn]

Read this very carefully

You can not put one style definition nested inside another one!!!!

So CSS that looks anything like this

.something {

.someotherthing{

}

}

is AUTOMATICALLY wrong and totally ignored.

Each style has to be defined separately

.something {

}

.someotherthing{

}

.anotherthing {

}

Is that clear enough? In other words your styles as given above are totally and utterly wrong.

[chinee]

ok thanks for the clue problem solved

[chinee]

ah ah ah ok i just put the css file into a folder and all of a sudden my background image is gone can someone tell me why.

[chinee]

ent with an external css file once you link it to another html file like about it is suppose to work so how come it is not working

[chinee]

ok i got the css link to work but i still don't understand why the background that was showing before not showing now

[Arkinder]

One moment I'm working on something to explain it to you.

[Arkinder]

I would recommend going through this tutorial.

Also, have a look at this while reading the rest of this post. I've included folders with examples for each part.

Start with the site folder (root folder). This is the folder holding of the documents for your web site (HTML, CSS, JavaScript, images, etc.) Inside of this folder you see they have index.html - this is your home page. They are using the .htm extension, it is exactly the same as .html. When going to a website the document named index is what the user will see first. So when you go to http://www.daniweb.com/ you're actually going to http://www.daniweb.com/index.php

Part 1

Next we have a folder called images. As the name implies this folder is where all of the web site's images will go. When linking to an image from your index.html page, or any web page inside of your site folder that is not in another folder, it's as easy as images/nameOfImage.jpg For example:

<img src="images/nameOfImage.jpg" alt="Description of image." />

Part 2

Next there is a group of HTML files. These are the other pages in your site, such as: about.html, contact.html, news.html, etc. In the description it says "these files may be housed in folders". Which is very true, so let's say you made another folder called pages and placed the three HTML documents I mentioned earlier in it. Now inside of your site folder you will see index.html, a folder named images, and a folder named pages. So let's say that you want a link in your navigation to take the user to the about.html page. Simply putting

<a href="about.html">About Us</a>

will not work. The page index.html will search for about.html, but all it will find are the folders/files in the same folder that it is in. In other words it finds a folder named images and a folder named pages, but no about.html page. We moved the about.html page into a folder called pages. about.html is not in the same folder as index.html, but the folder pages is. So to link to about.html we have tell the browser that it's inside of the pages folder.

<a href="pages/about us.html">About Us</a>

Part 3

Lastly, it says "Other folders may contain more html files and image folders", or in your case CSS files.

<link rel="stylesheet" type="text/css" href="css/gen.css" />

Once again, since you're putting the file gen.css in the folder css, simply putting href="gen.css" will not work. You can't put href="css/gen.css" either, because there isn't a folder named css inside of the pages folder. Now let's say that you're trying to link to a CSS file from your about.html page. You have to go back a folder to reference the css folder.

<link rel="stylesheet" type="text/css" href="../css/gen.css" />

The ../ takes you out of the pages folder, and into the site folder. You would reference an image the same way.

<img src="../images/nameOfImage.jpg" alt="Description of image." />

or if your linking to your index.html page.

<a href="../index.html">Home</a>

To take that a step further, let's say you need to reference a background image from your gen.css file.

body {
    background-image: url('../images/background.jpg');
}

The ../ is taking you out of the css folder, images/ is taking you into the images folder, and background.jpg is file you are linking to.

If you would like anything explained further feel free to ask.

Regards, Arkinder

[chinee]

thank you very much that was helpful