Jump to content

adding random white space and avoiding &nbsp


Ant

Recommended Posts

I have 3 sets of paragraphs that need to be separated by EXTRA space.

 

I was told that using &nbsp is bad practice.( but it is VERY tempting, ;) )

 

I have looked for various ways to add RANDOM extra space in my design and cant find anything.

 

The only option i can think of is inline margins added to my p tag.

 

Are spacer.gif bad practice?

 

 

This is just another example of margins in external style sheets not satisfying ALL my variables.

 

Sorry to keep posting these similar questions.

 

Ant

Link to comment
Share on other sites

Since something is not allowing me a full post here's the abbreviated version

I have the following text:

 

Facebook

You can now follow us on Facebook

 

How do i add an image at the end of the second line and have the text IGNORE the space it's taking up?

 

Ant

Edited by Ant
Link to comment
Share on other sites

Allright attached is what I'm trying to do.

 

2 lines of copy.(the facebook section) At the end of the second line (on the same line) I placed an image

 

The image is forcing a space between the first and second line because of the height of it.

 

I guess I want the image to not effect the spacing (leading) of the 2 lines. Maybe the image needs to be taken out of the flow of the code and be a layer or something.

 

I have yet to try the position relative absolute.

 

Ant

post-24574-014392600 1283279831_thumb.jpg

Edited by Ant
Link to comment
Share on other sites

Well, the position:absolute worked.

 

I had to place the position 650px from the top and 350 px from the left. But even though DW renders it properly, I had to adjust it based on my browser preview and GUESS on the css position. DW was off by something like 40px.

 

Ant

Link to comment
Share on other sites

Just position image within the within the <p> tag.

 

<p>Facebook</p>

<p class="facebook">content line two<img src="images/ws-logo-jpg" width="40" height="40"></p>

 

 

p.facebook {

position: relative;

padding: 0;

margin: 0;

display: inline-block;

 

}

p.facebook img {

position: absolute;

right: -50px;

top: 0;

}

 

You can make some adjustments to suit but this will keep the image contained/positioned from the right end of the <p>. If your image is 40px wide then set the right property to be -40px + -10px = -50px as shown above.

 

The top: 0 is aligned to the top of the <p>. If you want you can adjust it to have the image vertically align witht the text (top: -15px;) (i.e if image is 40px high and font is 10px then 40-10=30 divide by 2 = -15px

Edited by newseed
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...