Announcement

Collapse
No announcement yet.

CSS for Extra Pages

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    CSS for Extra Pages

    I have design issue that Tech Support has not been able to help me with and I'm hoping to maybe get some help here.

    On all the Extra Pages in my site, the bullets line up in the left nav column rather than in the center section - like on this page :
    http://www.holisticpetinfo.com/Aging-Pets_ep_43.html

    Tech Support suggested that I add the List-Style-position attribute to have the bullets appear inside the center section. This attribute does move the bullet to "inside" the column but it messes up the alignment of the text. (It becomes aligned left rather than being "block" style.) Also, I have more than 50 Extra Pages and I don't want to have to manually add the attribute to every occurrence of a bullet list on those pages. Shouldn't this be done in the CSS?

    Bullet lists appear correctly on my product listing pages so how do I use the same UL style on my "Extra Pages." An example of how I would like the bullet lists to appear is here:
    Vetri-Liver Canine Chews for Dogs - 60 ct. - Liver Supplement
    (scroll down to the Description tab).

    Any thoughts on how I use this same style for my Extra Pages?

    Thanks for looking.
    Tags: None
  • #2
    A quick fix may be to just style the list by adding style="margin-left:30px;" to the <ul> tag. Like this:

    <ul style="margin-left:30px;">

    Comment

    • #3
      theres a template page for extra pages.

      if your style is "global" to all of your extra pages, just add a stylesheet link to the first line of your template and it will load when the extra pages do.

      for example:

      -extrapage.html

      HTML Code:
      <link href="/assets/templates/[template]/css/yourCssNameHere" rel="stylesheet">

<!-- existing template html markup goes here ->
      -yourCssNameHere.css
      HTML Code:
      ul {
    margin-left: 30px;
}
 /* other css rules here */
      make sure to clear your cache and reload. this will now load that css sheet for all of your extra pages.

      Comment

      • #4
        Coding Errors

        Your rendered code <li>List Items</li> have <div>Divs</div> in them. Remove the divs. Try something like this:

        <div class="ftr-column col3">
        <h3>Help Center</h3>
        <ul>
        <li><a href="Order-Processing_ep_48-1.html" class="menu-bottom">Order Processing</a></li>
        <li><a href="Shipping-Policies_ep_45-1.html" class="menu-bottom">Shipping Policies</a></li>
        <li><a href="Return-Policies_ep_47-1.html" class="menu-bottom">Return Policies</a></li>
        <li><a href="Rewards-Program_ep_55-1.html" class="menu-bottom">Rewards Program</a></li>
        </ul>
        </div>

        Comment

        • #5
          Originally posted by jleclair View Post
          theres a template page for extra pages.

          if your style is "global" to all of your extra pages, just add a stylesheet link to the first line of your template and it will load when the extra pages do.

          for example:

          -extrapage.html

          HTML Code:
          <link href="/assets/templates/[template]/css/yourCssNameHere" rel="stylesheet">

<!-- existing template html markup goes here ->
          -yourCssNameHere.css
          HTML Code:
          ul {
    margin-left: 30px;
}
 /* other css rules here */
          make sure to clear your cache and reload. this will now load that css sheet for all of your extra pages.
          Thanks -- I added the stylesheet link to the extrapages template and also added the ul code to the css. It now formats the bullet list and numbered lists correctly. Thanks so much.

          Comment

          • #6
            Originally posted by celebra1 View Post
            Your rendered code <li>List Items</li> have <div>Divs</div> in them. Remove the divs. Try something like this:

            <div class="ftr-column col3">
            <h3>Help Center</h3>
            <ul>
            <li><a href="Order-Processing_ep_48-1.html" class="menu-bottom">Order Processing</a></li>
            <li><a href="Shipping-Policies_ep_45-1.html" class="menu-bottom">Shipping Policies</a></li>
            <li><a href="Return-Policies_ep_47-1.html" class="menu-bottom">Return Policies</a></li>
            <li><a href="Rewards-Program_ep_55-1.html" class="menu-bottom">Rewards Program</a></li>
            </ul>
            </div>
            I'm not sure what you mean here. When I look at the code on the frame.html, it shows just what you have above:
            <div class="ftr-column col3">
            <h3>Help Center</h3>
            <ul>
            <li><a href="Order-Processing_ep_48-1.html" class="menu-bottom">Order Processing</a></li>
            <li><a href="Shipping-Policies_ep_45-1.html" class="menu-bottom">Shipping Policies</a></li>
            <li><a href="Return-Policies_ep_47-1.html" class="menu-bottom">Return Policies</a></li>
            <li><a href="Rewards-Program_ep_55-1.html" class="menu-bottom">Rewards Program</a></li>
            </ul>
            </div>.

            Comment

            • #7
              Rendered Code

              Julie,

              My comment was based on your rendered source code. The way I was trained, <div> tags do not belong in <li> tags. I'm glad your fix works. Your stylesheet or the editor must be adding the unnecessary<div> tags.

              Comment

              • #8
                Julie,

                I'm glad you were able to solve your issue. Glad I could help. Take care.

                -James

                Comment

                Previous template Next
                Working...
                X