PDA

View Full Version : CSS/HTML Linking issues?



Novice08
Oct 5th, 2009, 01:44 AM
Hello all,

I am a beginner with CSS and HTML. I am trying to learn about it and linking CSS pages to HTML. I made the following HTML document:



<html>

<head>
<link rel="stylesheet" href="styles.css" type="text/css" media="screen"/>
<title>Warped Youth</title>

</head>


<body>


<img src="images/wyindexbanner.jpg" class="bannerimage"/>



<h1> Home</h1>





<div id="rightcolumn">
<p class="firstparagraph"><strong>9/26/09</strong> Today the band landed in
San Diego, California to kick off their first tour. Tonight's show is sold out,
but be sure to check out
the <a href="tour.html"> Tour</a> section of the site for available tickets!
</p>

<p><strong>9/20/09</strong> Members Ax Westerly
and Rick Foreman were seen at a VMAs after party.

</p>



<p>
<strong>9/15/09</strong> Check out recently uploaded pictures of WY's most
recent live show <a href="media.html"> Here!</a>

</p>



</div>

<div id="leftcolumn">

<h2>Links</h2>
<ul>
<li>
<a href="bio.html"> Bios</a>
</li>
<li>
<a href="forum.html"> Forum</a>
</li>
<li>
<a href="news.html"> News</a>
</li>
<li>
<a href="tour.html"> Tour</a>
</li>
<li>
<a href="tunes.html"> Tunes</a>
</li>
<li>
<a href="shop.html"> Shop</a>
</li>
<li>
<a href="media.html"> Media</a>
</li>
<li>
<a href="contact.html"> Contact</a>
</li>
</ul>
</div>
</body>
</hmtl>



And I am trying to link it to this CSS document but for some reason it is not working. For hours I have been trying to solve this problem and cannot seem to. This is the CSS:



body {
****** font-family: georgia;
******
font-size: 20px;
******
color: white;
******
background-color: black;
****
*
**** }






h1{
***** font-family: verdana;
*****
font-size: 120%;
*****
color: red;
**
}




.firstparagraph {

***** font-size: 90%;
*
********
***** }



#leftcolumn{
**width: 600px;
***
****** margin-right: 25px;
**
******* float: left;
******
}


#rightcolumn{

******* *
** width: 300px;
**********
* margin-left: 25px;
**
********* float: right;
**********
* }
****


#navigation ul li {
*******
*****
*********** width: 100px

*********** height: 25px;
**********
* float: left;

}



Any advice would be amazing and greatly appreciated!

Excavator
Oct 5th, 2009, 01:58 AM
Hello Novice08,
This line <link rel="stylesheet" href="styles.css" type="text/css" media="screen"/> is pointing to styles.css in the same directory as your index.html file.

I'm not sure what all the *'s are in your CSS. That could be part of your problem...

Run your html markup and CSS through the validators. That might shed some light on the problem.
See links in my sig below about validating.

Novice08
Oct 5th, 2009, 02:39 AM
Thank you for responding.

The CSS file is in the same folder as the HTML file if that's what you mean?

The stars are not in my actual CSS file, they showed up when I added spaces to make the format more readable when I posted here.

I will try the validation though. Thank you for repsonding.


EDIT:

This is the reply the validator gave me and I honeslty have no idea what it means....

Lexical error at line 1, column 2. Encountered: "" (0), after : "" body {( ������ font-family: georgia;( ������ font-size: 20px;( ������ color: white;( ������ background-color: black;( ����( ����� }( ( ( ( ( h1{( ����� font-family: verdana;( ����� font-size: 120%;( ����� color: red;( �� }( ( .firstparagraph {( ( ����� font-size: 90%;( ���������( ����� }( ( leftcolumn{( �����������( �� ���� � width: 600px;( ��������� margin-right: 25px;( ��������� float: left;( ������ }( ( rightcolumn{( ( ������� ��� width: 300px;( ����������� margin-left: 25px;( ����������� float: right;( ����������� }( ����( ( navigation ul li {( ������������( ����������� width: 100px( ����������� height: 25px;( ����������� float: left;( }(

Scriptet
Oct 5th, 2009, 06:33 PM
I don't think the forum added the stars, they or something else representing the stars are in your file, this is what the validator is seeing also and speaking out about.

Do you have a link to the file, or what editor are you using, maybe the white-space is being converted or something.