Grow your CSS skills. Land your dream job.

Happy New Year 2010 – and please help

  • # December 31, 2009 at 9:21 am

    Hi people, and especially thanks to Chris for this wonderful forum.

    I have a massive project which is deadlined for 14th January if I live that long! You’ll see I am stuck at a ridiculously early stage.

    CSS code below. URL is http://lilboh-nfl.dnsalias.com/trich/_w … demenu.htm

    I’m sure you professionals are going to scream!

    Basically this should be a simple menu with png backgrounds for each item, varying on hover.

    Problems are

    1. On refresh the word "home" appears unformatted briefly and
    2. Width is not working

    PLEASE HELP!!!! If I can’t get cell 1 of the menu working, I’m not hopeful for meeting my full site rewrite deadline for 14th January 2015, let alone 2010.

    Thank you and happy new year!
    Neo

    /*


    HOME TABLE STYLES


    */

    /* ‘home’ table style. */
    table.home {height:100%; width:100%;
    font-color:#44a4ce;
    font-size: 30px;
    text-align:left;
    text-decoration: none;
    }

    /* Style for ‘home’ cell HEADER (hover) */
    th.home:hover, th.home-hover, th.LAYER.home:hover, th.ILAYER.home:hover
    height:100%;
    width 100%;
    text-decoration: none;

    }

    /* Style for ‘home’ cell HEADER */
    th.home, th.LAYER.home, th.ILAYER.home
    height=100%;
    {background-image:url(2SB1.png); background-repeat:no-repeat;
    text-align:left;margin-top: 10px; margin-left: 10px; padding-bottom: 40px;
    text-decoration: none;
    font-size: 30px;
    }

    /* Style for ‘home’ cell (hover) */
    td.home:hover, td.home-hover, td.LAYER.home:hover, td.ILAYER.home:hover
    {background-image:url(2SB2.png); background-repeat:no-repeat;
    text-align:left;margin-top: 10px; font-size: 30px;
    text-decoration: none;
    padding-bottom: 40px;font-color:#993399;
    }

    /* Style for ‘home’ cell */
    td.home, td.LAYER.home, td.ILAYER.home
    {height=100%;
    background-image:url(2SB1.png); background-repeat:no-repeat;
    text-align:left;margin-top: 10px; font-size: 30px;
    padding-bottom: 40px;
    position: absolute;
    height: 10%
    width: 100% }

    /*


    */

    And you can see the working page at http://lilboh-nfl.dnsalias.com/trich/_w … demenu.htm

    # December 31, 2009 at 11:23 am

    Do you have an image of what the website layout is meant to look like? Or are you just winging it? :)

    # December 31, 2009 at 11:46 am

    I wish I was just winging it! I am quite good at winging but I’ve been given an exact desiggn (PNG) to work towards.

    I have the top menu working and could do this menu in html but want to learn to use CSS.

    Working for a charity and unfortunately there’s no budget for webdesign, but we do have a great voluntary artist, who has kindly drawn it all for me and insists it is EXACTLY as per the drawing.

    Nice!

    Thanks for replying tho. I just really want to know how to get the button png to display fully in the cell and cannot understand why width: 100% does not work!

    Thanks

    Regards Neo

    # December 31, 2009 at 11:58 am

    Ok well, could you either upload or email me the png? jamyg88@gmail.com I will help you with whatever you need, but it would be easier to see what I am dealing with. I am going out now (new years party ;) ) but I’ll carry on replying tomorrow.

    Also http://www.w3schools.com/css/ would be helpful in learning css.

    # December 31, 2009 at 12:14 pm

    Thanks Jamy_za

    I hope you have a wonderful evening. I’m going to work through the tutorial and I’ve decided to do this the way I know how to do it (using html), then change it to a template using CSS after the deadline has passed. Otherwise I am going to drive myself and possibly you too, crazy.

    Thanks a million
    Neo

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".