Back To Website Design Forum

clean xhtml question

  • redlance
  • Born
  • Born
  • No Avatar
  • Joined: Nov 22, 2007
  • Posts: 3
  • Status: Offline

Post November 22nd, 2007, 12:38 pm

I currently use e107 cms and have been using standard html to format my pages and would like to see if there is a better code to use to accomplish the image/text wrapping.

This is the code that formats most of my posts...

<body>


<img src="http://i0006.photobucket.com/albums/0006/pbhomepage/Gnomes/IMG_0094.jpg" align="left" width="140" height="100" hspace="10" vspace="10">This is a test text to show an example of the area that I want the text to be in, I want the the image on the left. the text on the right and padding between the image and text of about 10px. The code I have included gives a padding around the whole image but I do not want padding on the left side or top of the image because it does not align flush with my post. This is html but I want to make sure I am using the best most valid and compliant type of code.

As the text explains I want the image to be on the left, and the text to wrap the right and bottom of the image, anyone have a better code example?
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post November 22nd, 2007, 12:38 pm

  • JasonStanley
  • Graduate
  • Graduate
  • No Avatar
  • Joined: Nov 15, 2007
  • Posts: 124
  • Loc: London, England
  • Status: Offline

Post November 22nd, 2007, 4:35 pm

http://www.w3schools.com/css/default.asp

Cascading Style Sheets give you far more control over different parts of your webpage than the align, hspace and vspace attributes. Check it out.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Joined: Mar 12, 2007
  • Posts: 6228
  • Loc: South-Africa
  • Status: Offline

Post November 22nd, 2007, 9:47 pm

And then you would use the following to acomplish what you want to do

HTML:
Code: [ Select ]
<p><img src='image.ext' alt='image 01' /> This is a test text to show an example of the area that I want the text to be in ...</p>


CSS:
Code: [ Select ]
p
{
font-family: arial, helvetica, sans-serif;
etc ...
}
p img
{
padding:10px;
border:0px;
etc ...
}
  1. p
  2. {
  3. font-family: arial, helvetica, sans-serif;
  4. etc ...
  5. }
  6. p img
  7. {
  8. padding:10px;
  9. border:0px;
  10. etc ...
  11. }
Let's leave all our *plum* where it is and go live in the jungle ...
  • redlance
  • Born
  • Born
  • No Avatar
  • Joined: Nov 22, 2007
  • Posts: 3
  • Status: Offline

Post November 23rd, 2007, 1:25 pm

Thank you, works great.

Page 1 of 1

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 97 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.