Padding-right

I am trying to learn html聽聽 I have a book with an example creating one simple website with about five
pages.聽 I am copying the code then, looking to see what happens.聽 There is one
issue I can't figure out.聽 The demo has you insert a picture.聽 I do not have
good editing software on my laptop, so I resized a picture using windows
photo gallery in Vista.聽 I just wanted an image to see how things worked.
The image is floating left, and when I try to pad it right 15 px, it does
not work. I can pad the divider 15px and it leaves a margin to the left.聽 I
cannot figure out what is wrong, the code is the same as in the book.聽 Could
there be something wrong with the picture?聽 Any info is greatly appreciated.

Padding-right

Can you supply the code and css you are using to implement the padding?聽 or even better a live example?

How I聽 normally do it is like this:

you create a css class for floating an image left.聽 In my default stylesheet, I actually define one for left and one for right聽 :-)

.floatLeft {
聽聽聽 float: left;
聽聽聽 padding: 6px;
}

and then apply the style to the image - so the code looks something like this:

%26lt;img src=''images/couple.jpg'' alt=''business couple'' width=''252'' height=''188'' class=''floatLeft'' title='''' /%26gt;

This gives a padding of 10px around the whole image.

If you want padding just to one side, you would use:

.floatLeft {
聽聽聽 float: left;
聽聽聽 padding: 6px 10px 0 0;聽聽聽 /* this gives 6px padding at the top, 10px to the right, and 0 for left and 0 padding for bottom)聽 */

}

Hope this helps聽 :-)

Padding-right

hmmm...I am not sure.

My code looks like this:

body聽聽聽聽聽聽聽聽 {background: #EDF2FF;font-family: ''Trebuchet MS'', Arial, Helvetica, sans-serif;color: #4D65A0}
div聽聽聽聽聽聽聽聽聽 {clear:both}
div.postcard {padding:15px}
h1, h2聽聽聽聽聽聽 {margin:0}
h2聽聽聽聽聽聽聽聽聽聽 {border-top: 1px solid #4D65A0}
p聽聽聽聽聽聽聽聽聽聽聽 {margin-top:0; margin-bottom:12px; font-size:15px; line-height:1.2}
img.odd聽聽聽聽聽聽聽 {float:left; padding-right:15px; background: #EDF2FF}
img.even {float:right; padding-left:15px; background:#EDF2FF}
p.sales_info {font-style: italic}

this is in a *.css file.聽 I suppose you call it file.

Thank you!

Ok, that's the css, but what about the code for the image....

you need to apply the img.even class to the image聽 (that's the one that's floats the image to the right and gives padding to the left).

The CSS as you've pasted it looks OK but that's part of the story.

CSS (formatting) and HTML (page structure) work together. We really need to see the HTML too.

Even better if you can provide a link to a page on the web showing us your issue. Saves a 1000 words of typing :-)

This is the html file.聽 Thank you for your help.

%26lt;html%26gt;
%26lt;head%26gt;
%26lt;title%26gt;Sarah's Notecards - Ceramics Collection%26lt;/title%26gt;
%26lt;link rel=''stylesheet'' type=''text/css'' href=''sarahs_styles.css'' /%26gt;
%26lt;/head%26gt;
%26lt;body%26gt;
%26lt;div class=''into''%26gt;%26lt;h1%26gt;Ceramics Collection%26lt;/h1%26gt;
%26lt;p%26gt;The notecards in the %26lt;i%26gt;Ceramics collection%26lt;/i%26gt; feature closeups of gorgeous, colorful pottery from Andalusia and Catalonia.%26lt;/p%26gt;
%26lt;/div%26gt;
%26lt;div class=''postcard''%26gt;
%26lt;img src=''web6.jpg'' class=''odd'' alt=''Future Sagrada Familia Ceramics'' width=''200'' height=''200'' title=''Sagrada Familia; 2010?, 10 notecards for $12.99, 10 postcards for $8.99'' /%26gt;
%26lt;h2%26gt;%26amp;ldquo;Sagrada Familia: 2010?%26amp;rdquo;%26lt;/h2%26gt;
%26lt;p%26gt;This is a piece of the ceramics that they'll eventually use to finish the construction of the Sagrada Familia Church in Barcelona.聽 I took a similar picture last year thinking that by this year, they'd be installed all ready.聽 Nope.聽 Not yet.%26lt;/p%26gt;
%26lt;p class=''sales_info''%26gt;Item Number: 7845-C
%26lt;br /%26gt;10 notecards for %26lt;b%26gt; $12.99%26lt;/b%26gt;
%26lt;br /%26gt;10 postcards for %26lt;b%26gt;$8.99%26lt;/b%26gt;%26lt;/p%26gt;
%26lt;/div%26gt;
%26lt;div class=''postcard''%26gt;
%26lt;img src=''web2.jpg'' class=''even'' alt=''Dancing Stars at the Alhambra'' width=''210'' height=''160'' title=''Alhambra Stars, 10 notecards for $12.99, 10 postcards for $8.99'' /%26gt;
%26lt;h2%26gt;%26amp;ldquo;Dancing Stars%26amp;rdquo;%26lt;/h2%26gt;
%26lt;p%26gt;Although depicting living creatures in art is traditionally frowned on by the Islamic religion, the mosaics in the Alhambra in Granada are full of life and movement.%26lt;/p%26gt;
%26lt;p class=''sales_info''%26gt;Item Number: 4582-C
%26lt;br /%26gt;10 notecards for %26lt;b%26gt;$12.99%26lt;/b%26gt;
%26lt;br /%26gt;10 postcards for %26lt;b%26gt;$8.99%26lt;/b%26gt;
%26lt;/p%26gt;
%26lt;/div%26gt;
%26lt;div class=''postcard''%26gt;
%26lt;img src=''web1.jpg'' class=''odd'' alt=''Future Sagrada Familia Ceramics'' width=''100'' height=''100'' title=''Sagrada Familia; 2010?, 10 notecards for $12.99, 10 postcards for $8.99'' /%26gt;
%26lt;h2%26gt;%26amp;ldquo;Sagrada Familia: 2010?%26amp;rdquo;%26lt;/h2%26gt;
%26lt;p%26gt;This is a piece of the ceramics that they'll eventually use to finish the construction of the Sagrada Familia Church in Barcelona.聽 I took a similar picture last year thinking that by this year, they'd be installed all ready.聽 Nope.聽 Not yet.%26lt;/p%26gt;
%26lt;p class=''sales_info''%26gt;Item Number: 7845-C
%26lt;br /%26gt;10 notecards for %26lt;b%26gt; $12.99%26lt;/b%26gt;
%26lt;br /%26gt;10 postcards for %26lt;b%26gt;$8.99%26lt;/b%26gt;%26lt;/p%26gt;
%26lt;/div%26gt;
%26lt;div class=''postcard''%26gt;
%26lt;img src=''web3.jpg'' class=''even'' alt=''Dancing Stars at the Alhambra'' width=''210'' height=''160'' title=''Alhambra Stars, 10 notecards for $12.99, 10 postcards for $8.99'' /%26gt;
%26lt;h2%26gt;%26amp;ldquo;Dancing Stars%26amp;rdquo;%26lt;/h2%26gt;
%26lt;p%26gt;Although depicting living creatures in art is traditionally frowned on by the Islamic religion, the mosaics in the Alhambra in Granada are full of life and movement.%26lt;/p%26gt;
%26lt;p class=''sales_info''%26gt;Item Number: 4582-C
%26lt;br /%26gt;10 notecards for %26lt;b%26gt;$12.99%26lt;/b%26gt;
%26lt;br /%26gt;10 postcards for %26lt;b%26gt;$8.99%26lt;/b%26gt;
%26lt;/p%26gt;
%26lt;/div%26gt;
%26lt;/body%26gt;
%26lt;/html%26gt;

I bought the html and the css into DW and it appears to work for me.

If you look at the blue horizontal line above the heading, you will see that it stops short of the image.

To test what I mean, change the padding for a bigger number, say 50px, and you'll see that that same line will stop further to the left.聽 If you try and use 0xp as another test, you'll see that this blue line, will go right up to the image聽 :-)

Unless of course you want padding all around the image聽 ??

Thanks,

I am just playing with this and then looking at it in a browser offline, it does not work for me.聽 How do I get it into dreamweaver?

What are you using as an editor if not Dreamweaver?聽 :-)

You will

1.聽 Need to define a site in dreamweaver to point the the folder where the files are that you are working on.聽 This will make sure that the links are correctly, especially for the image - otherwise you'll get a broken link to that image you are using.聽 So make sure the html page and the image are in one folder and point to that.

This is what I pasted into Dreamweaver - the css is in the head of the document, not as a separate css file (for testing purposes on my end).聽 You may have a separate css file.. make sure that that is in the same folder when defining the site.聽 Then play around with the padding numbers to see the different effects.

%26lt;!DOCTYPE html PUBLIC ''-//W3C//DTD XHTML 1.0 Transitional//EN'' ''http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd''%26gt;
%26lt;html xmlns=''http://www.w3.org/1999/xhtml''%26gt;
%26lt;head%26gt;
%26lt;meta http-equiv=''Content-Type'' content=''text/html; charset=utf-8'' /%26gt;
%26lt;title%26gt;Untitled Document%26lt;/title%26gt;

%26lt;style type=''text/css''%26gt;
%26lt;!--

body聽聽聽聽聽聽聽聽 {background: #EDF2FF;font-family: ''Trebuchet MS'', Arial, Helvetica, sans-serif;color: #4D65A0}
div聽聽聽聽聽聽聽聽聽 {clear:both}
div.postcard {padding:15px}
h1, h2聽聽聽聽聽聽 {margin:0}
h2聽聽聽聽聽聽聽聽聽聽 {border-top: 1px solid #4D65A0}
p聽聽聽聽聽聽聽聽聽聽聽 {margin-top:0; margin-bottom:12px; font-size:15px; line-height:1.2}
img.odd聽聽聽聽聽聽聽 {float:left; padding-right:15px; background: #EDF2FF}
img.even {float:right; padding-left:15px; background:#EDF2FF}
p.sales_info {font-style: italic}
--%26gt;
%26lt;/style%26gt;
%26lt;/head%26gt;

%26lt;body%26gt;
div%26gt;
%26lt;div class=''postcard''%26gt;
%26lt;img src=''web6.jpg'' class=''even'' alt=''Future Sagrada Familia Ceramics'' width=''200'' height=''200'' title=''Sagrada Familia; 2010?, 10 notecards for $12.99, 10 postcards for $8.99'' /%26gt;
%26lt;h2%26gt;%26amp;ldquo;Sagrada Familia: 2010?%26amp;rdquo;%26lt;/h2%26gt;
%26lt;p%26gt;This is a piece of the ceramics that they'll eventually use to finish the construction of the Sagrada Familia Church in Barcelona.聽 I took a similar picture last year thinking that by this year, they'd be installed all ready.聽 Nope.聽 Not yet.%26lt;/p%26gt;
%26lt;p class=''sales_info''%26gt;Item Number: 7845-C
%26lt;br /%26gt;10 notecards for %26lt;b%26gt; $12.99%26lt;/b%26gt;
%26lt;br /%26gt;10 postcards for %26lt;b%26gt;$8.99%26lt;/b%26gt;%26lt;/p%26gt;
%26lt;/div%26gt;
%26lt;div class=''postcard''%26gt;
%26lt;img src=''web2.jpg'' class=''even'' alt=''Dancing Stars at the Alhambra'' width=''210'' height=''160'' title=''Alhambra Stars, 10 notecards for $12.99, 10 postcards for $8.99'' /%26gt;
%26lt;h2%26gt;%26amp;ldquo;Dancing Stars%26amp;rdquo;%26lt;/h2%26gt;
%26lt;p%26gt;Although depicting living creatures in art is traditionally frowned on by the Islamic religion, the mosaics in the Alhambra in Granada are full of life and movement.%26lt;/p%26gt;
%26lt;p class=''sales_info''%26gt;Item Number: 4582-C
%26lt;br /%26gt;10 notecards for %26lt;b%26gt;$12.99%26lt;/b%26gt;
%26lt;br /%26gt;10 postcards for %26lt;b%26gt;$8.99%26lt;/b%26gt;
%26lt;/p%26gt;
%26lt;/div%26gt;
%26lt;div class=''postcard''%26gt;
%26lt;img src=''web1.jpg'' class=''odd'' alt=''Future Sagrada Familia Ceramics'' width=''100'' height=''100'' title=''Sagrada Familia; 2010?, 10 notecards for $12.99, 10 postcards for $8.99'' /%26gt;
%26lt;h2%26gt;%26amp;ldquo;Sagrada Familia: 2010?%26amp;rdquo;%26lt;/h2%26gt;
%26lt;p%26gt;This is a piece of the ceramics that they'll eventually use to finish the construction of the Sagrada Familia Church in Barcelona.聽 I took a similar picture last year thinking that by this year, they'd be installed all ready.聽 Nope.聽 Not yet.%26lt;/p%26gt;
%26lt;p class=''sales_info''%26gt;Item Number: 7845-C
%26lt;br /%26gt;10 notecards for %26lt;b%26gt; $12.99%26lt;/b%26gt;
%26lt;br /%26gt;10 postcards for %26lt;b%26gt;$8.99%26lt;/b%26gt;%26lt;/p%26gt;
%26lt;/div%26gt;
%26lt;div class=''postcard''%26gt;
%26lt;img src=''web3.jpg'' class=''even'' alt=''Dancing Stars at the Alhambra'' width=''210'' height=''160'' title=''Alhambra Stars, 10 notecards for $12.99, 10 postcards for $8.99'' /%26gt;
%26lt;h2%26gt;%26amp;ldquo;Dancing Stars%26amp;rdquo;%26lt;/h2%26gt;
%26lt;p%26gt;Although depicting living creatures in art is traditionally frowned on by the Islamic religion, the mosaics in the Alhambra in Granada are full of life and movement.%26lt;/p%26gt;
%26lt;p class=''sales_info''%26gt;Item Number: 4582-C
%26lt;br /%26gt;10 notecards for %26lt;b%26gt;$12.99%26lt;/b%26gt;
%26lt;br /%26gt;10 postcards for %26lt;b%26gt;$8.99%26lt;/b%26gt;
%26lt;/p%26gt;
%26lt;/div%26gt;
%26lt;/body%26gt;
%26lt;/html%26gt;