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 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Feb 2009
    Location
    Chicago IL
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Please Help: li DIVs not properly displaying hyperlinks

    Hi, thanks for taking the time to read this. I'm new here and thought I'd post this question because the results I'm finding on Google aren't quite working for me.

    So I am building a website that only uses CSS - not running any Javascript or PHP - and this website requires a calendar. I've assimilated and customized a CSS calendar but the problem I'm having is that I want to be able to make the information inside each day a clickable, hoverable, hyperlink. So far, I can get the text to show up as a link, but there's no change on hover and you can't click it. What's going on? How can I fix this?

    Here's the page I'm working on:
    https://www.fundamentalforce.net/por...lifeforcearts/

    None of the menu links go anywhere yet as I got stuck on the calendar. Here is the css for the page:
    https://www.fundamentalforce.net/por...arts/style.css

    and here's the code for the calendar:

    /* weekly calendar */

    #thisweek
    {padding:0;
    width: 62.5em; min-height: 300px;
    z-index: -1;
    position: relative;
    margin-left: -15px;
    margin-top: -15px;
    font:1em Verdana, Arial, Helvetica, sans-serif;
    background: url(calendar/images/xbg.jpg) top center no-repeat;}

    #thisweek ol.calendar
    {display:inline;
    width:62.5em;margin:0 auto;display:block; min-height: 200px;
    background: url(calendar/images/xcal-bg.png) top left repeat; padding: 0px 0 0 0px;}

    #thisweek li
    {list-style:none;}

    #thisweek p.link
    {text-align:center;display: block;}

    #thisweek h1
    {display: block; width: 100%;height:50px;
    background:url(img/thisweek.png) bottom center no-repeat; margin: auto;
    }

    /* weekly calendar - day names */

    li#names li {
    width:7.5em;
    height:1.5em;
    float:left;
    margin:.2em;
    padding:.2em;
    overflow:auto;
    background: url(calendar/images/cal-bg.png) bottom right repeat;
    color: #000000;
    font-align: center;
    font-variant: small-caps;
    }

    /* weekly calendar - day styles */

    li li {
    width:7.5em;
    height:7.5em;
    float:left;
    margin:.2em;
    padding:.2em;
    overflow:auto;
    background: url(calendar/images/day-bg.png) bottom right no-repeat;
    }

    /* weekly calendar - day styles */

    li li p {font-size:.6em; display:block;}
    li li ol {width:auto;}
    li li ul li,
    li li ol li {font-size:.6em; display:block; height:auto; width:auto; background: none; margin:0;padding:.2em 0; float:none;}
    #li li ol li a
    {display: block; color: #000000; text-decoration: none;}

    #li li ol li a:hover, li:hover
    {display: block; color: #983ac9;}


    and the html for the calendar section:


    <div id="thisweek">
    <ol class="calendar" start="1">

    <li id="names">



    <ul>

    <li>Sunday</li>

    <li>Monday</li>

    <li>Tuesday</li>

    <li>Wednesday</li>

    <li>Thursday</li>

    <li>Friday</li>

    <li>Saturday</li>

    </ul>

    </li>



    <li id="thismonth">



    <ul>

    <li>22 <p><a href="#">Shamanic Training Program: Winter 2009</a><br><br>OTO Gnostic Mass</p></li>

    <li>23 <p>Individual Sessions: Shamanic Soul Retrieval or Divination &amp; Healing<br><br>

    Chicago Astrology Meetup</li>

    <li>24</li>

    <li>25 <p>Introduction to Expressive Yoga Dance<sup>TM</sup></li>

    <li>26 <p>Chicago Mythology Roundtable: A Monthly Exploration of Mythology</p></li>

    <li>27</li>

    <li>28 <p>Spontanea: spirit dance and sound healing concert</p></li>

    </ul>

    </li>




    I need to implement this calendar on a different part of the site to display the entire month as well, so I'd like to get this figured out as neatly as possible...
    Thank you for any help!

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    I don't see any calendar in that given link.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Feb 2009
    Location
    Chicago IL
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    I don't see any calendar in that given link.
    If you click the link for the website, there is a weekly calendar that gets displayed right below the top level menu and sub menu. It's pretty much the only thing on the page right now.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,744
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello AurielRene,
    Your not forming your ul correctly... have a look at what the validator says about your code.
    Fix those errors and you'll likely fix your problem.

    Check out the links about validation in my sig below.



    ...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New to the CF scene
    Join Date
    Feb 2009
    Location
    Chicago IL
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello AurielRene,
    Your not forming your ul correctly... have a look at what the validator says about your code.
    Fix those errors and you'll likely fix your problem.

    Check out the links about validation in my sig below.



    ...
    Actually, when I ran my code through the W3C validator yesterday, the only thing it pulled up was a font-align: center property.... I didn't get any hits back about the ul at all. And it gives me the same results tonight : 296 li#names li Property font-align doesn't exist : center

    So all it's complaining about is how I'm trying to align the font for the days of the week, not anything about the calendar day entries themselves. And, after changing that font property, the appearance of the hyperlinks remains the same. So, I don't see how that affects the hyperlinks inside of a different part of the div.

  • #6
    New to the CF scene
    Join Date
    Feb 2009
    Location
    Chicago IL
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello AurielRene,
    Your not forming your ul correctly... have a look at what the validator says about your code.
    Fix those errors and you'll likely fix your problem.

    Check out the links about validation in my sig below.



    ...
    Can you explain how I am not forming the UL correctly please?

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,744
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by AurielRene View Post
    So all it's complaining about is how I'm trying to align the font for the days of the week, not anything about the calendar day entries themselves. And, after changing that font property, the appearance of the hyperlinks remains the same. So, I don't see how that affects the hyperlinks inside of a different part of the div.
    Are we looking at the same page?
    Here is the link that shows the errors - http://validator.w3.org/check?verbos...feforcearts%2F

    The page I am looking at is what you linked to: https://www.fundamentalforce.net/por...lifeforcearts/
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    New to the CF scene
    Join Date
    Feb 2009
    Location
    Chicago IL
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Are we looking at the same page?
    Here is the link that shows the errors - http://validator.w3.org/check?verbos...feforcearts%2F

    The page I am looking at is what you linked to: https://www.fundamentalforce.net/por...lifeforcearts/
    Wow this is way different than the results I got back before.... from the same validator even. I'm going through and fixing these, hope it fixes my problem.

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,744
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by AurielRene View Post
    Wow this is way different than the results I got back before.... from the same validator even. I'm going through and fixing these, hope it fixes my problem.
    Sometimes when validating a site you've validated before you need to click the ReValidate button. They seem to cache your previous version.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    New to the CF scene
    Join Date
    Feb 2009
    Location
    Chicago IL
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Still having problems...

    Okso,
    I took a break from the page hoping that I would get a fresh perspective on the problem. Yesterday I started back up with it, cleaned up the html, validated and re-validated it a dozen times and... I'm still having the same problem. I've been poring through my css trying to eliminate the issue but it is still evading me. I went ahead and added some more content at the bottom of the page (as originally intended) only to discover that hyperlinks aren't functioning there, either!!?? I've never encountered this before, and I've built several sites very similar to this, so I am stumped... I'm thinking that it has to be something to do with the code for the menu navigation maybe? It uses a negative text indent to keep the text from showing up over the button graphics. I tried removing the indent but it didn't affect the hyperlinks in the calendar or the rest of the page (I didn't see how it would, but I'm grasping at straws here). Arrrhhh please help!

    validation page for html
    validation page for css
    the page
    the css

    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
    •