Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > staggered images in HTML

Reply
Thread Tools

staggered images in HTML

 
 
Ben Bullock
Guest
Posts: n/a
 
      07-16-2005
Hi,

I tried using something like

<h3>Title 1</h3>

<p>
<img align=left> ...</img>
a little text.
</p>

<h3> Title 2</h3>

for some images, but the problem with this was that because the text in the
paragraph was short, successive titles and images became staggered towards
the left. So "Title 2" appears on the left of the image. There is a picture
on page 134 of the O'Reilly book "HTML and XHTML" of what happens. I want to
make sure that Title 2 appears under the image, no matter how short the text
in the paragraph is.

How can I ensure this?

Thank you for any help.

Ben.

 
Reply With Quote
 
 
 
 
David Dorward
Guest
Posts: n/a
 
      07-16-2005
Ben Bullock wrote:


> <p>
> <img align=left> ...</img>
> a little text.
> </p>
> for some images, but the problem with this was that because the text in
> the paragraph was short, successive titles and images became staggered
> towards the left.


The align attribute is deprecated in favour of the float property. Use that
in combination with the clear property.

http://www.w3.org/TR/CSS21/visuren.html#floats

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is
 
Reply With Quote
 
 
 
 
Jonathan N. Little
Guest
Posts: n/a
 
      07-16-2005
Ben Bullock wrote:
> Hi,
>
> I tried using something like
>
> <h3>Title 1</h3>
>
> <p>
> <img align=left> ...</img>
> a little text.
> </p>
>
> <h3> Title 2</h3>
>
> for some images, but the problem with this was that because the text in
> the paragraph was short, successive titles and images became staggered
> towards the left. So "Title 2" appears on the left of the image. There
> is a picture on page 134 of the O'Reilly book "HTML and XHTML" of what
> happens. I want to make sure that Title 2 appears under the image, no
> matter how short the text in the paragraph is.
>
> How can I ensure this?
>
> Thank you for any help.
>
> Ben.
>


1: The answer could have been found by searching this NG with 'float'

2: <img align=left> ...*</img>*, image element does not have an ending tag.

3: <img *align=left*> ...</img> attribute *align* is deprecated in 4.01
you should style the element with float

4: On way would be to clear the floats with your heading...


CSS:
H3 { clear: both; }
..onLeft { float: left; }


HTML:

<h3>Short Title 1 </h3>
<p><img src="somepix1.jpg" alt="somepix1">
text about somepix1 ...
</p>

<h3>Short Title 2 </h3>
<p><img src="somepix2.jpg" alt="somepix2">
text about somepix2 ...
</p>
..
..
..
--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
Sid Ismail
Guest
Posts: n/a
 
      07-16-2005
On Sun, 17 Jul 2005 00:03:59 +0900, "Ben Bullock" <(E-Mail Removed)>
wrote:

: Hi,
:
: I tried using something like
:
: <h3>Title 1</h3>
:
: <p>
: <img align=left> ...</img>
: a little text.
: </p>
:


Add: <br clear="all"> here

Sid


: <h3> Title 2</h3>
:
: for some images, but the problem with this was that because the text in the
: paragraph was short, successive titles and images became staggered towards
: the left. So "Title 2" appears on the left of the image. There is a picture
: on page 134 of the O'Reilly book "HTML and XHTML" of what happens. I want to
: make sure that Title 2 appears under the image, no matter how short the text
: in the paragraph is.
:
: How can I ensure this?
:
: Thank you for any help.
:
: Ben.
:


 
Reply With Quote
 
Ben Bullock
Guest
Posts: n/a
 
      07-17-2005

"Jonathan N. Little" <(E-Mail Removed)> wrote in message
news:gcaCe.2595$(E-Mail Removed)...
> Ben Bullock wrote:


> 2: <img align=left> ...*</img>*, image element does not have an ending
> tag.
>
> 3: <img *align=left*> ...</img> attribute *align* is deprecated in 4.01
> you should style the element with float
>
> 4: On way would be to clear the floats with your heading...


Thanks for your help!

>
>
> CSS:
> H3 { clear: both; }
> .onLeft { float: left; }
>
>
> HTML:
>
> <h3>Short Title 1 </h3>
> <p><img src="somepix1.jpg" alt="somepix1">
> text about somepix1 ...
> </p>
>
> <h3>Short Title 2 </h3>
> <p><img src="somepix2.jpg" alt="somepix2">
> text about somepix2 ...
> </p>
>


Thanks for taking the time to answer my question!

I'm recently trying to update my rather-lame-from-an-html-point-of-view web
site http://www.sljfaq.org/, and I bought the O'Reilly books about CSS and
HTML, and am gradually studying my way through them. I'll use your examples
as hints for studying them.


 
Reply With Quote
 
Ben Bullock
Guest
Posts: n/a
 
      07-17-2005

"Sid Ismail" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> On Sun, 17 Jul 2005 00:03:59 +0900, "Ben Bullock" <(E-Mail Removed)>
> wrote:


> Add: <br clear="all"> here


I'll try it. Thank you for your help.


 
Reply With Quote
 
