Announcement

Collapse
No announcement yet.

Bottom links not wrapping

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

  • Bottom links not wrapping

    We have links of Extra pages at the bottom of the site.
    If we only have a few, it works fine. However as we add more links we are exceeding the limit width of one line.
    This causes individual link names to wrap within their own cells which does not look good. Would be better if the whole row will wrap into a 2nd row.
    I am not sure if there is a solution for this but I thought I would ask.
    If we use nowrap then the frame stretches.
    Does anyone have ideas of how to break the links into a 2nd row? Thank you.
    Current code is:
    Code:
                        <!--START: FRAME_LINKS-->
                          <table border="0" cellspacing="0" cellpadding="0">
                            <tr>
                              <!--START: LINKS-->
                              <!--START: LINK_FORMAT-->
                              <td><a href="infopage.asp?page=[link_id]&extra=1" class="menu-bottom" target="[link_target]">
    							[link_name]</a></td>
                              <td style="padding:0px 8px;" class="icon2">|</td>
                              <!--END: LINK_FORMAT-->
                              <!--END: LINKS-->
                            </tr>
                          </table>
                          <!--END: FRAME_LINKS-->

  • #2
    Did you ever get an answer to this? I have the same problem. We have lots of links, and I would like to have them go from 1 line to multiple lines.

    Welcome to VeilShop.com - Bridal Veils, Headpieces, and More!

    Comment


    • #3
      You may try to have all the links + the separator be put into a single <td> cell. It looks like it will create a new <td> for each of the links and each of the separators. If it was in one, it should wrap within the cell.

      Code:
                          <!--START: FRAME_LINKS-->
                            <table border="0" cellspacing="0" cellpadding="0">
                              <tr>
                                <!--START: LINKS-->
                                <!--START: LINK_FORMAT-->
                                <td>
                                      <a href="infopage.asp?page=[link_id]&extra=1" class="menu-bottom" target="[link_target]">
      			         [link_name]</a><span style="padding:0px 8px;" class="icon2">|</span></td>
                                <!--END: LINK_FORMAT-->
                                <!--END: LINKS-->
                              </tr>
                            </table>
                            <!--END: FRAME_LINKS-->
      Last edited by vswebdesign; 01-29-2013, 04:37 PM.
      Joanne Barker
      VS Web Design
      [email protected]

      Comment


      • #4
        You should get rid of the table and code this as a list. It is a list so that makes more since.

        **Note: I did not test this code. There may be typos :-)**

        Template Code:
        Code:
        <!--START: FRAME_LINKS-->
        <!--START: LINKS-->
        <ul>
        <!--START: LINK_FORMAT-->
        <li><a href="infopage.asp?page=[link_id]&extra=1" class="menu-bottom" target="[link_target]">[link_name]</a></li>
        <!--END: LINK_FORMAT-->
        </ul>
        <!--END: LINKS-->
        <!--END: FRAME_LINKS-->
        3dcart adds the following DIV code before and after the links section when the page is generated, which is fairly new behavior. It's super handy for easy styling.

        Code:
        <div id="FRAME_LINKS">
        </div>
        Because of the FRAME_LINKS div you can style the links easily, example below.

        Code:
        #FRAME_LINKS {
        max-width: 800px;
        margin: 0 auto;
        }
        
        #FRAME_LINKS ul{
        list-style:none;
        }
        
        #FRAME_LINKS li{
        display: inline;
        margin-left: 10px;
        }

        Comment


        • #5
          tennesseecheesecake.com, Thank you for taking the time for the mini lesson.

          I will test and report back.

          Comment


          • #6
            Bottom Footer menu links

            Finally got this updated today as I needed to add more items to the links. Thank you to tennesseecheesecake.com

            The list works like a charm. here is the final code:
            for the DOT use the Ascii code & #149 ; (without the spaces)
            Code:
            <div id=frame_links>                          
            <!--START: FRAME_LINKS-->
            <!--START: LINKS-->
            <ul>
            <!--START: LINK_FORMAT-->
            <li><a href="infopage.asp?page=[link_id]&extra=1" class="menu-bottom" target="[link_target]">•&nbsp;&nbsp;[link_name]</a><span style="padding:0px 5px;" class="icon2">•</span></li>
            <!--END: LINK_FORMAT-->
            </ul>
            <!--END: LINKS-->
            <!--END: FRAME_LINKS-->
            </div>
            I added a line spacing to the DIV css

            Code:
            #FRAME_LINKS {
            max-width: 930px;
            margin: 0 auto;
            line-height: 250%
            }
            
            #FRAME_LINKS ul{
            list-style:none;
            }
            
            #FRAME_LINKS li{
            display: inline;
            margin-left: 5px;
            }
            Last edited by elightbox; 05-23-2013, 06:40 PM.

            Comment

            Working...
            X