Can't make img and text go together properly

K

Kris

What 'doesn't work' on the second example?

This is what I was trying for:
______
| | | text here
| | | and more text
| | | some more text
------------

( ignore left >'s -- inserted for alignment)[/QUOTE]

You are concerned about the border on the left of the text, is that it?
 
M

Martin Jay

Frogleg said:
I want an image on the left and text to the right of it. Here are two
ways that don't work:

I purposely left out the photo because that shows part of what's
happening.
So how should I do this?

Option two seems to work best, however you're probably not happy about
the left border not appearing where you want it to.

Try changing the 'separate' entry in your style sheet to the following:

..separate {
margin-top: 20px;
margin-left: 340px;
border-left: 2px solid;
padding-left: 10px;
}

It will give you a margin of 20px down, which is what I suspect you
want, and a left margin of 340px, which is the width of your picture
plus 20px.
 
S

Sid Ismail

: In article <[email protected]>,
:
: > >> I want an image on the left and text to the right of it. Here are two
: > >> ways that don't work:
: > >>
: > >> http://home.earthlink.net/~absolutelyfake/theLib.htm
: > >>
: > >> I purposely left out the photo because that shows part of what's
: > >> happening.
: > >>
: > >> So how should I do this?
: > >
: > >What 'doesn't work' on the second example?
: >
: > This is what I was trying for:
: > >______
: > >| | | text here
: > >| | | and more text
: > >| | | some more text
: > >------------
: >
: > ( ignore left >'s -- inserted for alignment)


The hspace=20 gives you some whitespace between image and text.
However, the text will start at the top (in line with the top of the image).

<img src="old_lib_sml.jpg" width="320" height="211" border="1" alt=""
align="left" hspace=20>The Charles H. Taylor Library was transformed into an
Art Center when the new main library opened in 1994.
<br clear="all">


If you want the text in the middle (text < image), then you may want to
replace align=left with align=middle in the image tag.

Sid
 
S

Spartanicus

Frogleg said:
Please take another look. Why is this so difficult with CSS??!!

It isn't. Why is it so difficult for you to tell us what you want?

img{text-align:middle}
 
K

kchayka

Frogleg said:
Please take another look. Why is this so difficult with CSS??!!

Didn't you see Martin Jay's response? Assuming the "problem" is the
position of the left border on the text, then this should correct it
..separate {margin-left:340px}
 
F

Frogleg

Didn't you see Martin Jay's response? Assuming the "problem" is the
position of the left border on the text, then this should correct it
.separate {margin-left:340px}

Geez Louise! Suppose the next photo is 400px wide? Or 200? Isn't the
point of CSS that one doesn't have to handcraft every single instance
of image and text?

I thought by supplying a URL that illustrated the difficulty, it would
be clearer than explaining that...

I want to have a page with photos and text. I really *don't* want
tables because I want different size photos, with and without text,
and maybe text-only sections with all the text having a uniform look.
That is, for the text, a left margin that separates it from a graphic
or another text section. The border is a frill.

In the first (CSS) example, I have simply inserted the photo and a
<div> for text. This fails to meet my needs because the handled
sequentially from the top down.

In the 2nd (CSS) example, for reasons I obviously don't understand,
the image is being treated sort of as a single character added into
the margin(?) -- I dunno.

If this is impossibly difficult to do, I will simply make multiple
tables OR handcraft each instance as suggested above.
 
K

kchayka

Frogleg said:
Geez Louise! Suppose the next photo is 400px wide? Or 200?

I don't think you explained what you were trying to accomplish very
well, but I think I understand now.
Isn't the
point of CSS that one doesn't have to handcraft every single instance
of image and text?

No, it depends on what you are trying to accomplish. You need some
commonalities for generic CSS rules to work well. You apparently don't
have any.
I thought by supplying a URL that illustrated the difficulty, it would
be clearer than explaining that...

A URL may be worth 1000 words, but I still couldn't really tell what you
thought was wrong or what you were trying to achieve. I only noticed the
border overlaying the image in the last example and thought that was the
only trouble.
I want to have a page with photos and text. I really *don't* want
tables because I want different size photos, with and without text,
and maybe text-only sections with all the text having a uniform look.
That is, for the text, a left margin that separates it from a graphic
or another text section. The border is a frill.

If you had said this in your first post, it might have saved a lot of
guessing. ;)
In the first (CSS) example, I have simply inserted the photo and a
<div> for text. This fails to meet my needs because the handled
sequentially from the top down.

In the 2nd (CSS) example, for reasons I obviously don't understand,
the image is being treated sort of as a single character added into
the margin(?) -- I dunno.

You need to learn the difference between inline and block elements, and
basic positioning. <img> is inline, so by default it flows left to right
and line wraps like any other inline element (a, span, em, strong,
etc.). <div> is block, and by default will start on a new line like any
other block element (p, hx, ul, blockquote, etc.).

In both your CSS examples, <img> is in an anonymous box, <div> is a new
block box that follows it. It may only appear to be 1 character wide in
your browser because the image itself is 404 and the alt text is null.
It will probably look different if you used an existing image or
assigned real alt text.

In your second example, you have assigned the image attribute
align="left", which makes it behave like a left-floated element. This
automatically changes the image from inline to block, and the text now
flows next to it instead of below it. You should also drop HTML style
attributes in favor of CSS. float:left is what you want.
If this is impossibly difficult to do, I will simply make multiple
tables OR handcraft each instance as suggested above.

Tables are ishy, you don't really need them. If the border is just a
frill, why don't you forget about it altogether and just apply a right
margin to the image (or any other left-floated block)?

And I suggest using <p> instead of <div> for the text because it makes a
lot more semantic sense, and include the <img> within it because it
really belongs there. If you drop the text border and apply the margin
to the image, you shouldn't need any special styling on the text block
at all. For example

HTML
<p class="separate">
<img src="old_lib_sml.jpg" width="320" height="211" alt="(text)">
The Charles H. Taylor Library was transformed into an
Art Center when the new main library opened in 1994.
</p>

CSS
..separate img {
float:left;
margin-right: 1em;
margin-bottom: 1em;
border: 1px solid;
}

You might want to use a more descriptive class name than "separate" now.
 
F

Frogleg

Frogleg wrote:


A URL may be worth 1000 words, but I still couldn't really tell what you
thought was wrong or what you were trying to achieve. I only noticed the
border overlaying the image in the last example and thought that was the
only trouble.

And if I'd just described it, I would have gotten "where's the URL?"
You need to learn the difference between inline and block elements, and
basic positioning. <img> is inline, so by default it flows left to right
and line wraps like any other inline element (a, span, em, strong,
etc.). <div> is block, and by default will start on a new line like any
other block element (p, hx, ul, blockquote, etc.).

OK. Yes, I'm very fuzzy on block and inline distinctions. I know about
the newline aspects of <p> and <Hn>, but obviously forgot that <div>
was more or less <br>whatever<br>. So that explains the first example,
eh? I *thought* I was saying "display an image, and put this text in
the remaining area to the right" when what I actually directed was
"display an image; move on; put up my prettily-formated text."

So unless I float the image, I'm going to have a problem whatever I
do, no?
In both your CSS examples, <img> is in an anonymous box, <div> is a new
block box that follows it. It may only appear to be 1 character wide in
your browser because the image itself is 404 and the alt text is null.
It will probably look different if you used an existing image or
assigned real alt text.

Oops. And you were going along so nicely. :) AFAIK, a browser
doesn't lose its train of thought simply because it can't locate an
image. It just displays the space reserved for it. What I meant by
the image acting like one character was that it appeared as if (2nd
CSS example) I was getting the beginning of my text <div> -- margin
and border -- and the image was plunked in/on like some giant spacer.
As I said, I really don't understand how the effect was being
produced. -- margin; border; large space; text; img slapped down at
position x=0; y=current location.