Ben Bullock
Guest
Posts: n/a
 
      07-17-2005

"David Dorward" <(E-Mail Removed)> wrote in message
news:dbb9po$8sm$1$(E-Mail Removed)...
> Ben Bullock wrote:
>
>
>> <p>
>> <img align=left> ...</img>
>> a little text.
>> </p>
>> for some images, but the problem with this was that because the text in
>> the paragraph was short, successive titles and images became staggered
>> towards the left.

>
> The align attribute is deprecated in favour of the float property. Use
> that
> in combination with the clear property.
>
> http://www.w3.org/TR/CSS21/visuren.html#floats


Thanks for the link. I've had a quick look at it. It's a little hard to
understand at first glance so I'll have to think a little more about it.

Thanks again,

Ben.


 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      07-17-2005
> From: "Ben Bullock" <(E-Mail Removed)>

> I'm recently trying to update my rather-lame-from-an-html-point-of-view web
> site http://www.sljfaq.org/, and I bought the O'Reilly books about CSS and
> HTML, and am gradually studying my way through them. I'll use your examples
> as hints for studying them.
>
>



You do need to tidy this up. Some things:

1.

your style sheet has a missing colon.

body {
margin-left: 5%; margin-right: 5%;
font-family Verdana, sans-serif;
}


2.

<li>
A <a href=hon/contents.html>list of book reviews by readers of <a
href="news:sci.lang.japan"><em>sci.lang.japan</em></a>
and others</a>.

has nested links (you leave out a closing anchor).

And you really should use href="..."



dorayme


 
Reply With Quote
 
Ben Bullock
Guest
Posts: n/a
 
      07-17-2005

"dorayme" <(E-Mail Removed)> wrote in message
news:BEFFF414.14A49%(E-Mail Removed)...
>> From: "Ben Bullock" <(E-Mail Removed)>

>
>> I'm recently trying to update my rather-lame-from-an-html-point-of-view
>> web
>> site http://www.sljfaq.org/, and I bought the O'Reilly books about CSS
>> and
>> HTML, and am gradually studying my way through them. I'll use your
>> examples
>> as hints for studying them.


> You do need to tidy this up. Some things:
>
> 1.
>
> your style sheet has a missing colon.
>
> body {
> margin-left: 5%; margin-right: 5%;
> font-family Verdana, sans-serif;
> }


Thanks for the tip! I've barely begun to do style sheets at the moment, this
was an experimental effort.

Thank you for taking the time to look at those details.

> 2.
>
> <li>
> A <a href=hon/contents.html>list of book reviews by readers of <a
> href="news:sci.lang.japan"><em>sci.lang.japan</em></a>
> and others</a>.
>
> has nested links (you leave out a closing anchor).


Thanks for spotting that. As you can probably guess, the file was
auto-generated by a computer program, and it substituted this "news" link in
automatically.

BTW, about the "href=news" thing, the HTML book of O'Reilly says that it
shouldn't be used much. As this is the FAQ for a usenet newsgroup, I think
it's highly appropriate to provide this type of link, and also the links
(see also http://www.sljfaq.org/afaq/related-newsgroups.html) seem to work
perfectly well on Internet Explorer and FireFox. It pops up the news client,
temporarily subscribes me to the relevant group, then when I shut the news
client down it asks me if I want to keep on being subscribed or not. So it
seems absolutely fine from my point of view.

But ... does anyone else have anything different to relate?

> And you really should use href="..."


Right, I remember getting complaints about that from the HTML validator at
www.w3.org.

I changed most of it to use quotes, as you can see, but that bit only
doesn't have them yet.

Thanks for your input.

Ben.

 
Reply With Quote
 
Ben Bullock
Guest
Posts: n/a
 
      07-18-2005

"Ben Bullock" <(E-Mail Removed)> wrote in message
news:dbb7ku$die$(E-Mail Removed)-u.ac.jp...

I've now rewritten the page I was getting "image problems" with, and in case
anyone's interested it can be seen at the following address:

http://www.sljfaq.org/afaq/calligraphy.html.

In the end I went with a style sheet solution.

I'm not sure it's perfect but the images are displaying roughly OK on IE and
Mozilla.

This is a work in progress, so any suggestions are much appreciated.

Thanks very much to David Dorward, Jonathon N. Little, dorayme, and Sid
Ismail for the help so far.

Ben.

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
ASP Staggered Horizontal Menus -- Reduce the width of first submenuitem for upper menu. Jim ASP .Net 0 05-27-2009 10:36 PM
firefox html, my downloaded html and firebug html different? Adam Akhtar Ruby 9 08-16-2008 07:55 PM
DataList with RadioButtons + Images: How to click on the images to activate the radiobutton? Luis Esteban Valencia Muņoz ASP .Net 0 06-03-2005 03:22 PM
Track Images added to images folder and subfolders - send out email alerts ASP .Net 4 01-04-2005 10:01 PM
How to send an html message with inline images and text for non html mail clients? John Sutter ASP .Net 0 01-13-2004 08:08 PM



Advertisments