none
Words not aligned RRS feed

  • Question

  • I have built a website and I am happy with it in Expression web but when it is viewed on the internet part of the paragraph (two letters)move to the right of a photograph instead of on the line below. I am quite new to web design and I am not familiar with using code to make alterations.

    I have tried to understand why they do this but cannot understand. My website is www.drivelinenewquay.co.uk

    I have noticed on very rare occasions this doesn't happen. The problem is on the home page, on the right hand side. There is a photo of a car and underneath should read 'G S Cooper' but the 'G S' usually appears at the side of the photo.

    Can anyone please help me?

     

    Saturday, August 14, 2010 3:56 PM

Answers

  • It's doing that because you told it to. See this in your markup:

    <img src="images/DLGabc.jpg" width="290" height="210" class="style2" style="border: 1px #358 solid; float: left" longdesc="drive-line driving school newquay" alt="driving lessons newquay" />

    The float tells the image to move to the left of its container and then remove itself from the flow. Other content following in source order (all of those empty <p>s and the caption) then feels free to move up to the side of it (and under it, in the case of the spacer paragraphs). Clear the float and the problem goes away, although that reveals another problem with the way you have done this.

    Do not use spaces and empty paragraphs for positioning. In this case, you don't even need them. Apply the clear:left to #sidebar p (I would have used the paragraph containing the caption, but there was no existing style and this was a quick and dirty in Firebug), remove all of those extraneous paragraphs you used to position the caption below the image, and things fall into place. You might want to zero or modify the margins and padding on the paragraphs above to adjust your spacing a bit, but that's what they're there for.

    You have a number of other issues with your markup. I would suggest that you avail yourself of the training reources in the BEFORE POSTING thread, in particular Cheryl's "Build A Better Web Site" video tutorial. She will show you how to easily construct a page such as that using the appropriate methods (which do not include spaces and paragraphs for positioning ;-).

    Good luck!

    cheers,
    scott


    C'mon, folks. This isn't rocket science, nor neurosurgery. It's "Expression" (singular) "Web" (singular), in that order, followed by a version numeral if you wish to be specific. It is often abbreviated "EW." It is not "Web Expression," "Expressions Web," "Web Expressions," or plain "Expression" or "Expressions." Not using the correct name indicates either ignorance or laziness. Most folks would rather avoid the appearance of either.
    Saturday, August 14, 2010 4:45 PM
  • Your code is:

    <P>
    <IMG class=style2 
    style="BORDER-RIGHT: #358 1px solid; BORDER-TOP: #358 1px solid; FLOAT: left; BORDER-LEFT: #358 1px solid; BORDER-BOTTOM: #358 1px solid" 
    height=210 alt="driving lessons newquay" src="images/DLGabc.jpg" width=290 
    longDesc="drive-line driving school newquay"></P>
    <P>&nbsp;</P>
    <P>&nbsp;</P>
    <P>&nbsp;</P>
    <P>&nbsp;</P>
    <P>&nbsp;</P>
    <P>&nbsp;</P>
    <P>&nbsp;<SPAN class=style3><STRONG><SPAN class=style4>G S Cooper 
    Instructor</SPAN><SPAN class=style1><BR></SPAN></STRONG></SPAN></P>

    You need to clear the "Float: left" that you have in the IMG tag
    (it is causing everything after to be to the right of the image)
    - add an inline style to the P tag with the text to clear the float with a  clear:both
    (then you won't need the 6 empty P tags after the image to make to text not appear next to it

    See http://www.w3schools.com/Css/css_float.asp


    SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
    Saturday, August 14, 2010 4:52 PM

All replies

  • It's doing that because you told it to. See this in your markup:

    <img src="images/DLGabc.jpg" width="290" height="210" class="style2" style="border: 1px #358 solid; float: left" longdesc="drive-line driving school newquay" alt="driving lessons newquay" />

    The float tells the image to move to the left of its container and then remove itself from the flow. Other content following in source order (all of those empty <p>s and the caption) then feels free to move up to the side of it (and under it, in the case of the spacer paragraphs). Clear the float and the problem goes away, although that reveals another problem with the way you have done this.

    Do not use spaces and empty paragraphs for positioning. In this case, you don't even need them. Apply the clear:left to #sidebar p (I would have used the paragraph containing the caption, but there was no existing style and this was a quick and dirty in Firebug), remove all of those extraneous paragraphs you used to position the caption below the image, and things fall into place. You might want to zero or modify the margins and padding on the paragraphs above to adjust your spacing a bit, but that's what they're there for.

    You have a number of other issues with your markup. I would suggest that you avail yourself of the training reources in the BEFORE POSTING thread, in particular Cheryl's "Build A Better Web Site" video tutorial. She will show you how to easily construct a page such as that using the appropriate methods (which do not include spaces and paragraphs for positioning ;-).

    Good luck!

    cheers,
    scott


    C'mon, folks. This isn't rocket science, nor neurosurgery. It's "Expression" (singular) "Web" (singular), in that order, followed by a version numeral if you wish to be specific. It is often abbreviated "EW." It is not "Web Expression," "Expressions Web," "Web Expressions," or plain "Expression" or "Expressions." Not using the correct name indicates either ignorance or laziness. Most folks would rather avoid the appearance of either.
    Saturday, August 14, 2010 4:45 PM
  • Your code is:

    <P>
    <IMG class=style2 
    style="BORDER-RIGHT: #358 1px solid; BORDER-TOP: #358 1px solid; FLOAT: left; BORDER-LEFT: #358 1px solid; BORDER-BOTTOM: #358 1px solid" 
    height=210 alt="driving lessons newquay" src="images/DLGabc.jpg" width=290 
    longDesc="drive-line driving school newquay"></P>
    <P>&nbsp;</P>
    <P>&nbsp;</P>
    <P>&nbsp;</P>
    <P>&nbsp;</P>
    <P>&nbsp;</P>
    <P>&nbsp;</P>
    <P>&nbsp;<SPAN class=style3><STRONG><SPAN class=style4>G S Cooper 
    Instructor</SPAN><SPAN class=style1><BR></SPAN></STRONG></SPAN></P>

    You need to clear the "Float: left" that you have in the IMG tag
    (it is causing everything after to be to the right of the image)
    - add an inline style to the P tag with the text to clear the float with a  clear:both
    (then you won't need the 6 empty P tags after the image to make to text not appear next to it

    See http://www.w3schools.com/Css/css_float.asp


    SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
    Saturday, August 14, 2010 4:52 PM
  • link The others have addressed your positioning issue so I'm going to mention that you rare using longdesc wrong. That should be a link to a page  with more info than a few words can convey. What you have there is more appropriate for the title attribute.  
    MS MVP Expression Tutorials & Help http://by-expression.com
    Sunday, August 15, 2010 3:43 AM
  • While your fixing your page, bag the visit counter too.
    Sunday, August 15, 2010 7:04 AM