benw3 Posted October 3, 2007 Share Posted October 3, 2007 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 More sharing options...
justsomeguy Posted October 3, 2007 Share Posted October 3, 2007 Try using float:left on the image. Link to comment Share on other sites More sharing options...
benw3 Posted October 3, 2007 Author Share Posted October 3, 2007 Try using float:left on the image.That doesn't seem to work. But I know it's something simple like that. Link to comment Share on other sites More sharing options...
justsomeguy Posted October 3, 2007 Share Posted October 3, 2007 I meant on the div, not the image. Try adding display:inline also. Link to comment Share on other sites More sharing options...
benw3 Posted October 3, 2007 Author Share Posted October 3, 2007 <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 More sharing options...
jlhaslip Posted October 3, 2007 Share Posted October 3, 2007 I'm thinking that having position:relative and a float on the same element will be conflicting with each other. Try them one at a time. Link to comment Share on other sites More sharing options...
benw3 Posted October 3, 2007 Author Share Posted October 3, 2007 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 More sharing options...
jlhaslip Posted October 4, 2007 Share Posted October 4, 2007 What page? What left column? Code or link please. Link to comment Share on other sites More sharing options...
Guest samit Posted October 4, 2007 Share Posted October 4, 2007 just go to this page ... and all your doubts might get clear dude http://www.w3.org/TR/CSS21/tables.htmlpost if not solved ... Link to comment Share on other sites More sharing options...
benw3 Posted October 4, 2007 Author Share Posted October 4, 2007 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 More sharing options...
justsomeguy Posted October 4, 2007 Share Posted October 4, 2007 It might be because it's inside the table. If you move the div after the table will it still show the space? Link to comment Share on other sites More sharing options...
benw3 Posted October 5, 2007 Author Share Posted October 5, 2007 It might be because it's inside the table. If you move the div after the table will it still show the space?Yeppers. Inside or outside the table, the space shows. There's gotta be an easy answer for this. Link to comment Share on other sites More sharing options...
Err Posted October 5, 2007 Share Posted October 5, 2007 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 More sharing options...
benw3 Posted October 5, 2007 Author Share Posted October 5, 2007 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 More sharing options...
jlhaslip Posted October 6, 2007 Share Posted October 6, 2007 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.