Webforumz's RSS FeedRSS Webforumz RegistrationRegister Contact Webforumz StaffContact

spacing around images

This is a discussion on "spacing around images" within the Web Page Design section. This forum, and the thread "spacing around images are both part of the Design Your Website category.


 Subscribe in a reader

Go Back   Webforumz.com > Main Forums > Design Your Website > Web Page Design

Notices




Reply
 
LinkBack Thread Tools
  #1  
Old Aug 2nd, 2006, 14:46
Highly Reputable Member
Join Date: Jul 2006
Location: Devon, England
Posts: 565
Thanks: 0
Thanked 0 Times in 0 Posts
spacing around images

Is there a way i can set the space around an image so the text doesn't wrap right up next to it.

I have used hspace but it spaces out both sides and i just want to space either the left side or the right side by about 10px

I am sure it can be done becuase I have seen it done before on other websites.

I would like it so when the text wraps around underneath the image, it is all in-line and the image not looking indented.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #2  
Old Aug 2nd, 2006, 14:50
Elite Veteran
Join Date: Aug 2005
Location: That Place
Posts: 2,044
Blog Entries: 1
Thanks: 0
Thanked 37 Times in 37 Posts
Re: spacing around images

You have a few options here:

The most direct approach would be to place the image in a div with the dimensions of your image and give it the necessary margins and float if required depending on your placement.

i.e.

#foo {
width: 200px;
height:200px;
float:left;
margin:12px;
}

or #foo img {

}

may work too.
__________________

Last Blog Entry: Apps every Mac based web dev should consider (Jul 10th, 2008)
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #3  
Old Aug 2nd, 2006, 17:04
Most Reputable Member
Join Date: Apr 2006
Location: Cornwall, UK
Posts: 1,310
Thanks: 0
Thanked 0 Times in 0 Posts
Re: spacing around images

If this a consistent requirement throughout the site then set css margins directly on the img tag.
Code: Select all
img {
   margin: set as required;
}
It's a simple as that.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #4  
Old Aug 2nd, 2006, 20:10
Elite Veteran
Join Date: Aug 2005
Location: That Place
Posts: 2,044
Blog Entries: 1
Thanks: 0
Thanked 37 Times in 37 Posts
Re: spacing around images

That works too.
__________________

Last Blog Entry: Apps every Mac based web dev should consider (Jul 10th, 2008)
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #5  
Old Aug 2nd, 2006, 22:32
Reputable Member
Join Date: Jul 2005
Posts: 400
Thanks: 0
Thanked 0 Times in 0 Posts
Re: spacing around images

If you use global margins for the img tag, the margins will be added to all imgs and they will look indented when the text wraps underneath during a left or right float.

You need to establish two styles. One for right floats and one for left floats. You want margin on the right and bottom sides during a left float and margins on the left and bottom sides during a right float.

Code: Select all
.float-left {
 float: left;
 margin: 0 10px 10px 0;
}
 
.float-right {
 float: right;
 margin: 0 0 10px 10px;
}
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
Reply

Tags
spacing, around, images

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Similar Threads
Thread Thread Starter Forum Replies Last Post
Css Spacing Help! RZX Developer Web Page Design 5 Aug 13th, 2007 13:26
Spacing paragraphs polkadot Starting Out 3 May 25th, 2007 13:48
Some images overlapping and some spacing problems karinne Web Page Design 4 Feb 15th, 2007 14:35
Spacing help in Dreamweaver 8 facehead Web Page Design 23 Dec 1st, 2006 19:09
div spacing johnnybravo Web Page Design 13 Sep 6th, 2006 13:06


All times are GMT. The time now is 19:39.


Powered by vBulletin®
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0 RC8