Question: Aligning an image + text

R

Ridefort

Good evening;

I need to align an image with some text underneath it, i have made
something like this:

<p><img align=right vspace="3" hspace="5" src="image.jpg" alt=""><br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

Unfortunatly it doesnt do the trick.

Can someone explain to me how i can align an image to the left/right
and have some text beneath that is equally aligned as the image?!
No need to bother with browsertypes or whatever, its just for
personnal use.

TIA
Andre Linoge
 
J

Jonathan N. Little

Ridefort said:
Good evening;

I need to align an image with some text underneath it, i have made
something like this:

<p><img align=right vspace="3" hspace="5" src="image.jpg" alt=""><br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

Unfortunatly it doesnt do the trick.

Can someone explain to me how i can align an image to the left/right
and have some text beneath that is equally aligned as the image?!
No need to bother with browsertypes or whatever, its just for
personnal use.

TIA
Andre Linoge

CSS:
..pixboxleft {
float: left; margin: 0 .5em .5em 0; border: 1px solid black;
}
..pixboxleft IMG {
display: block;
}
..pixboxright {
float: right; margin: 0 0 .5em .5em; border: 1px solid black;
}
..pixboxright IMG {
display: block;
}



HTML:
<div class="pixboxleft">
<img src="SomeImage.jpg" alt="some image">
Just some text about the image
</div>

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. ...


I use a border to show you what it was doing, if your want to constrain
the image text to the width of the image, i.e., make it wrap rather than
expand the DIV, then you need to explicitly set a width to the DIV
accordingly
 
D

dorayme

Ridefort said:
Good evening;

I need to align an image with some text underneath it, i have made
something like this:

<p><img align=right vspace="3" hspace="5" src="image.jpg" alt=""><br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

Unfortunatly it doesnt do the trick.

Can someone explain to me how i can align an image to the left/right
and have some text beneath that is equally aligned as the image?!

When you say equally aligned, this might mean "underneath the
picture" wherever the pic is. There is a further thing you might
be wanting: where (left, right, or centred) under the pic.

If you want quick and simple and on the left and text left under
pic, this should work:

<div style="width:Wpx">
<img src="image.jpg" width="W" height="H" alt="some text"></br>
Text beneath
</div>

If you want the pic and text to have some grace from the margin,
you can use some extras in the css style like style="width:Wpx;
margin-left:20px"

If you want better control altogether, and better practice, take
Jonathan's advice. In which case you better make a separate css
sheet and link it in the head to the html...
 
D

David Graham

CSS:
.pixboxleft IMG {
display: block;
}

Hi
I understand your css OK but what is the display: block; for?
I commented this out and it doesn't seem to do anything. Why can't the img
element remain an inline element?
thanks
David
 
D

David Graham

David Graham said:
Hi
I understand your css OK but what is the display: block; for?
I commented this out and it doesn't seem to do anything. Why can't the img
element remain an inline element?
thanks
David
More detail.........
The display: block does not do anything when the css is used for displaying
the image on the right. Without the display block when the div is floated to
the left, the image sits along side the text within the floated div as you
would expext. Funny thing is though, the text within the floated div always
sits below the image when the div is floated right, regardless of the
instruction display: block - why is this?
thanks
David
 
J

Jonathan N. Little

David said:
Hi
I understand your css OK but what is the display: block; for?
I commented this out and it doesn't seem to do anything. Why can't the img
element remain an inline element?
thanks
David
Because images are displayed inline by default, if you do not explicitly
set the width of the containing block element and with viewport is is
wide enough the text will not wrap under image

+------DIV-------+ The rest of
|[ IMAGE ] text | your page
+----------------+ content ...

Image as block

+----DIV--+ The rest of your
|[ IMAGE ]| page content ...
| text |
+---------+
 
D

David Graham

Jonathan N. Little said:
David said:
Hi
I understand your css OK but what is the display: block; for?
I commented this out and it doesn't seem to do anything. Why can't the img
element remain an inline element?
thanks
David
Because images are displayed inline by default, if you do not explicitly
set the width of the containing block element and with viewport is is
wide enough the text will not wrap under image

+------DIV-------+ The rest of
|[ IMAGE ] text | your page
+----------------+ content ...

Image as block

+----DIV--+ The rest of your
|[ IMAGE ]| page content ...
| text |
+---------+
Thanks for that Jonathan but did you see my later post about float right not
affected by display: block, it always behaves like that regardless of
whether it is stipulated in the css or not were as float left does need the
rule display:block. Why?
 
J

Jonathan N. Little

David said:
David Graham wrote:

CSS:
.pixboxleft IMG {
display: block;
}


Hi
I understand your css OK but what is the display: block; for?
I commented this out and it doesn't seem to do anything. Why can't the
img
element remain an inline element?
thanks
David

Because images are displayed inline by default, if you do not explicitly
set the width of the containing block element and with viewport is is
wide enough the text will not wrap under image

+------DIV-------+ The rest of
|[ IMAGE ] text | your page
+----------------+ content ...

Image as block

+----DIV--+ The rest of your
|[ IMAGE ]| page content ...
| text |
+---------+
Thanks for that Jonathan but did you see my later post about float right not
affected by display: block, it always behaves like that regardless of
whether it is stipulated in the css or not were as float left does need the
rule display:block. Why?

..pixboxright {
float: right; margin: 0 0 .5em .5em; border: 1px solid black;
}

/*
With IMG to block disabled
..pixboxright IMG { display: block; }
*/

Produces:

The rest of +------DIV-------+
your page |[ IMAGE ] text |
content ... +----------------+

if view port is wide enough (Moz 1.7.12, FF1.5, O7.5 NN7.2 IE5.0-6.0 Of
course float broken in IE4.0 & NN4.x on Win2K)
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top