4 Replies - 667 Views - Last Post: 17 April 2013 - 01:02 AM

#1 qim  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 30
  • Joined: 17-April 13

padding in html

Posted 17 April 2013 - 12:13 AM

Hi I have the following lines in html script

<img title="Llamas" alt="Llamas" src="Pinto/images/Llamas.jpg"  style="float:left">
<img title="Sydney" alt="Sydney" src="Pinto/images/Sydney.jpg"  style="float:right">



I would like to bring the second image a little away from the right margin. How do I do it, simply?
I tried to add <style="padding-right:10px"> but it did not work

<img title="Sydney" alt="Sydney" src="Pinto/images/Sydney.jpg"  style="float:right" style="padding-right:10px">


Thank you

Is This A Good Question/Topic? 0
  • +

Replies To: padding in html

#2 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3730
  • View blog
  • Posts: 6,017
  • Joined: 08-June 10

Re: padding in html

Posted 17 April 2013 - 12:27 AM

Hey.

There should only ever be one style attribute on elements. If you need to apply more than once style, then separate them by semi-colons:
<elem style="color: red; font-size: 14px;">



As for moving the image from the right edge, you should not be using the padding for that. You should be using margin. The padding pads the insides of an element by the given amount, which in the case of images is not altogether that useful. The margin, on the other hand, pushes the element from the outside, moving it away from it's original position. - I suggest you read up on the Box Model for details about how that all works.
Was This Post Helpful? 0
  • +
  • -

#3 qim  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 30
  • Joined: 17-April 13

Re: padding in html

Posted 17 April 2013 - 12:39 AM

Hi, thanks for the quick reply.

Unfortunately, I can't make ir to work, even exagerating the nargin quite a bit

<img title="Sydney" alt="Sydney" src="Pinto/images/Sydney.jpg"  style="float:right; "margin-right:20px;">


Can you help a bit more, please?

Thank you

Correction:

<img title="Sydney" alt="Sydney" src="Pinto/images/Sydney.jpg"  style="float:right"; "margin-right:20px";>


Still doesn't work
Was This Post Helpful? 0
  • +
  • -

#4 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3730
  • View blog
  • Posts: 6,017
  • Joined: 08-June 10

Re: padding in html

Posted 17 April 2013 - 12:42 AM

You're quote for the styles are out of order; you have an extra double-quote before the margin style. Both styles are essentially a single string value for a single style attribute, and should be enclosed in the same quotation marks. - Compare my example with what you have and you should see it.
Was This Post Helpful? 0
  • +
  • -

#5 qim  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 30
  • Joined: 17-April 13

Re: padding in html

Posted 17 April 2013 - 01:02 AM

Great! Thanks, it worked!
I'm new to this forum, and could not find your example. How do I get to it?

may I ask you another question? I have abox with some text inside and would like to give it some padding so that it doesn.t stick to the margins, but what I tried so far expands the boxes leftwards, which i find strange as I thought I had given them exact width in the css script.

here is part of the code applicable to the box1 in the sidebar2

.sidebar {
width: 190px;
float: left;
}
.sidebar2 {
width: 190px;
float: right;
}
nav, .loginarea {
background: #D4D3BA;
margin-bottom: 28px;
padding: 18px;
}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}

.box1 .box2{
-webkit-box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.5);
box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.5);
}

div.box1 {
	border: solid 1px #CCCCCC;
	background-color: #D4D3BA;
	float:right;
	padding: 0px;
	margin: 4px 0px 28px 4px;
height:300px;
width:180px;
text-align: center;

}


Sorry, I'm getting confused. It is box 2 and here goes abit more code that comes below what I sent before (and I've just realized that I gave margin twice with 2 different values! I'm new to this, I'm afraid

div.box2 {
	border: solid 1px #CCCCCC;
	background-color: #D4D3BA;
	float:right;
	padding: 0px;
	margin: 35px 0px 28px 4px;
height:300px;
width:180px;
text-align: left;
padding:5px;


}


I've just got rid of the padding:0 and increased the padding:5 to 15 just to check, and immediately the box moves leftwards into the main area. i want to be static. It is the text inside that should move
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1