controlling wrapping around images 1

darkreaper00 · Oct 1, 2003

so i have images on the right side of a page, and text to the left of them.. sometimes the text won't extend below the image, and when this happens, i _cannot_ get the next image/table to display underneath the first image, rather than wrapping next to it. i've got them in their own tables and everything is right-aligned, but still no good. i've considered using a blank gif the width of the window, but there's no way known to me for assigning an image to have the width of the image.

here's the prime example that i'm trying to un-kink:

http://www.davidson.edu/academic/classics/AAP/site.html

many thanks!

(also, i'm under precise instructions to make this pretty for internet explorer, so if your solution works only there, it's just as well.)

t

OSR · Oct 1, 2003

You get a much better effect by setting the Pictures themselves to Right align...

<img align="right">

The problem you have is that the 1st pic is too big and will mess up the sizing for your page and other pics - to solve this I would just make a Table and put each section into this table in their own row and then right align the pics, and type the corresponding text in each row next to the right aligned pic -- this way the 1st pic cant overlap the other sections pics or text.

I also noticed you are using H2...H4 tags inside the <body> tags of the page - these H1etc tags are header tags meant to be under the <head> tag and they dont really serve a purpose as u use them.

-- Again, just make a table, dump each sections text and pics inside a row of that table and make new rows for each section.

Rocco is the BOY!!

SHUT YOUR LIPS...

Vragabond · Oct 2, 2003

Just a little correction:

<H1>...<H6> are heading tags, used to describe the topic of the section and are used in <body> tag. See

http://www.w3.org/TR/html4/struct/global.html#h-7.5.5

for more information on these tags.

ChrisHunt · Oct 2, 2003

"these H1 etc tags are header tags meant to be under the <head> tag"

Is this the worst piece of advice ever given on tek-tips? You are, of course, using <h...> tags totally correctly.

If I understand you correctly, you want all the pictures to be right-aligned down the right hand side of the page, and for the text to flow round it to the left. You can do it using <div>s and some simple CSS without using a single table. Here's a snippet:
[tt]
<h3><a name="about"></a>About Athienou-<em>Malloura</em></h3>
<div style="float:right; clear:right; text-align:center">
<img src="area_map.jpg" width=600 border=0><br><small>Malloura Valley and surrounding locales</small>
</div>

<h4>the Malloura Valley</h4>
The area encompassing the Malloura Valley and the modern village of Athienou is rich in archaeological heritage. Within the Malloura survey area (blue rectangle), an Archaic-Roman rural sanctuary, Archaic-Roman chamber tombs at Mağara Tepeşi, remains of a Roman-Ottoman settlement, and some thirty Venetian period burials have been located. In the outlying areas, earlier excavations by other teams at Golgoi, Agios Photios, and Bamboulari have been undertaken.

<div style="float:right; clear:right; text-align:center;">
<img src="sanc_aerial.jpg" width=350 border=0><br><small> Aerial view of sanctuary, 1999.</small>
</div>

<h4>Rural Sanctuary</h4><i>Cypro-Archaic - Roman periods</i><br><br>
The sanctuary at Athienou Malloura was first discovered in 1862...
[/tt]

Though I've done it inline, you should put the "float:right; clear:right; text-align:center;" into a class in your style sheet for ease of maintenance. You may also want to add some padding-left and/or padding-bottom properties to add some whitespace around the image.

-- Chris Hunt

http://www.extracon.com

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk

darkreaper00 · Oct 2, 2003

ChrisHunt --
you certainly got it to do what you thought I wanted, and it is close, but it's not quite there. Each of the h4 lines should line up vertically with a picture to the right. Right now i have all my pictures on the right, but the text is continuous on the left and pays no attention to them (I can't ftp to the site at the moment because I'm not on their network.) Any further ideas?

Thanks for your help.

[and I myself was wondering what that fellow expects <h...> tags to do in head.]

darkreaper00 · Oct 2, 2003

actually, i think i've got it. i put a

Code:

<div style=&quot;clear:all&quot;></div>[code]
in between my elements.

thanks again for your elegant suggestion

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

controlling wrapping around images 1

darkreaper00

Technical User

OSR

Programmer

Vragabond

Programmer

ChrisHunt

Programmer

darkreaper00

Technical User

darkreaper00

Technical User

Similar threads

Part and Inventory Search

Sponsor