Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS navigation problem

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #27114
    bartleby
    Participant

    Hi. I followed the screencast on going from PSD to HTML and it was great. My only problem is that I have tabs which also are a part of the rounded corners for the top portion of the page that aren’t displaying. I wish I could point you to a live site so you could better help me but all I have is the HTML CSS and the attched screenshot of what the site looks like rendered in the browser. If anyone could point me in the right direction I would be very grateful. Thanks a lot.

    Code:

    Blacksmith’s Fire


    Praesent id justo in neque elementum ultrices. Proin mattis lacinia justo. Curabitur
    justo non orci. Aliquam id dolor. Excepteur sint occaecat cupidatat non proident,
    sunt in culpa qui officia deserunt mollit anim id est laborum. Suspendisse nisl.
    Duis viverra diam non justo. Ut enim ad minim veniam, quis nostrud exercitation
    ullamco laboris nisi ut aliquip ex ea commodo consequat. Quisque tincidunt scelerisque
    libero. Curabitur vitae diam non enim vestibulum interdum. bibendum
    ullamco laboris nisi ut aliquip ex ea commodo consequat. Quisque tincidunt scelerisque
    libero. Curabitur vitae diam non enim vestibulum interdum. bibendum

    And the CSS

    Code:
    /*RESETS & BASIC PAGE SETUP*/
    * {
    margin: 0;
    padding: 0;
    }
    html { overflow-y: scroll;}
    body {
    background: #eee url(images/body-bg.jpg) repeat;
    font: 62.5% Palatino,”Palatino Linotype”,Georgia, serif;
    color: #979797;
    }
    ul { list-style: none inside; }
    h1 { font-size: 2em; }
    p {
    font-size: 1.2em;
    line-height: 2em;
    width: 575px;
    margin-bottom: 1.2em;
    }
    a {
    text-decoration: none;
    outline: none;
    }
    a img {
    border: none;
    }
    /*END RESET*/
    /*STRUCTURE AND MICELLANEOUS*/
    #page-wrap {
    background: url(images/content-bg.jpg) repeat-y;
    margin: 0 auto;
    width: 979px;
    }
    #main-content {
    padding: 30px 60px 30px 60px;
    }
    #header {

    }
    #footer {
    background: url(images/footer-bg.jpg) no-repeat;
    min-height: 80px;
    color: #aaa;
    }
    #footer p {
    padding: 30px 60px 0 60px;
    }
    /*END STRUCTURE*/
    /*NAVIGATION*/
    ul#main-nav {

    }
    ul#main-nav li {
    display: inline;
    }
    ul#main-nav li a {
    display: block;
    text-indent: -9999px;
    float: left;
    height: 107px;
    }
    ul#main-nav li.home a {
    background: url(images/nav-home.jpg) bottom center no-repeat;
    width: 254px;
    }
    ul#main-nav li.about a {
    background: url(images/nav-about.jpg) bottom center no-repeat;
    width: 170;
    }
    ul#main-nav li.gallery a {
    background: url(images/nav-gallery.jpg) bottom center no-repeat;
    width: 167px;
    }
    ul#main-nav li.recent-work a {
    background: url(images/nav-work.jpg) bottom center no-repeat;
    width: 169px;
    }
    ul#main-nav li.contact a {
    background: url(images/nav-contact.jpg) bottom center no-repeat;
    width: 206px;
    }
    ul#main-nav li a:hover {
    background-position: top center;
    }

    /*END NAVIGATION*/

    #67789
    AshtonSanders
    Participant

    Hi Bartly, I don’t see tabs at all.

    Could you post an image of what it’s supposed to look like?

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.