4 replies [Last post]
ryggen
Offline
newbie
Last seen: 12 years 40 weeks ago
Joined: 2007-11-07
Posts: 3
Points: 0

Hey - I have some issues with adjusting text either when having a small image with a text on the right or a multiline text where I use padding-left.

The problem is that if I have an image with some text on the right - when the text stretch beyond the pictures bottom then the text will be left-aligned. Some of the text is put nice to the right of the image as it should but the rest does not. I use float:left on my image. It is possibly for me to adjust the text so it follows an vertical line all the way - but then I have to wrap it in a div, span or p and I would prefer not to do that. The reason for that is that I try to style an asp.net webcontrol I have developed - if I do that the text will be wrapped in some sort of textbox inside my control.

The other issue is almost the same situation - but here I dont have an image on the left - this is pure text and I need the text to be "tabbed" in on the page - for that I use a padding-left - the problem is that the second, third, etc. line does not follow the first lines format so the text looks like this:

My text begins here with a small tab
then the second line
then the third line, etc. etc.

How can I control this? Should I just use divs, spans, p's - or is there another way?

Thanks

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 6 years 16 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

hi i think i understand

hi

i think i understand your problem, but is it possible for you to post a live link?

that will make it easier for me & us to take a look...

mihir Smile

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com

ryggen
Offline
newbie
Last seen: 12 years 40 weeks ago
Joined: 2007-11-07
Posts: 3
Points: 0

hi - hmm I'm afraid it is

hi - hmm I'm afraid it is not possibly to post a live link at this point - I need to re-create the problem and post it on my own webpage then - the problem is that I don't know when I can do it

Smile - thanks

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 12 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9774
Points: 3856

Since you haven't posted the

Since you haven't posted the markup you used[1], I'll guess at it.

p {
width: 25em;
}

img {
float: left;
margin-right: 10px;
}
==========

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse vestibulum. Sed feugiat neque in turpis. Fusce hendrerit turpis nec libero. Nunc tempus. Integer quis sem. Mauris quis nisl in metus faucibus tristique. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris egestas mauris sit amet nisl. Sed vehicula mi eget arcu. Morbi aliquet mollis ligula. In nonummy. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. In hac habitasse platea dictumst. Nullam ornare. Pellentesque vulputate est in nisi.

That will do as you described, even if your markup is as below. The key is to separate the image from the paragraph so you can give the paragraph a left margin.
div {
width: 25em;
}

p {
margin-left: 60px;
}

img {
float: left;
}
===============




Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse vestibulum. Sed feugiat neque in turpis. Fusce
hendrerit turpis nec libero. Nunc tempus. Integer quis sem.
Mauris quis nisl in metus faucibus tristique. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere cubilia
Curae; Mauris egestas mauris sit amet nisl. Sed vehicula mi eget
arcu. Morbi aliquet mollis ligula. In nonummy. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per
inceptos hymenaeos. In hac habitasse platea dictumst. Nullam
ornare. Pellentesque vulputate est in nisi.


Try that.

cheers,

gary

[1] We're concerned with the generated output. It's up to you to make the server side scripting produce the desired markup—not always easy with ASP.

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

ryggen
Offline
newbie
Last seen: 12 years 40 weeks ago
Joined: 2007-11-07
Posts: 3
Points: 0

Nice

I finally had the time to try it out Smile - it works fine and does what I hoped for.

Thanks :thumbsup: