Grow your CSS skills. Land your dream job.

Poblems

  • # February 7, 2009 at 4:38 pm

    Hi can anyone please help

    Ive been copying the online video with the converting a mock up to css. And i am on part two where the nav changes colour when you hover over it but for some reason when i try it my nav seems to be stuck in the middle of the page and not on top of the content bg like it is on the vid.

    Can anyone help me out. I have done exactly as Chris has done on the vid regarding script…so im very puzzled !!

    I have attached an image.

    Thanks

    # February 8, 2009 at 10:05 am

    Ok so i managed to sort that problem out i think. But for some reason my last nav tab wont come up in the browser. I dont know what ive done wrong becuase it’s exactly the same as the other tabs but with diff url name ? It should come up next to The PFA !!

    Any ideas ?

    I have attached a pic again

    # February 8, 2009 at 10:33 am

    can you post a link to the page on the net?

    that way we can view it and look at the code

    ik

    # February 8, 2009 at 10:44 am

    Umm not at the moment

    Here is the css

    /* CSS Document */

    */

    /* RESETS & BASIC PAGE SETUP */
    * { margin: 0; padding: 0; }
    html {overflow-y: scroll; }
    body {
    font: 62.5 Helvetica, sans-serif;
    background: url(images/body-bg.jpg) top left repeat;
    }

    ul { list-style: none inside; }
    p { font-size: 1.2em; line-height: 1.2em; margin-bottom: 1.2em; }
    a {outline: none; }
    a img {border: none; }
    /* END RESET*/

    /* TOOLBOX */
    .floatleft { float: left; }
    .floatright { float: right; }
    .clear { clear: both; }
    /* END TOOLBOX */

    /* STRUCTURE AND STUFF */
    #page-wrap {
    width: 980px;
    margin: 0 auto;
    background: url(images/content-bg.jpg) repeat-y;
    }

    #main-content {
    padding: 40px 60px 40px 60px;
    }
    ul#nav {
    }
    ul#nav li {
    display: inline;
    }
    ul#nav li a {
    display: block;
    height: 87px;
    text-indent: -9999px;
    float: left;
    }
    ul#nav li.home a {
    width: 193px;
    background: url(images/nav-home.jpg) bottom center no-repeat;
    }

    ul#nav li.forum a {
    width: 118px;
    background: url(images/nav-forum.jpg) bottom center no-repeat;
    }

    ul#nav li.playing-abroad a {
    width: 175px;
    background: url(images/nav-abroad.jpg) bottom center no-repeat;
    }

    ul#nav li.education a {
    width: 131px;
    background: url(images/nav-education.jpg) bottom center no-repeat;
    }

    ul#nav li.PFA a {
    width: 119px;
    background: url(images/nav-pfa.jpg) bottom center no-repeat;
    }

    ul#nav li.contact a {
    width: 244;
    background: url(images/nav-contact.jpg) bottom center no-repeat;
    }
    ul#nav li a:hover {
    background-position: top;
    }

    #footer {
    min-height: 94px;
    background: url(images/footer.jpg) no-repeat;
    }

    AND HERE IS THE HTML

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
    <html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    </head>

    <body>

    <div id="page-wrap">

    <ul id="nav">
    <li class="home"><a href="#">Home</a></li>
    <li class="forum"><a href="#">Forum</a></li>
    <li class="playing-abroad"><a href="#">Playing Abroad</a></li>
    <li class="education"><a href="#">Education</a></li>
    <li class="PFA"><a href="#">The PFA</a></li>
    <li class="contact"><a href="#">Contact Us</a></li>

    </ul>

    <div id="main-content">

    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    Why do we use it?

    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using ‘Content here, content here’, making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for ‘lorem ipsum’ will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>

    </div>

    <div id="footer">
    </div>

    </body>
    </html>

    # February 8, 2009 at 11:00 am

    thanks for the code, but as there are no images I cant see anything that will happen……

    thats why having your page on the net can help us help you

    [img]http://www.honeycomb-web.co.uk/phpTesting/grass.jpg[/img]

    # February 8, 2009 at 11:35 am

    Righ ok i understand i think.

    Try

    http://www.footballsmylife.com

    # February 8, 2009 at 11:52 am
    "hal8" wrote:
    Righ ok i understand i think.

    Try

    http://www.footballsmylife.com

    ok looks like your ul has indented try bringing it back to the right abit, change this:
    ul#nav {
    }

    to this:
    ul#nav {
    margin-left:-40px;
    }

    -40px is bang on for me in FF on a 1024x768px 17" monitor

    # February 8, 2009 at 12:05 pm

    Hey thanks for the tip. It works fine in my FF too but not in my ie or opera. Do you know if there is a fix or something for it ?

    Thanks again anyway

    # February 8, 2009 at 12:16 pm
    "hal8" wrote:
    Hey thanks for the tip. It works fine in my FF too but not in my ie or opera. Do you know if there is a fix or something for it ?

    Thanks again anyway

    works the same on FF3, IE7&8, Opera, chrome & safari here
    IE6 however is a problem

    I changed the

    Code:
    ul#nav li.contact a {
    width: 241px; //changed this number
    background: url(http://www.footballsmylife.com/images/nav-contact.jpg) bottom center no-repeat;
    }

    it is as close as I can get it to perfection:

    # February 8, 2009 at 12:33 pm

    Thanks…..but it does still seem to be the same in my opera. I still have ie 6 on the pc so its also messed up on that one !!

    # February 8, 2009 at 2:30 pm
    "hal8" wrote:
    Thanks…..but it does still seem to be the same in my opera. I still have ie 6 on the pc so its also messed up on that one !!

    what about the other browsers?

    you may have to do an overhaul with some different sizes for IE6

    # February 9, 2009 at 7:36 am

    In the other browsers its not in coreect place too. I downloaded ie 8 and its wrong place in there too. So only in right place in FF !!

    I dont understand why it wont just fit in where it should be if the page wrap is correct !! :(

    Rob
    # February 10, 2009 at 7:10 pm

    hey dude – not looked at the code… my eyes are hurtin, but just tryin to catch up on the forums lol So if what I say is rubbish, just dont listen :D

    Make sure you position everything with "position:relative/absolute; left:XXpx; top:XXpx;" If you use margin or padding to position its going to be out, cross browser, and will cause you problems.

    Thats all… if its no help, move along please :)

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

You must be logged in to reply to this topic.

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