This Message Forum is no longer in use

Please use the new Bravenet Help Forums FOUND HERE

General Forum
This Forum is Locked
Author
Comment
Problems with css website

Hi My Name Is Debbie And I Am having problems with cascading style sheets(css) on My web site this is my first time using css
Every thing uploads properly but when i go to view my website everything seems okay, but in stead of the title being at the upper left hand the title shows up as untitled but the ones done with no cascading style sheets shows the name of the title of the web site
Please let me know where I went wrong
any answer would be greatly apreciated
Thank You
Here is the title of my website
Http://www.bonjovionline.bravehost.com
Here is my actual html code that I created myself



Bon Jovi








B J Logo

This site is currently being updated to use css style sheets

please note all pages have not yet been converted

But you can still browse through the site



Click On door to enter site


CLICK Here to enter site



Bon Jovi Photo only compliments of(Bon Jovi
Fan Website)

Free Domain Service

Click here for more gifs for your Website














Browser: Firefox

Re: Problems with css website

You don't have a title in the upper left because it's not defined in your web page. Below is a listing from the first couple of lines in your web page. Notice that it says "untitled" between the "title" tags.

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<span style="font-weight:bold;"><title>untitled</title></span>
</head>
<body>


You other pages have titles entered correctly. In fact, the first one I looked at has the title defined twice.

Code:
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<HTML>
<HEAD>
<span style="font-weight:bold;"><title>Bon Jovi Welcome Page</title></span>
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<span style="font-weight:bold;"><title>Bon Jovi Welcome Page</title></span>
<body text="#000000" bgcolor="white" link="#000066" vlink="#000066" alink="#000066" background="bgmusic.jpg">


Using a in-line style section, like your page currently has, is fine when your initially testing. But generally, when you use style sheet, the CSS code is stored in a separate file. Your HTML files usually just link to the style sheet. This then allows you to create one style sheet, that can be shared by all your HTML pages. Then, if you make a change to one of the styles, all of your pages see the change, the next time they are viewed. You don't have to change every HTML page. Your HTML pages are then just collections of containers that contain text. The style sheet handles the structure.

I know your just starting out, so you need to get things right from the start. Your current in-line style section has multiple problems problems. When a visitors browser encounters any error, no matter how minor, the style is generally ignored. This might cause your page to look a little odd at times.

For example, your in-line style section has the following code. Where you specify the "background-repeat", the value is incorrect. If you didn't want the background to repeat, the value would be "no-repeat". A visitors browser will simply ignore that line. And, since the default is to repeat, vertically and horizontally, that is what a visitor will see.

Code:
body {
background: #E0FFFF url("indexbg.jpg");
<span style="font-weight:bold;">background-repeat: repeat-n;</span>
background-attachment: fixed;}


Then there is the section that looks like the following code. It looks like you are trying to use HTML commenting to disable a group of styles. The commenting you use is for HTML only and doesn't work with CSS. To comment something out in CSS you need to use different bracketing, "/* ..... */"

Code:
<span style="font-weight:bold;"><!--</span>
a:link {color: #000066; text-decoration: underline; }
a:active {color: #000066; text-decoration: underline; }
a:visited {color: #000066; text-decoration: underline; }
a:hover {color: #000066; text-decoration: none; }
<span style="font-weight:bold;">--></span>


Then there is this section. I'm not really sure what your trying to do here. It looks like you are trying to define how "paragraphs" are displayed within each "header" type. Or, visa versa. While either one can be done, that isn't how you do it. Those styles will be completely ignored by a visitors browser. A HTML left bracket has no place in a style section or a style sheet.

Code:
<p{font: h1 Arial, Geneva, Helvetica, sans-serif; }
<p{font: h2 Arial, Geneva, Helvetica, sans-serif; }
<p{font: h3 Arial, Geneva, Helvetica, sans-serif; }
<p{font: h4 Arial, Helvetica, Sans-serif; }


If you want some really good starter templates, with good CSS examples, you might want to try the Dynamic Drive CSS Library. It has basic layouts for almost every possible need. The examples use in-line style sections for ease in distribution, but that is easily moved to a separate file. If you need help on getting started with one of their layouts, let me know.

Browser: Firefox, Netscape, Sea Monkey, Internet Explorer, .....

OS: Solaris (Sparc,x86), Linux, XP