Having null 'alt' text is perfectly legitimate.
Tables are ishy, you don't really need them.

Ishy?? At least tables behave more or less as one would expect.
If the border is just a
frill, why don't you forget about it altogether and just apply a right
margin to the image (or any other left-floated block)?

<sarcasm>You mean the example would work without the border?</sarcasm>
The border isn't the point. Without a border specified, the text would
*still* be up against the image - i.e., the 'margin' would still be
wrong, from my point of view. I wanted to format the text, not the
image.
And I suggest using <p> instead of <div> for the text because it makes a
lot more semantic sense, and include the <img> within it because it
really belongs there. If you drop the text border and apply the margin
to the image, you shouldn't need any special styling on the text block
at all. For example

HTML
<p class="separate">
<img src="old_lib_sml.jpg" width="320" height="211" alt="(text)">
The Charles H. Taylor Library was transformed into an
Art Center when the new main library opened in 1994.
</p>

CSS
.separate img {
float:left;
margin-right: 1em;
margin-bottom: 1em;
border: 1px solid;
}
But that's specifying the display of the *image* to make the *text*
behave. I want the *text* to behave all by itself. As it does inside
the table cell. It wouldn't care if there was text or an image or vast
empty space in the cell next to it.

Frankly, I didn't think this would be a matter requiring a lot of
discussion. I expected to read "Here's why you're wrong; do this
instead." Instead I got margins tailored to one image size, and images
tailored to format text.

