Creating a Monthly Chart with columns and hover effect

mnkhaki · 10-29-2011, 10:01 AM

Hello!

I am trying to create a monthly chart... however, the chart has its own css file, but it does not seem to match for some reason.

For example, the chart in the main site is
http://www.mombasajamaat.org/prayer/main.php?cmd=jan

But on its own its as follows:
http://www.mombasajamaat.org/prayer/01-january.php

In the top link, it seems to break down (width is set at 680).

Would anyone be able to find out where i went wrong? The separate CSS file is as follows:

Code:

a:link {
	color:#666666;
	text-decoration:none;
}

a:hover {
	color:#ffffff;
	background-color:#FF3300;
	text-shadow:#FF3300;
	text-decoration:none;
}

#monthcontainer {
width: 680px;
}

.C1title {
width: 50px;
float:left;
text-align:center;
border-bottom:thin #CCCCCC solid;
}

.C2title, .C3title, .C4title, .C5title, .C6title, .C7title {
width: 104px;
float:left;
text-align:center;
border-left:thin #CCCCCC solid;
border-bottom:thin #CCCCCC solid;
}

.date {
width: 50px;
float:left;
text-align:center;
height:30px;
}

.imsaak, .fajr, .sunrise, .dhuhr, .sunset, .maghrib {
width: 104px;
float:left;
text-align:center;
border-left:thin #CCCCCC solid;
height:30px;
}

#monthend {
clear: both;
}

1. While we're on this topic - when I use the HOVER effect to highlight specific line, with a BG Color of FF3300 and text color of FFFFFF it won't work!
2. Also, the header (in blue) wont vertically align despite adding "vertical-align:middle;", how come?

Arbitrator · 10-29-2011, 10:50 AM

Quote:

Originally Posted by mnkhaki

I am trying to create a monthly chart... however, the chart has its own css file, but it does not seem to match for some reason.

For example, the chart in the main site is
http://www.mombasajamaat.org/prayer/main.php?cmd=jan

This is not a correctly written HTML file.

When you import HTML from 01-january.php, you need to make sure the

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

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

code is imported into the head element of the document. Right now, you're improperly importing those link elements into the middle of the document source code.

01-january.php also contains body and html element tags that are being improperly imported into the middle of the document resulting in multiple body elements being present in the document (when there should be one) and extraneous end tags.

Your code has other major problems too. For example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

appears in the middle of the document when it should appear at the beginning of it.

Another issue is that you're incorrectly using div, a, and span elements in place of table elements to represent your calendar.

I'd suggest fixing the placement of the document type declaration, running your code through the W3C Validator (http://validator.w3.org/), fixing all of the errors the validator points out, and converting your calendar to use HTML table elements before trying further to troubleshoot your code.

Quote:

Originally Posted by mnkhaki

1. While we're on this topic - when I use the HOVER effect to highlight specific line, with a BG Color of FF3300 and text color of FFFFFF it won't work!

This may be related to the link element problem mentioned above. The first style sheet, maincss.css, is linked (a second time) within the head element as it should be, but the second style sheet, prayer.css, is only referenced from an incorrect location, so that style sheet may be being totally ignored.

Quote:

Originally Posted by mnkhaki

2. Also, the header (in blue) wont vertically align despite adding "vertical-align:middle;", how come?

The vertical-align property has no effect on block-level elements such as div. It only has the effect you're thinking of when applied to table cell elements (i.e., th elements, td elements, and elements with display: table-cell;).

mnkhaki · 10-29-2011, 11:14 AM

Quote:

Originally Posted by Arbitrator

This is not a correctly written HTML file.

Thank you - I am going through the validator as I type this.

However, I have issues with one thing - when I put includes. Excavator was really kind to explain how to have include files, but it went over me.

Here's the problem, which is why I get all these errors.

I use Dreamweaver to create my pages.
I also use include files in my pages.

When I create an include page, in Dreamweaver I need to include the CSS files to see the design and how it will look.

The same CSS files will re-appear when you look at VIEW SOURCE in the main file, so it shows multiple repetitions.

Quote:

This may be related to the link element problem mentioned above. The first style sheet, maincss.css, is linked (a second time) within the head element as it should be, but the second style sheet, prayer.css, is only referenced from an incorrect location, so that style sheet may be being totally ignored.

Exactly - linking is a major problem when I use Dreamweaver.

Quote:

The vertical-align property has no effect on block-level elements such as div. It only has the effect you're thinking of when applied to table cell elements (i.e., th elements, td elements, and elements with display: table-cell;).

Do you mean I revert back to table, td's and tr's for this particular instance?

mnkhaki · 10-29-2011, 02:40 PM

Ok, I have made a few changes and this thread won't apply anymore! Thanks