adding random white space and avoiding &nbsp

[Ant]

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

[virtual]

Just give the paragraphs that need it a class and then you can add the extra space you need and it will only affect those specific paragraphs.

[falkencreative]

I would just add a class to the <p> tag (or whatever element you need to add space below) and then specify a bottom margin in your CSS stylesheet. Or, if it is the only time it is going to be used, perhaps an inline style.

 

I'd avoid using extra  's or spacer gifs.

[Ant]

Thanks guys.

Edited August 30, 2010 by Ant

[Ant]

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 August 30, 2010 by Ant

[Andrea]

I'm not really sure what you're trying to do - but maybe a background image?

[falkencreative]

I would say either use a background image, or make the image "position:absolute" and adjust its positioning using top/right/bottom/left. You'll probably need to give whatever element is holding the image "position:relative" as well.

[BeeDev]

Maybe try also float:right or maybe just align the image vertically using vertical-align: middle / text-top / text-bottom etc

[Ant]

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

Edited August 31, 2010 by Ant

[Ant]

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

[newseed]

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 August 31, 2010 by newseed

[Ant]

Thanks News.

 

I will try that and see what the difference is between yours and Falken.

 

 

I don't use a lot of pseudo classes. I believe that's what you outlined, right?

 

Ant

[newseed]

pseudo classes is anything with colon after a element (i.e. a:link, a:visited, p:first-child, etc).

 

In my example, none was used.

Edited August 31, 2010 by newseed