Thank you all for your time. I appreciate (most of) it. I'm going back
to tables.
 
T

Titus A Ducksass - AKA broken-record

: If this is impossibly difficult to do, I will simply make multiple
: tables


Tables is a snap! Works in all browsers too!

No they don't.
How do they work in a braille browser?
 
T

Titus A Ducksass - AKA broken-record

I don't think you explained what you were trying to accomplish very
well, but I think I understand now.


No, it depends on what you are trying to accomplish. You need some
commonalities for generic CSS rules to work well. You apparently don't
have any.
No you don't, that is the whole point of CSS, it will handle all
events.

You need to understand class, div, span & html programming (or
similar) etc to get the whole picture.
A URL may be worth 1000 words, but I still couldn't really tell what you
thought was wrong or what you were trying to achieve. I only noticed the
border overlaying the image in the last example and thought that was the
only trouble.


If you had said this in your first post, it might have saved a lot of
guessing. ;)

Yes it would.

The following I have no gripes with. Emphasis on learn.
You need to learn the difference between inline and block elements, and
basic positioning. <img> is inline, so by default it flows left to right
and line wraps like any other inline element (a, span, em, strong,
etc.). <div> is block, and by default will start on a new line like any
other block element (p, hx, ul, blockquote, etc.).

In both your CSS examples, <img> is in an anonymous box, <div> is a new
block box that follows it. It may only appear to be 1 character wide in
your browser because the image itself is 404 and the alt text is null.
It will probably look different if you used an existing image or
assigned real alt text.

In your second example, you have assigned the image attribute
align="left", which makes it behave like a left-floated element. This
automatically changes the image from inline to block, and the text now
flows next to it instead of below it. You should also drop HTML style
attributes in favor of CSS. float:left is what you want.


Tables are ishy, you don't really need them. If the border is just a
frill, why don't you forget about it altogether and just apply a right
margin to the image (or any other left-floated block)?

And I suggest using <p> instead of <div> for the text because it makes a
lot more semantic sense, and include the <img> within it because it
really belongs there. If you drop the text border and apply the margin
to the image, you shouldn't need any special styling on the text block
at all. For example

HTML
<p class="separate">
<img src="old_lib_sml.jpg" width="320" height="211" alt="(text)">
The Charles H. Taylor Library was transformed into an
Art Center when the new main library opened in 1994.
</p>

CSS
.separate img {
float:left;
margin-right: 1em;
margin-bottom: 1em;
border: 1px solid;
}
!!!
You might want to use a more descriptive class name than "separate" now.
!!!
 
K

kchayka

Frogleg said:
And if I'd just described it, I would have gotten "where's the URL?"

Ah, but embellishing it with the description in your other post would
have shed a lot more light on it and saved a bunch of time. :)
Having null 'alt' text is perfectly legitimate.

No argument here. Just don't expect all browsers to handle null text for
a missing image the same way.
Ishy?? At least tables behave more or less as one would expect.

Except I apparently still don't quite understand what your expectations
are. :)

BTW, "ish" is slang in the upper midwest (USA). A polite word for
anything dirty, nasty, smelly. Fits layout tables perfectly. :)
<sarcasm>You mean the example would work without the border?</sarcasm>

No, you just don't understand how floats work. Are you expecting margins
on the non-floated element to be in addition to the space the float
takes? That's not how they work. And I'll ignore the sarcasm.
The border isn't the point. Without a border specified, the text would
*still* be up against the image - i.e., the 'margin' would still be
wrong, from my point of view.

The margin is not wrong, only your assumptions.
I wanted to format the text, not the image.

Why, what's the real difference? If you put a right margin on the image,
the text will stay that far away from it. If there is no image, why
would you want any extra margin on the left? I guess you're still not
explaining what you are trying to acheive, or at least not all the
different scenerios and their quirks.
But that's specifying the display of the *image* to make the *text*
behave. I want the *text* to behave all by itself.

So what is text supposed to do when there is no image? If nothing
special, then what is your objection? I don't get it. You seem to have
some crazy notion of how this *has* to work that may only be creating
unnecessary obstacles. Why can't you look at it from a different angle?
I expected to read "Here's why you're wrong; do this
instead." Instead I got margins tailored to one image size, and images
tailored to format text.

We are apparently still not getting your drift, or at least I'm not. You
should try expressing your problem better, i.e. here is what I want to
do (draw a mockup of each scenerio), here is what I have (URL of test
case).
I'm going back to tables.

I think you gave up too easily. Nobody likes a quitter. :(
 

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,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top