Joomla Templates Club 406,261 posts

[gtrew Friend gtrewJoin date: November 2008Posts: 25Downloads:0Uploads:6 Thanks: 5]

#135949

Ok, I’ve started to dread posting things in this forum as I must look like an imbecile, as my questions are quite simple & I get quite a few views, but no-one answers my question or tell me that it is incomprehensible or something. Oh well.

Anyway, here’s another simple question about padding. In JA News 1.3 mod, I have inserted an image below the page break using the insert/edit image feature on the editor. How do you insert some, say, left padding to the image so that the text doesn’t hug the left edge of the image, making it look ugly bugly. When a border is added to the image in the editor – it looks even worse.

Any help for either of my quezzies would be very much appreciated 🙂

[scotty Friend scottyJoin date: March 2008Posts: 2339Downloads:0Uploads:13 Thanks: 76 Thanked: 827 times in 595 posts]

#281317

Your right gtrew… this is about as simple as web design gets :p

OK… adding padding to an image.

You have several options but the one I would use is…

<img src=”your_image.jpg” alt=”Alt text” title=”title text” style=”float: left; padding-right: 5px;” height=”” width=””>I’d usually leave out the -right too and just have padding: 5px; as equal padding around an image generally looks best.

[gtrew Friend gtrewJoin date: November 2008Posts: 25Downloads:0Uploads:6 Thanks: 5]

#281324

Thank you so much for taking the time to answer my quezzie.

I inserted your code and it didn’t work. Here’s what the screenshot looks like re. the editor;

screenshot 1(attached)

Here’s the html from the editor

<img class=”caption” src=”images/stories/demo/sam-3a.jpg” border=”0″ alt=”Sample image” title=”Sample image” hspace=”10″ vspace=”10″ align=”left” /> <p><br />Papillon Creative offers you with unique and powerful poster designs that help you to reach out <br />to communicate with your target audience, ensuring that your message reaches out to them loud <br />and clear. I design posters that grab attention – I use my creative, communication and marketing<br />experience to design posters that will get your business noticed, and remembered. <br />Simply Papillon Creative designs posters that sell!!!<br /> </p><p> </p><hr id=”system-readmore” /><p>
<img src=”images/stories/demo/sam-3b.jpg” border=”0″ alt=”Tri-County Boxing Poster” title=”Poster” hspace=”0″ vspace=”0″ width=”162″ height=”250″ align=”left” /></p><p>A brief summary of Papillon’s poster design services:<br /> Creative concept and eye-catching design<br /> Final art work in High resolution PDF<br /> Size A4, A3, A1 and A0 <br /> Stock imagery available<br /> We work to get your design just right<br /> We don’t stop until you’re totally satisfied<br /> Fast service, but no compromise in quality <br /> First proofs within 2 blah blah blah<br /> <br /> For further details and a free estimate please call us on blah
blahz</p>

This is the code AFTER I insert your bit

<img class=”caption” src=”images/stories/demo/sam-3a.jpg” border=”0″ alt=”Sample image” title=”Sample image” hspace=”10″ vspace=”10″ align=”left” /> <p><br />Papillon Creative offers you with unique and powerful poster designs that help you to reach out <br />to communicate with your target audience, ensuring that your message reaches out to them loud <br />and clear. I design posters that grab attention – I use my creative, communication and marketing<br />experience to design posters that will get your business noticed, and remembered. <br />Simply Papillon Creative designs posters that sell!!!<br /> </p><p> </p><hr id=”system-readmore” /><p>
<img src=”images/stories/demo/sam-3b.jpg” border=”0″ alt=”Tri-County Boxing Poster” title=”Poster” hspace=”0″ vspace=”0″ style=”float: left; padding-right: 5px; width=”162″ height=”250″ align=”left” /></p><p>A brief summary of Papillon’s poster design services:<br /> Creative concept and eye-catching design<br /> Final art work in High resolution PDF<br /> Size A4, A3, A1 and A0 <br /> Stock imagery available<br /> We work to get your design just right<br /> We don’t stop until you’re totally satisfied<br /> Fast service, but no compromise in quality <br /> First proofs within 2 blah blah blah<br /> <br /> For further details and a free estimate please call us on blah blahz</p>

Here’s what happens……nothing.

screenshot 2 (attached)

In fact, when you look at the html in the editor, it has erased the bit of code that you suggested that I inserted.

So, I may be a thicko, but things aren’t always that simple, I guess;)

Any thoughts? All I want to do is be able to insert some nice padding around the image so that the text doesn’t hug the image, making it look ugly.

---

Attachments:

1. 
2. 

[scotty Friend scottyJoin date: March 2008Posts: 2339Downloads:0Uploads:13 Thanks: 76 Thanked: 827 times in 595 posts]

#281327

So, I may be a thicko, but things aren’t always that simple, I guess

I never suggested you are a ‘thicko” and I’m truly sorry if it came across that way. We all had to start somewhere and we all had to learn how to apply padding at some stage. I was merely agreeing with you that it is a simple question when you look at how complicated and advanced HTML and CSS can get. Forums like this are a great place for beginners to learn the basics and don’t let my stupid comment put you off asking questions.

I forgot that the default Joomla editor strips out the style element (although you are missing the closing ” on the style property in your code anyway).

You could use the vspace= property. This apples a Vertical space to each side of your image. I didn’t tell you about this method the first time as it is an old way of doing it and is being phased out.

<img src=”images/stories/demo/sam-3b.jpg” border=”0″ alt=”Tri-County Boxing Poster” title=”Poster” hspace=”0″ vspace=”5” width=”162″ height=”250″ align=”left” />

I would also recommend you install JCEditor as it is a much better editor than the default one.

Sorry again. No offense meant.

[gtrew Friend gtrewJoin date: November 2008Posts: 25Downloads:0Uploads:6 Thanks: 5]

#281335

Goodness me Scotty – you have been really helpful, I wasn’t having a dig at all – just frustrated with myself as I’m very new to all of this. I absolutely hate asking questions, but it’s the only way that I’ll learn (I’ve ordered a couple of Joomla books for Christmas too!). Thanks for your patience – I shall now go and try that code change to see if it works. Again – I really appreciate your comments and help 🙂

[Author]

Posts