Jump to content

How to keep a positioned image from taking up space?


benw3
 Share

Recommended Posts

I have an image that I use a position:relative to move into place. I put the image tag at the bottom of the page, and it displays where I want it, but there's now a blank space at the bottom of the page where the image would be if I hadn't moved it. Know what I mean? <div style="position:relative;left:-160px;top:-150px;z-index:1;"><img src="images/event.gif" width="150" height="91" border="0" alt="Biggest Event of the Year"></div>How do I get rid of the blank area? I know this is a simple style setting. Thanks!

Link to comment
Share on other sites

<div style="position:relative;left:-160px;top:-150px;z-index:1;float:left;display:inline;vertical-align:top;"><img src="images/event.gif" width="150" height="91" border="0" alt="Biggest Event of the Year"></div>Still shows the blank area.

Link to comment
Share on other sites

I've done them back and forth - one at a time and together. None works. In fact, using float:left, I can't get it to move into position at all. I have to use position:relative for the coordinates to work.I don't think FLOAT is what I want to do, since I want the image to appear outside and to the left of the text above it - and not inside the text like <img align=left... For example, I want to put the image tag here and have the image show up under "Newbie" in the left column of this page.I've tried doing negative line height and negative margin too. [scratches head]

Link to comment
Share on other sites

Okay - if you copy and paste this, you'll see what I mean:

<html><body><table width="100%"><tr>	<td width="200" valign="top">Here's some text for this column</td>	<td valign="top">		<p>	Latin  is an ancient Indo-European language that was spoken in 			the Roman Republic and the Roman Empire. The conquests of Rome 			spread the language all around the Mediterranean and a large part of Europe. 			It existed in two forms: Classical Latin, used in poetry and formal prose, 			and Vulgar Latin, spoken by the people. After the fall of the Roman Empire 			and the rise of the Roman Catholic Church, Latin became the universal 			ecclesiatical language and the lingua franca of educated Europeans.</p>			<p>Having lasted 2,200 years, Latin began a slow decline around the 1600s. 			Vulgar Latin, however, was preserved: it split into several regional dialects, 			which by the 800s had become the ancestors of today's Romance languages. 			English, though a Germanic language, derives 60% of its words from Latin:[1] 			largely by way of French, but partly through direct borrowings made especially 			during the 1600s in England.			</p>			<div style="position:relative;left:-200;top:-200;">			<img src="http://lp-group.com/store/media/beg-latin200.gif" width="200" height="196">			</div>	</td></tr></table>See the blank spot between this text and the text above? How do I get rid of that using styles? </body></html>

Link to comment
Share on other sites

Can't use position:absolute?

<html><body><table width="100%"><tr><td width="200" valign="top">Here's some text for this column</td><td valign="top"><div style="position:absolute; left:10px; top:55px;"><img src="http://lp-group.com/store/media/beg-latin200.gif" width="200" height="196"></div><p> Latin is an ancient Indo-European language that was spoken inthe Roman Republic and the Roman Empire. The conquests of Romespread the language all around the Mediterranean and a large part of Europe.It existed in two forms: Classical Latin, used in poetry and formal prose,and Vulgar Latin, spoken by the people. After the fall of the Roman Empireand the rise of the Roman Catholic Church, Latin became the universalecclesiatical language and the lingua franca of educated Europeans.</p><p>Having lasted 2,200 years, Latin began a slow decline around the 1600s.Vulgar Latin, however, was preserved: it split into several regional dialects,which by the 800s had become the ancestors of today's Romance languages.English, though a Germanic language, derives 60% of its words from Latin:[1]largely by way of French, but partly through direct borrowings made especiallyduring the 1600s in England.</p></td></tr></table>See the blank spot between this text and the text above? How do I get rid of that using styles?</body></html>

Link to comment
Share on other sites

Position:absolute does work - but I do want to keep it relative to the text. You'd think that the absolute and relative would work about same - except for the relation to content vs window - apparently this is a big difference. Maybe I can't get rid of the blank area using relative?Thanks for the help!

Link to comment
Share on other sites

Float the image left, set a margin on the div with the paragraphs.

<html><body><div style="float:left;"><img src="http://lp-group.com/store/media/beg-latin200.gif" width="200" height="196"></div><div style="margin-left: 220px;" ><p> Latin is an ancient Indo-European language that was spoken inthe Roman Republic and the Roman Empire. The conquests of Romespread the language all around the Mediterranean and a large part of Europe.It existed in two forms: Classical Latin, used in poetry and formal prose,and Vulgar Latin, spoken by the people. After the fall of the Roman Empireand the rise of the Roman Catholic Church, Latin became the universalecclesiatical language and the lingua franca of educated Europeans.</p><p>Having lasted 2,200 years, Latin began a slow decline around the 1600s.Vulgar Latin, however, was preserved: it split into several regional dialects,which by the 800s had become the ancestors of today's Romance languages.English, though a Germanic language, derives 60% of its words from Latin:[1]largely by way of French, but partly through direct borrowings made especiallyduring the 1600s in England.</p></div><p>See the blank spot between this text and the text above? How do I get rid of that using styles?</p></body></html>

And add a real Doctype... to force Standards Mode in IE

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...