Announcement

Collapse
No announcement yet.

Fragment HTML

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

    Fragment HTML

    Hi
    I am having a problem with HTML on a fragment. See my website page with problem:- http://www.filtamagic.com/acatalog/P..._Brochure.html

    I created the page in html and it renders correctly on its own, but when inserted into the fragment text it seems to screw the text up. Any help greatly appreciated.

    MACKE
    Tags: None
    #2
    could you define what you mean by
    it seems to screw the text up
    then we can advise

    Comment

      #3
      I would suggest changing from absolute positions to something like this. Repeat the pattern for the other DIVs too.

      Code:
      #words1{
    float:left;
    width:VALUEpx
    height:VALUEpx
    overflow:hidden;
}

      Comment

        #4
        Hi

        When I paste it into the text box it moves the text lines up so one is sitting on the top of the other. Also the text runs past the defined area.

        This is the HTML with attached jpg

        !!<
        <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
        <html>
        <head>
        <meta content="text/html; charset=ISO-8859-1"
        http-equiv="content-type">
        <title>PureFilta page</title>
        <style>
        #words1{
        position: absolute;
        top:160px;
        left:12px;
        z-index:2;
        font-family: Arial;
        font-size: 10px;
        line-height: 1 em;
        }
        #words2{
        position: absolute;
        top:203px;
        left:12px;
        z-index:2;
        font-family: Arial;
        font-size: 10px;
        line-height: 1 em;
        }
        #words3{
        position: absolute;
        top:254px;
        left:12px;
        z-index:2;
        font-family: Arial;
        font-size: 10px;
        line-height: 1 em;
        }
        #words4{
        position: absolute;
        top:285px;
        left:12px;
        z-index:2;
        font-family: Arial;
        font-size: 10px;
        line-height: 1 em;
        }
        #words5{
        position: absolute;
        top:308px;
        left:12px;
        z-index:2;
        font-family: Arial;
        font-size: 10px;
        line-height: 1 em;
        }
        .highlight{
        font-family: Arial;
        font-size: 10px;
        font-weight: bold;
        color: #330099;
        }
        .compositeimage{
        position: absolute;
        top:50px;
        left:10px;
        z-index:1;
        }
        </style>
        </head>
        <body>
        <div id="words1">
        <span class="highlight">FiltaMAGIC
        </span>introduces PureFilta HEPA a new high tech dust bag using<br>
        multi layer synthetic media. The media's special structure filters more<br>
        fine dust particles offering hepa 10 filtration performance.
        </div>
        <div id="words2">The
        fantastic dust loading capacity of PureFilta HEPA<br>
        is 30%
        better than the next best brand of synthetic dust<br>
        bags and is 200%
        better than than conventional paper<br>
        bags.
        </div>
        <div id="words3">
        The suction performance of your vacuum cleaner is<br>
        increased and the
        useful life of the bag extended.
        </div>
        <div id="words4">
        Dust retention is 99.99%
        </div>
        <div id="words5">
        The
        PureFilta HEPA range
        incorporates all top selling European<br>
        brands and models of vacuum
        cleaner such as: &nbsp;AEG, Bosch,<br>
        Electrolux, Miele, Nilfisk,
        Philips,
        Siemens and &nbsp;Zelmer.
        </div>
        <div class="compositeimage">
        <img src="Purefilta 616 wide modified.jpg"</div>
        </body>
        </html>
        >!!
        Attached Files

        Comment

          #5
          Tried these changes and still cannot get the text to format correctly.

          MACKE

          Comment

            #6
            Originally posted by macke View Post
            !!<
            <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
            <html>
            <head>
            <meta content="text/html; charset=ISO-8859-1"
            http-equiv="content-type">
            <title>PureFilta page</title>
            <style>
            #words1{
            position: absolute;
            top:160px;
            left:12px;
            z-index:2;
            font-family: Arial;
            font-size: 10px;
            line-height: 1 em;
            }
            #words2{
            position: absolute;
            top:203px;
            left:12px;
            z-index:2;
            font-family: Arial;
            font-size: 10px;
            line-height: 1 em;
            }
            #words3{
            position: absolute;
            top:254px;
            left:12px;
            z-index:2;
            font-family: Arial;
            font-size: 10px;
            line-height: 1 em;
            }
            #words4{
            position: absolute;
            top:285px;
            left:12px;
            z-index:2;
            font-family: Arial;
            font-size: 10px;
            line-height: 1 em;
            }
            #words5{
            position: absolute;
            top:308px;
            left:12px;
            z-index:2;
            font-family: Arial;
            font-size: 10px;
            line-height: 1 em;
            }
            .highlight{
            font-family: Arial;
            font-size: 10px;
            font-weight: bold;
            color: #330099;
            }
            .compositeimage{
            position: absolute;
            top:50px;
            left:10px;
            z-index:1;
            }
            </style>
            </head>
            <body>            <div id="words1">
            <span class="highlight">FiltaMAGIC
            </span>introduces PureFilta HEPA a new high tech dust bag using<br>
            multi layer synthetic media. The media's special structure filters more<br>
            fine dust particles offering hepa 10 filtration performance.
            </div>
            <div id="words2">The
            fantastic dust loading capacity of PureFilta HEPA<br>
            is 30%
            better than the next best brand of synthetic dust<br>
            bags and is 200%
            better than than conventional paper<br>
            bags.
            </div>
            <div id="words3">
            The suction performance of your vacuum cleaner is<br>
            increased and the
            useful life of the bag extended.
            </div>
            <div id="words4">
            Dust retention is 99.99%
            </div>
            <div id="words5">
            The
            PureFilta HEPA range
            incorporates all top selling European<br>
            brands and models of vacuum
            cleaner such as: &nbsp;AEG, Bosch,<br>
            Electrolux, Miele, Nilfisk,
            Philips,
            Siemens and &nbsp;Zelmer.
            </div>
            <div class="compositeimage">
            <img src="Purefilta 616 wide modified.jpg"</div>
            </body>
            </html>
            >!!
            I've highlighted in red what you should NOT be adding into the fragment. Styles should be added into the stylesheet and the html you add should only be that for the specific parts you wish to add, not that for the whole of the page you have built. You don't build a page outside of actinic and then paste the lot into a fragment, because of course the fragment already exists on a page, so therefore duplicating the page html is going to break things.

            Comment

              #7
              Complicated this as it's my first attempt.

              I have removed all of the red highlighted items and it displays the text correctly. Problem is that it places the image first followed by the text instead of having the as a sort of background to the text.

              MACKE

              Comment

                #8
                have you added the styles to actinic.css?

                Comment

                  #9
                  Need to do as Croccy says, it won't look as you wanted as you've currently removed all styles.

                  Comment

                    #10
                    No I have set the layout to HEADLINE FRAGMENT LAYOUT. As I say I am new to all of this.

                    MACKE

                    Comment

                      #11
                      add your styling
                      Code:
                      
#words1{
position: absolute;
top:160px;
left:12px;
z-index:2;
font-family: Arial;
font-size: 10px;
line-height: 1 em;
}
#words2{
position: absolute;
top:203px;
left:12px;
z-index:2;
font-family: Arial;
font-size: 10px;
line-height: 1 em;
}
#words3{
position: absolute;
top:254px;
left:12px;
z-index:2;
font-family: Arial;
font-size: 10px;
line-height: 1 em;
}
#words4{
position: absolute;
top:285px;
left:12px;
z-index:2;
font-family: Arial;
font-size: 10px;
line-height: 1 em;
}
#words5{
position: absolute;
top:308px;
left:12px;
z-index:2;
font-family: Arial;
font-size: 10px;
line-height: 1 em;
}
.highlight{
font-family: Arial;
font-size: 10px;
font-weight: bold;
color: #330099;
}
.compositeimage{
position: absolute;
top:50px;
left:10px;
z-index:1;
}
                      to the actinic style sheet found in the design tab within a drop down box near the top.
                      You will need to select the actinic.css option, and copy and paste the code above to the bottom of the style sheet
                      "If my answers frighten you then you should cease asking scary questions"

                      Comment

                      Previous template Next
                      Working...
                      X