SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict a1nerd's Avatar
    Join Date
    Nov 2003
    Location
    san diego
    Posts
    236
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation CSS Help Needed ASAP!

    My partner created a css file for navigation on the site. For some reason i can get the links to work. How do i add the links to this css file?

    #linkList {
    }

    #linkListAdd {
    position: absolute;
    top: 10px;
    left: 23px;

    margin:0px;
    padding-top: 5px;
    }

    #linkListAdd table {
    display: block;
    margin: 0px;
    padding: 0px;

    list-style: none;
    }


    #contentLinks {
    padding: 0px;
    margin: 0px;

    width: 160px;
    }

    #nav {
    list-style: none;

    margin: 0px;
    padding: 0px;

    width: 160px;
    }

    #nav td {
    margin: 0;
    padding: 0;
    list-style-type: none;
    }


    #nav a {
    float: left;
    padding-top: 23px;
    overflow: hidden;
    height: 0px !important;
    height /**/:23px; /* for IE5/Win */
    }

    #nav a:hover {
    background-position: 0 -23px;
    }

    #nav a:active, #nav a.selected {
    background-position: 0 -23px;
    }

    #custompcs a {
    width: 160px;
    background: url("../images/button_custompcs.gif") top left no-repeat;
    }


    #prebuiltpc a {
    width: 160px;
    background: url("../images/button_prebuiltpc.gif") top left no-repeat;
    }

    #pchardware a {
    width: 160px;
    background: url("../images/button_pchardware.gif") top left no-repeat;
    }

    #webservices a {
    width: 160px;
    background: url("../images/button_services.gif") top left no-repeat;
    }

    #newestreleases a {
    width: 160px;
    background: url("../images/button_newestreleases.gif") top left no-repeat;
    }

    #upcomingreleases a {
    width: 160px;
    background: url("../images/button_upcomingreleases.gif") top left no-repeat;
    }

    #customersupport a {
    width: 160px;
    background: url("../images/button_customersupport.gif") top left no-repeat;
    }

  2. #2
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    All the links above are selected through a parent. For example, to get:
    Code:
    #nav a {
    }
    ...working, the links need to be inside a container with an id of 'nav'...

    Code:
    <div id="nav">
    <a href="/">Link</a>
    </div>
    I'm only guessing that no id's have been specified in the html, as you haven't posted it.

  3. #3
    SitePoint Addict a1nerd's Avatar
    Join Date
    Nov 2003
    Location
    san diego
    Posts
    236
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah i dont think there is here is the page http://www.poweredpc.com/testView If there is no ids in there can you show me how to add them by giving me an example.


    Should it look like this is the css file?

    #custompcs a {

    <div id="nav">
    <a href="/">Link</a>
    </div>
    width: 160px;
    background: url("../images/button_custompcs.gif") top left no-repeat;

  4. #4
    ~unplugged Ainslie X11's Avatar
    Join Date
    Feb 2005
    Location
    Langley, Virginia
    Posts
    1,013
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    css
    .nav {
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: 160px;
    }

    markup
    <div class="nav">
    <a href="#">Link</a>
    </div>


    working hard is hard work

  5. #5
    ~unplugged Ainslie X11's Avatar
    Join Date
    Feb 2005
    Location
    Langley, Virginia
    Posts
    1,013
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if your reusing the nav, it need to be a "class" ie .nav, not #nav


    working hard is hard work

  6. #6
    SitePoint Addict a1nerd's Avatar
    Join Date
    Nov 2003
    Location
    san diego
    Posts
    236
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks alot i will give that a try.

  7. #7
    SitePoint Addict operator's Avatar
    Join Date
    Aug 2004
    Location
    Bangkok
    Posts
    388
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by a1nerd
    Should it look like this is the css file?

    #custompcs a {

    <div id="nav">
    <a href="/">Link</a>
    </div>
    width: 160px;
    background: url("../images/button_custompcs.gif") top left no-repeat;
    No, it should not look like this. This begins as CSS, but then you've added html, which you cannot do. You need to seperate the HTML from the CSS in your example above. Like this:

    Here's the CSS portion:
    Code:
     #custompcs a { 
     width: 160px;
     background: url("../images/button_custompcs.gif") top left no-repeat;
    }
    And here's the HTML portion:
    Code:
     <div id="custompcs">
      <a href="/">Link</a>
      </div>


Bookmarks

Posting Permissions

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