View Thread: Padding Between Image and Text

Welcome Guest | Register | Login

Killersites.com Forum

Category: General Web Design

Forum: CSS - Styling your pages with Cascading Style Sheets.

Thread: Padding Between Image and Text

Quick Go »

No member browsing this thread

Thread Status: Active
Total posts in this thread: 8

[ ]

Author

This topic has been viewed 15783 times and has 7 replies

newseed
Advanced Member

Joined: Apr 2, 2005
Post Count: 2141
Status: Offline


Padding Between Image and Text

For some reason, I cannot get it to allow padding (spacing) between the image and text.

The image is set to align left so that the text can be placed to the right of the image but I need spacing so that the text does not lean against the image.

Here's my code:

<table width="100%">
    <tr>
      <td>
         <a class="padright" href="images/first-street-1920.jpg" onclick="return popImage(this.href,'Sanford Naval Academy');">
               <img src="images/first-street-1920_small.jpg" alt="Sanford, Florida - First Street 1920" align="left" ></a>
               <p class="break">An artist rendering of First Street, Sanford. FL 
               in 1920 used as a post card.</p>
               <p class="break">Author: Unknown</p>
               <p class="break">Source: <a class="text-menu" href="http://www.cyburbia.org">http://www.cyburbia.org</a>
</p>

CSS:

.break  {margin-bottom:0px
            }

.padright    { padding-right: 15px;
                   }

Thanks.
----------------------------------------
Success is based on how much you spend. If it's not money, then the alternative is your time.
The Kasper Group

[Apr 7, 2006 9:29:10 AM]

[Link]

LSW
Advanced Member

USA
Joined: Nov 27, 2003
Post Count: 6285
Status: Offline


Re: Padding Between Image and Text

Try floating the image?

[Apr 7, 2006 10:15:51 AM]

[Link]

tpattison
Advanced Member

UK
Joined: Dec 29, 2004
Post Count: 1662
Status: Offline


Re: Padding Between Image and Text

A link to the actual page would be a great help. biggrin

----------------------------------------
Pavonis Mons | Listen of the week: "Residue of Desire" by Acumen

[Apr 7, 2006 12:42:53 PM]

[Link]

newseed
Advanced Member

Joined: Apr 2, 2005
Post Count: 2141
Status: Offline


Re: Padding Between Image and Text

Here's the link: SNA site

I was trying to make it work using <div> instead of tables but for some reason I could never position the <div> like I did with the tables. If you have a solution for that, I am open to learn it and apply it.

Otherwise, just getting the padding to work between the image and text will suffice for me.
----------------------------------------
Success is based on how much you spend. If it's not money, then the alternative is your time.
The Kasper Group

[Apr 7, 2006 3:00:18 PM]

[Link]

oneofakind2727
Stranger

Joined: Apr 7, 2006
Post Count: 2
Status: Offline


Re: Padding Between Image and Text

why not just throw some vspace="3" hspace="3"

hspace controls the horizontal padding and vspace controls vertical padding

Another one I find handy is if you have <P></P> Tags, throw some margin heights in there.
<P style="margin:0px 0px 0px 0px">Hello</p>

Remember it goes in order TOP RIGHT BOTTOM LEFT

Inline style is nice... hope this helped

[Apr 7, 2006 3:52:46 PM]

[Link]

newseed
Advanced Member

Joined: Apr 2, 2005
Post Count: 2141
Status: Offline


Re: Padding Between Image and Text

Thanks but I want to apply this to external CSS and avoid using vspace and hspace.
----------------------------------------
Success is based on how much you spend. If it's not money, then the alternative is your time.
The Kasper Group

[Apr 7, 2006 4:12:52 PM]

[Link]

lm
Advanced Member

Joined: Oct 27, 2004
Post Count: 2550
Status: Offline


Re: Padding Between Image and Text

hi,
as lsw said it is better to float the image. I dont know if you saw this example
----------------------------------------

My blog

[Apr 7, 2006 5:02:16 PM]

[Link]

newseed
Advanced Member

Joined: Apr 2, 2005
Post Count: 2141
Status: Offline


Re: Padding Between Image and Text

That link opened my eyes. Got it to work: SNA

I was not implementing float: left (or right) correctly.

Thanks for the help.
----------------------------------------
Success is based on how much you spend. If it's not money, then the alternative is your time.
The Kasper Group

[Apr 7, 2006 6:02:19 PM]

[Link]

[ ]

Current timezone is GMT
May 25, 2013 6:11:01 AM