Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    44
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Post Creating a Monthly Chart with columns and hover effect

    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?
    Last edited by mnkhaki; 10-29-2011 at 11:18 AM.

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    Quote Originally Posted by mnkhaki View Post
    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 View Post
    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 View Post
    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;).
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    mnkhaki (10-29-2011)

  • #3
    New Coder
    Join Date
    Oct 2011
    Posts
    44
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Arbitrator View Post
    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.

    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.

    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?

  • #4
    New Coder
    Join Date
    Oct 2011
    Posts
    44
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Ok, I have made a few changes and this thread won't apply anymore! Thanks


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •