Announcement

Collapse
No announcement yet.

code question

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • code question

    Hi all,

    I'm busy tweaking a bunch of pages for a future site. I have run into a code problem that I cannot seem to solve.

    This is in the category_0.html page:

    <div id='subcatIMG-block'>
    <ul>
    <li><a href="view_category.asp?cat=[CATID]"><img src="[SUB_CATEGORY_IMAGE]" alt="[SUB_CATEGORY_NAME]"></a></li>
    <!--<li><img src='/assets/images/Aviator-cat.png'></li>
    <li><img src='/assets/images/Sport-cat.png'></li>
    <li><img src='/assets/images/Aviator-cat.png'></li>
    <li><img src='/assets/images/Sport-cat.png'></li>
    <li><img src='/assets/images/Aviator-cat.png'></li>
    <li><img src='/assets/images/Sport-cat.png'></li>-->
    </ul>
    </div>

    A note to explain what is going on here: I am trying to get the subcategory images to display inline using CSS and not a table. The code above generates the <li> elements properly but dumps them all one on top of the other (CSS to follow below). If I comment out the first <li> line which is generated by the 3D template, and open up the manual <li> lines below it, it all works beautifully. I have gone temporarily blind to seeing what is wrong with the 3D code for generating the <li> elements.

    Here's the CSS which works for the manual <li> elements but not the dynamically generated ones:

    #subcatIMG-block {
    position: absolute;
    width: 860px;
    background-color: white;
    top: 270px;
    left: 220px;
    }

    #subcatIMG-block ul li {
    display: inline;
    list-style-type: none;
    margin-left: 20px;
    }

    Any help is greatly appreciated.

    Here's a link to the faulty displayed images:

    specShack

    If you bang around from that link, you will find many broken things. It's in development. I am only concerned about this single page.

    Thanks

    Dave

  • #2
    I'm sorry, but I've read your question 3 times now and I am not quite sure what you're asking. Is this code from the template file, or is it run-time generated code? Which code is generated and which is manual? You might try rephrasing the question.

    Comment


    • #3
      Sorry.

      This is the code from the template block that iterates on subcategories and generates a subcategory image for each <li>. With the exception of the <ul> and <li> elements, the code is verbatim from the template. To be clear (I hope) the codes DOES generate each item as expected. However, the CSS is piling all of the images on top of each other. In the manual code farther down, the EXACT SAME CSS code displays the items properly, (in a grid with no overlap).

      <li><a href="view_category.asp?cat=[CATID]"><img src="[SUB_CATEGORY_IMAGE]" alt="[SUB_CATEGORY_NAME]"></a></li>

      These links are things that I added to test my CSS code. They are manually created and the CSS displays them properly when they are not commented out:

      <!--<li><img src='/assets/images/Sport-cat.png'></li>
      <li><img src='/assets/images/Aviator-cat.png'></li>
      <li><img src='/assets/images/Sport-cat.png'></li>
      <li><img src='/assets/images/Aviator-cat.png'></li>
      <li><img src='/assets/images/Sport-cat.png'></li>-->

      Dave

      Comment


      • #4
        Alright I see what you mean. There are 6 or so images being generated automatically but only one is visible. I'll try to take a closer look tomorrow.

        Comment


        • #5
          You have to change your position: absolute; to position: relative; on most all of your elements and get rid of the "top" and "left" rules. Then all your images should show
          TheCartDesigner.com
          Not 3dcart Owned or Operated
          100% Independent 3dcart Expert


          Follow Us on Twitter

          Comment

          Working...
          X