IEx Hell (again): AUTO-SIZING IMAGES in Multiple Columns w/DIV Tags &CSS

M

MISS CHIEVOUS

Once again I'm having trouble with (whaaaaaaaat else) -->MS INTERNET
EXPLORER (ver.5.5).

My graphics resize perfectly in FF . . . but are butchered when viewed
in IEx.

I went to some trouble to produce the two examples I'm providing so I
hope everyone appreciates my efforts to keep the following two
iterations stripped down and color-standardized.

EXAMPLE 1
A version of the page I'm trying to build; TEXT-ONLY; and background-
colors in place of what would be a graphic (where applicable). Page
renders perfectly in both browsers; unfortunately it isn't what I'm
trying to build. :(
http://www.geocities.com/a4248713/IExpand-O-TEXTONLY.html

EXAMPLE 2
THE PAGE I'M HAVING TROUBLE WITH IN IEX (renders fine in FF)
http://www.geocities.com/a4248713/IExpand-O-GRAPHIC.html

==============================================
EXAMPLE 1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>IExpand-O-TEXTONLY.html Ver. 01</title>

<style type="text/css">

#LEFT {
width: 16%;
height: 100%;
float: LEFT;
background-color: #FFFF99;
border: 3px dashed #000;
}

#RIGHT {
width: 82%;
float: RIGHT;
}

body,td,th {
font-family: Arial;
color: #000000;
}
</style>

</head>
<body>

<div id="LEFT">
<div style="text-align: center;">
<span style="font-weight: bold;">
<font size="+2">
SIDEBAR IMAGE IN A 16% COLUMN<br /></font></span>
</div>
</div>

<div id="RIGHT">
<table style="text-align: left; width: 100%;" border="0"
cellpadding="10" cellspacing="0">
<tbody>
<tr>

<td style="vertical-align: top; width: 33%; background-color: rgb(0,
153, 0);">
<span style="font-weight: bold;">
IMAGE IN A 33% COLUMN<br />
IMAGE IN A 33% COLUMN<br />
IMAGE IN A 33% COLUMN<br style="font-weight: bold;" /></span>
</td>

<td style="vertical-align: top; width: 33%; background-color: rgb(153,
255, 0);">
<span style="font-weight: bold;">
IMAGE IN A 33% COLUMN<br />
IMAGE IN A 33% COLUMN<br />
IMAGE IN A 33% COLUMN<br style="font-weight: bold;" /></span>
</td>

<td style="vertical-align: top; width: 33%; background-color: rgb(204,
255, 153);">
<span style="font-weight: bold;">
IMAGE IN A 33% COLUMN<br />
IMAGE IN A 33% COLUMN<br />
IMAGE IN A 33% COLUMN<br style="font-weight: bold;" /></span>
</td>

</tr>
</tbody>
</table>

<table style="text-align: left; width: 100%;" border="0"
cellpadding="0" cellspacing="0">
<tbody>
<tr>
<div style="text-align: left;">
<span style="font-weight: bold;">
<font size="+2">
(blank)<br></font></span>
</tr>
</tbody>
</table>

<table style="text-align: left; width: 100%;" border="0"
cellpadding="20" cellspacing="0">
<tbody>
<tr>

<td style="vertical-align: bottom; width: 40%; background-color: rgb
(255, 204, 255);">
<div style="text-align: center;">
<span style="font-weight: bold;">
<font size="+2">
IMAGE IN A<br>
40% COLUMN</font></span>
</td>

<td style="vertical-align: bottom; width: 60%; text-align: left;
background-color: rgb(0, 0, 0); color: WHITE;">
<span style="font-weight: bold;">
<font size="+3">
60% WIDE COLUMN<br>
CONTAINING TEXT and<br>
ALIGNING AT THE BOTTOM</font><br>
<font size="+2">
<span style="color: rgb(204, 51, 204);">(as does the ◄◄
graphic to the left)</font></span></span><br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed
felis. Aliquam sit amet felis. Mauris semper,
velit semper laoreet dictum, quam diam dictum urna, nec placerat elit
nisl in quam. Etiam augue pede, molestie eget,
rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget
odio sagittis blandit. Maecenas at nisl. Nullam
lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu
wisi. Ut ante dui, aliquet nec, congue non, accumsan
sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium
venenatis. Suspendisse cursus velit vel ligula.
Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis
suscipit. Aenean quis risus sit amet eros volutpat
ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.<br>
</td>
</tr>
</tbody>
</table>

<table style="text-align: left; width: 100%;" border="0"
cellpadding="0" cellspacing="0">
<tbody>
<tr>
<div style="text-align: left;">
<span style="font-weight: bold;">
<font size="+2">
(blank)<br></font></span>
</tr>
</tbody>
</table>

<table style="text-align: left; width: 100%;" border="0"
cellpadding="20" cellspacing="0">
<tbody>
<tr>

<td style="vertical-align: top; width: 40%; background-color: rgb(0,
153, 255);">
<div style="text-align: right;">
<span style="font-weight: bold;">
<font size="+2">
IMAGE IN A 50% COLUMN</font></span>
</td>

<td style="vertical-align: top; width: 40%; background-color: rgb(153,
204, 255);">
<div style="text-align: left;">
<span style="font-weight: bold;">
<font size="+2">
IMAGE IN A 50% COLUMN</font></span>
</td>

</tr>
</tbody>
</table>

</div>

</body>
</html>

==============================================
EXAMPLE 2

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>IExpand-O-GRAPHIC.html Ver. 01</title>

<style type="text/css">

#LEFT {
float: LEFT;
width: 16%;
height: 100%;
border: 3px dashed #000;
background-color: TRANSPARENT;
}

#RIGHT {
float: RIGHT;
width: 82%;
background-color: TRANSPARENT;
}

body,td,th {
font-family: Arial;
color: #000000;
}

</style>
</head>
<body>

<div id="LEFT">
<img src="http://www.geocities.com/a4248713/YELLOW.gif" style="width:
100%;" alt="">
</div>


<div id="RIGHT">

<table style="text-align: left; width: 100%;" cellpadding="0"
cellspacing="0">
<tbody>
<tr>
<td style="vertical-align: top; width: 33%; text-align: center;">
<img src="http://www.geocities.com/a4248713/GREEN-1.gif" style="width:
92%; height: 92%;" hspace="10" alt="">
</td>
<td style="vertical-align: top; width: 33%; text-align: center;">
<img src="http://www.geocities.com/a4248713/GREEN-2.gif" style="width:
92%; height: 92%;" hspace="10" alt="">
</td>
<td style="vertical-align: top; width: 33%; text-align: center;">
<img src="http://www.geocities.com/a4248713/GREEN-3.gif" style="width:
92%; height: 92%;" hspace="10" alt="">
</td>
</tr>
</tbody>
</table>

<table style="text-align: left; width: 100%;" border="0"
cellpadding="0" cellspacing="0">
<tbody>
<tr>
<div style="text-align: left;">
<span style="font-weight: bold;">
<font size="+2">
(blank)<br></font></span>
</tr>
</tbody>
</table>

<table style="text-align: left; width: 100%;" cellpadding="10"
cellspacing="0">
<tbody>
<tr>
<td style="vertical-align: bottom; width: 40%; text-align: center;">
<img src="http://www.geocities.com/a4248713/PINK.gif" style="width:
90%;" alt="" align="bottom">
</td>

<td style="vertical-align: bottom; width: 60%; text-align: left;
background-color: rgb(0, 0, 0); color: WHITE;">
<span style="font-weight: bold;">
<font size="+3">
60% WIDE COLUMN<br>
CONTAINING TEXT and<br>
ALIGNING AT THE BOTTOM</font><br>
<font size="+2">
<span style="color: rgb(204, 51, 204);">(as does the ◄◄
graphic to the left)</font></span></span><br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed
felis. Aliquam sit amet felis. Mauris semper,
velit semper laoreet dictum, quam diam dictum urna, nec placerat elit
nisl in quam. Etiam augue pede, molestie eget,
rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget
odio sagittis blandit. Maecenas at nisl. Nullam
lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu
wisi. Ut ante dui, aliquet nec, congue non, accumsan
sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium
venenatis. Suspendisse cursus velit vel ligula.
Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis
suscipit. Aenean quis risus sit amet eros volutpat
ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.<br>
</td>
</tr>
</tbody>
</table>

<table style="text-align: left; width: 100%;" border="0"
cellpadding="0" cellspacing="0">
<tbody>
<tr>
<div style="text-align: left;">
<span style="font-weight: bold;">
<font size="+2">
(blank)<br></font></span>
</tr>
</tbody>
</table>

<table style="text-align: left; width: 100%;" cellpadding="0"
cellspacing="0">
<tbody>
<tr>

<td style="vertical-align: top; width: 40%;">
<img src="http://www.geocities.com/a4248713/BLUE-1.gif" style="width:
92%; height: 92%;" hspace="10" alt="">
</td>

<td style="vertical-align: top; width: 40%;">
<img src="http://www.geocities.com/a4248713/BLUE-2.gif" style="width:
92%; height: 92%;" hspace="10" alt="">
</td>

</tr>
</tbody>
</table>

</div>

</body>
</html>
 
T

TYTBUDGET

Let me say that the % widths viewable in the browser are not intended
to be _literal_ -- this is just so you can see how I'm generally
carving up the real estate. I actually had to do a little fiddling
with %'s and gutters to get the result you see, as is evident in my
code.

About the closest I came to getting IEx to display properly was after
placing the entire second column in its own <DIV>. This exercise
managed to relieve RIGHT of the indignity of being shoved underneath
LEFT by pulling it up to the top of the browser; but the graphics
_still_ do not size properly, and the most vexing row -- the GREEN row
-- is butchered beyond recognition (if displaying AT ALL!).

I've been at this for three days and . . . I give up! lol

H E L L L L L L P !

Thank you my friends. :)

MC
 
M

MISS CHIEVOUS

Let me say that the % widths viewable in the browser are not intended
to be _literal_ -- this is just so you can see how I'm generally
carving up the real estate. I actually had to do a little fiddling
with %'s and gutters to get the result you see, as is evident in my
code.

About the closest I came to getting IEx to display properly was after
placing the entire second column in its own <DIV>. This exercise
managed to relieve RIGHT of the indignity of being shoved underneath
LEFT by pulling it up to the top of the browser; but the graphics
_still_ do not size properly, and the most vexing row -- the GREEN row
-- is butchered beyond recognition (if displaying AT ALL!).

I've been at this for three days and . . . I give up! lol

H E L L L L L L P !

Thank you my friends. :)

MC
 
D

dorayme

MISS CHIEVOUS said:
I've been at this for three days and . . . I give up! lol

H E L L L L L L P !
Click to expand...

In your original post you managed to say both: "A version of the page
I'm trying to build" and "...it isn't what I'm trying to build". in the
same paragraph! I know what you mean. But why bother to give this
example in the first place? Especially as it has 110 Errors, 6
warning(s) when trying to validate it. And why did you print out all the
markup and CSS there when we can see it from the URLS?
EXAMPLE 2
THE PAGE I'M HAVING TROUBLE WITH IN IEX (renders fine in FF)
http://www.geocities.com/a4248713/IExpand-O-GRAPHIC.html
Click to expand...

There are less errors in this one so why not fix those first before
proceeding *in case* these errors are causing you trouble.

I know, these "errors" are probably not the cause of your problem but it
is polite to not serve up stuff like that here and at length.

I suspect the problem that is driving you crazy is something to do with
the way IE refuses to shrink native size of images and yours are huge.

We went through this issue in the last thread you started here.

and I gave an example at:

<http://dorayme.netweaver.com.au/alt/chievous/stretch.html>

to demo the issue.

At one point and another I said:

In IE
<p> or <div>
<img ... width="100%">
</p> or </div>
will work but in a table cell, the instruction to % is in relation to
the image's native width! If you try 50% in a p or div, you will get
half the p or div's width (100% of its parent by default). At least in
IE7. In a table cell, it simply goes for the native as benchmark to %
against.

and

IE literally shrinks the cell to fit the native size of the
image. It does not listen to any percentage width instruction for the
image if the window is less than the width of the image. Having shrunk
its width to fit the native image, it is nevertheless in an approachable
mood to stretch the image. It takes notice of the % instruction then. So
if you open a window wider than the table in our one cell example, it
will stretch.
Note that IE listens carefully to width instructions in non percentage
terms, either delivered via CSS or in the traditional way in the image
element.
 
M

MISS CHIEVOUS

Hi dorayme! Geez I'm sorry, I'll get the netiquette eventually.

Okay, I not only cleaned up BOTH of those files, I rendered them both
in XHTML.

And this is a compleeeeeeeetely different animal from our one-column
masterpiece, as I'm sure you are (((painfully))) aware lol.

They're squeaky clean and ready for action! Let's get Roman!*

MC

*columns
 
M

MISS CHIEVOUS

In IE
<p> or <div>
<img ... width="100%">
</p> or </div>
will work but in a table cell, the instruction to % is in relation to
the image's native width!
Click to expand...

I had to read this about five different times before I could grasp the
concept of what you are saying here dorayme. It's no reflection on
your vernacular, it's just my right-brained obstinancy with the purely
logical. That's a compliment heh heh. ;)

I _think_ what you are saying is:
In an IEx Table Cell, <img . . . %"> tags are relative to THE IMAGE
ITSELF, not the window.

-----Is that what you are saying?

-----Then do you think my strategy should be to achieve a TABLELESS
architecture?

-----And if so, would any tables I might want to add later that
contain text and/or Fixed-Size images and do NOT need image resizing
conflict with the other tableless columns?

Sorry I posted that impure html, it was at the tail-end of a 72-hour
effort to try to do this by myself and I was just pissed off that I
had to show up here and beg for help again.

As usual, you are a treasure dorayme. I'll calm down now and just
listen. If IEx were a person I'd take my frying pan and beat the
living hell out of him lol.

MC
 
D

dorayme

MISS CHIEVOUS said:
Hi dorayme! Geez I'm sorry, I'll get the netiquette eventually.

Okay, I not only cleaned up BOTH of those files, I rendered them both
in XHTML.
Click to expand...

Uh oh! Read the current thread on alt.html "Which thread to use?" But it
is not so important in your case. You have more things to worry about,
like basic ideas such as at least understanding that tables are not the
default way to go to lay pages out. Tables are for displaying lists and
best reserved mainly for multiple lists where the relationship between
the list items is important information.

Why do I get the feeling that you are going to love this:

<http://www.hotdesign.com/seybold/everything.html>

And this is a compleeeeeeeetely different animal from our one-column
masterpiece, as I'm sure you are (((painfully))) aware lol.

They're squeaky clean and ready for action! Let's get Roman!*
Click to expand...

What is squeaky clean? No URL quoted. My newsreader is an online one and
every day is a brand new one. It is a bit like the theory that the world
was created 5 mins ago.
 
D

dorayme

MISS CHIEVOUS said:
I had to read this about five different times before I could grasp the
concept of what you are saying here dorayme. It's no reflection on
your vernacular, it's just my right-brained obstinancy with the purely
logical. That's a compliment heh heh. ;)

I _think_ what you are saying is:
In an IEx Table Cell, <img . . . %"> tags are relative to THE IMAGE
ITSELF, not the window.

-----Is that what you are saying?
Click to expand...
Yes, that's about it. The details at any rate are in the thread you
started in this group called "Help to REPEAT (not stretch!) AN IMAGE
<--HORIZONTALLY ..."
-----Then do you think my strategy should be to achieve a TABLELESS
architecture?
Click to expand...

That should be your first shot! And only resort to tables for layout
when it becomes impossible for you.
-----And if so, would any tables I might want to add later that
contain text and/or Fixed-Size images and do NOT need image resizing
conflict with the other tableless columns?
Click to expand...
Start forgetting about tables for a while, they are too much on your
mind! You are not only worrying about past tables and present tables but
As usual, you are a treasure dorayme. I'll calm down now and just
listen. If IEx were a person I'd take my frying pan and beat the
living hell out of him lol.
Click to expand...

I have offered myself as the mystery object to the BBC program
"Collectors" for one of their future shows.
 
M

MISS CHIEVOUS

What is squeaky clean?
Click to expand...

Why . . . my code. You were justifiably offended that I would post
code to the group that is rife with errors, so I cleaned it up. It
validated in Dreamweaver with no errors or warnings. It, uh . . . it
is clean isn't it?
Why do I get the feeling that you are going to love this:
<http://www.hotdesign.com/seybold/everything.html>
Click to expand...

You're right! Look, I have no aversion to tutorials dorayme; but I
just wasted three days studying probably 5 or 6 of them and _still_
couldn't get the columns to make nice in IEx. I've bookmarked the
site you recommended and I'll return to study it; but what I really
would appreciate is a live EXAMPLE that I can mod for my own use.
Everyone and their mother have text-only iterations of how to achieve
my layout -- indeed, much of what I was able to cobble together is the
direct reflection of someone else's layout, modified (however crudely)
for the graphics-intense nature of my particular page.

What I have yet to locate are examples of IEx-SCALEABLE GRAPHICS IN
MULTIPLE COLUMNS. Again, I welcome tutorial links dorayme; but if the
cell content in any of these examples is (the ubiquitous) TEXT the
information is useless to me. I've already cobbled a text version of
what I want (the infamous Example 1, above). For three days I looked
for examples of multiple columns containing (almost exclusively)
graphics but couldn't find anything. I Advance-Googled it every way I
could think of but . . . without one or two specific <TAGS> -- tags
that might be unique to the kind of graphics content that is my
particular application -- I'm wading through oceans of Example 1's.

I'll study your hotdesign site and report back if I find it has even
_one_ example of what I'm looking for; meanwhile, feel free to point
me to one if you know it >>right now heh heh.

MC
 
D

dorayme

MISS CHIEVOUS said:
Why . . . my code. You were justifiably offended that I would post
code to the group that is rife with errors, so I cleaned it up. It
validated in Dreamweaver with no errors or warnings. It, uh . . . it
is clean isn't it?
Click to expand...

I was asking you to repeat the URL. My newsreader does not keep past
posts.
 
N

Neredbojias

EXAMPLE 1
A version of the page I'm trying to build; TEXT-ONLY; and background-
colors in place of what would be a graphic (where applicable). Page
renders perfectly in both browsers; unfortunately it isn't what I'm
trying to build. :(
http://www.geocities.com/a4248713/IExpand-O-TEXTONLY.html

EXAMPLE 2
THE PAGE I'M HAVING TROUBLE WITH IN IEX (renders fine in FF)
http://www.geocities.com/a4248713/IExpand-O-GRAPHIC.html
Click to expand...

You will _never_ get it "right" until you use valid markup (31 errors).

What's this: </object></layer> ???

Furthermore, there's no doctype... Oops, wrong, there IS a doctype but
it's under some Geocities server crap which puts all versions of IE in
quirks mode. Good luck, Missy.
 
D

dorayme

MISS CHIEVOUS said:
THE PAGE I'M HAVING TROUBLE WITH IN IEX (renders fine in FF)
http://www.geocities.com/a4248713/IExpand-O-GRAPHIC.html
Click to expand...

Your page needs rewriting, away from tables, at least for the reason I
mentioned earlier about the problem IE has with stretching images in
table cells.

Here is a start:

<http://dorayme.netweaver.com.au/chievous/fraction.html>

Your images will get height from their native proportions, after the
width has been calculated.

I will try to do more when I have time or need a break from my own work.
 
M

MISS CHIEVOUS

OMG!!!!
Master, I am your disciple.
Oh and, did I mention? . . . IT WORKS! lol

I'm so bleary-eyed from studying CSS tutorials I was just about to go
fix myself a G&T and get good and cooked, when I thought, well, I'll
just check in one last time.

Strip my gears and call me shiftless.

oo oo, now let me see if I can do the rest! I'll set to work on this
bright and early tomorrow morning. If I can't finish this after
you've done the heavy lifting _I am_ pathetic lol.

Incidentally, I would like to share some very good sites that I found
(not that you need them). This is more in the way of my commitment to
post complete data in these threads so that others can learn what I'm
learning. :)

Anyhoo, in addition to your excellent link, here are some very chewy
resources for the CSS Beginner, beginning with my favorite . . .
http://www.w3.org/TR/CSS2/indexlist.html
and this link in particular . . .
http://www.w3.org/TR/CSS2/visuren.html#inline-formatting

I've been reading the official W3 tutorials for the last few hours and
my head is almost exploding with possibilities (thus obliging alcohol
heh).

The greatest epiphany (for me) in reading the W3 tutorials was
something I didn't even realize was confusing the hell out of me, and
it is simply this: What exactly defines a ROW if you can't find a
<tr> in your design? and that's when I realized that I had to break
free of the two-dimensional concept of a table (x and y); because in
CSS virtually everything can be its own "object," planted (or
floating) wherever you want it.

For beginners like me who have little-to-no experience with
stylesheets, this can be nerve wracking, since you're looking for
STARTING POSITIONS within the body of the html for (for example) the
next row, when there is no such thing. There is no "grid" that you
follow in linear terms (this row follows that row; this column
precedes that column, etc.).

If a beginner is reading this, I'll say this to you: It's like each
one of those colored blocks of graphics in my Example 2 (above) were a
separate 3x5 card; you lay them out on your desk in the position you
want them to have on your page; but when you look at the code, all you
see is them stacked.

And that of course is because all of the maneuvering and positioning
is taking place in the CSS, which is in actuality a "Function" (to use
the mathematical term) that "Operates" on each of those little blocks
of (whatever, text, graphics) to position them . . . not just sort of
where you want them (what you have with tables), but EXACTLY where you
want them show up on the screen.

It's a level of control that is at once breathtaking and intimidating.

I'll weigh in tomorrow but right now I'm going to have a very large
Bombay Sapphire Gin & Tonic.

Thank you so much my friend.

MC
 
D

dorayme

MISS CHIEVOUS said:
OMG!!!!
Master, I am your disciple.
Oh and, did I mention? . . . IT WORKS! lol
Click to expand...

You are my disciple? OK, then I will condemn you to read my theories as
I make them up. And all instructions. After you have finished your G &
T, you can start by going to outside the bedroom windows of my sleeping
enemies and read out loud all your previous table markup, use a bugle to
announce each row and cell. <g>
 
M

MISS CHIEVOUS

Better to read the CSS 2.1 spec than CSS 2.
Click to expand...

Even better if you provide a >>link. Meanwhile . . .

I've been at it now for 2 hours dorayme and what's giving me grief is
(any) attempt to put a SPACER graphic in these rows.

Your
- - - - - - - - - - - - - - -
#LEFT img {
- - - - - - - - - - - - - - -
works only as well as every image in the row is identical in size.
When I attempted to add two small 10 x 100 SPACER gifs around GREEN-2
(both browsers) ignored the global intent of the 33% ID instruction,
spread the first three images (GREEN-1 + SPACER + GREEN-2) across the
first row . . . and wrapped the remaining two images to (effectively)
a new row. In other words, changing the value from 33% to 20%
accommodates all 5 images on one row -- _including_ SPACER, which I do
not want to inherit the 33% value.

You can imagine the kinds of post-modernist effects I've been treated
to for the last 2 hours while I experimented with different ways to
get that SPACER to hold his own against GREEN-1, GREEN-2 and GREEN-3
heh heh. I even at one point thought that this might be a typically
lame IE limitation, and adjusted the height of the SPACER to be
identical to those of the three GREENs. No sale.

Hard-embedding transparent margins into each side of GREEN-2 is also
not an option, since the width would then throw the otherwise-clean %
values and skew the effect. Even if it didn't do that, this method is
too crude to be practical, as I would be modifying images without
end. And I don't mind creating SPACER images because they are
transportable. Not beautiful; just precise. :)

I'm having other issues, but right now this one is the most vexing.
Suggestions?

MC
 
D

dorayme

Even better if you provide a >>link. Meanwhile . . .
Click to expand...

Surely you could have looked this one up! Ben is right and you will
waste less time looking at 2.1

<http://tinyurl.com/cyyt6w>

Perhaps this might be a bit heavy going though for you. It is not
exactly exciting bedtime reading. There is no substitute to working your
way through at least some good basic tutorials where you can pick up
some good habits.

<http://htmldog.com/>

You might be encouraged by its introduction:

"...the CSS Beginner Tutorial assumes that you know as much about CSS as
you do about the cumulative effects of sea squirt discharge on the brain
chemistry of Germanic ammonites. The purpose of this guide is to teach
the bare essentials - just enough to get started."
I've been at it now for 2 hours dorayme and what's giving me grief is
(any) attempt to put a SPACER graphic in these rows.
Click to expand...

If you want flexibility in your project, best to fit the html with
elements and put the images inside the elements. I have no real idea
what you are doing but anyway, that has never stopped me trying to deal
with earthlings.

Previously:

<http://dorayme.netweaver.com.au/chievous/fraction.html>

#topRow img {float: left; width: 33%; text-align: center;}

and

<div id="topRow">
<img src="GREEN-1.gif" alt="">
<img src="GREEN-2.gif" alt="">
<img src="GREEN-3.gif" alt="">
</div>

but more flexible is to change to

#topRow div {float: left; width: 33%; text-align: center;}
#topRow div img {width: 92%;}

and

<div id="topRow">
<div><img src="GREEN-1.gif" alt=""></div>
<div><img src="GREEN-2.gif" alt=""></div>
<div><img src="GREEN-3.gif" alt=""></div>
</div>

The idea here is to have the three divs (not the images) divide the area
within #topRow (which itself auto fills the space to the right of the
left column). You the specify how much space within each div you want
the image to take up. This gets you that spacing look you might want and
it is very flexible too in that you can alter figures at will, you can
even class the individual divs or refer to them in other ways in the CSS
to make them different individually:

<http://dorayme.netweaver.com.au/chievous/fraction2.html>
 
M

MISS CHIEVOUS

Surely you could have looked this one up!
Click to expand...
I couldn't find an official guide >>on the W3 site<< dorayme. Many
apologies to Ben for not qualifying my earlier comment. I wasn't
being impertinent; I'm just mentally fatigued. Now that I reread it
it does sound cheap and clearly not my intent. Thank you Ben for the
suggestion -- _wherever_ a 2.1 guide can be found (and "official" or
not)! Believe me, I need all the help I can get.

Now dorayme, about this faux column style : This will work
beautifully with ROW 3 . . . but not ROWs 1 and 2.

ROW 1 needs to have exactly _2_ spacers: GREEN-1 and GREEN-3 "snap" to
fill 100% of column #RIGHT's width.

ROW 2 needs to have the same effect -- only, because there are two
images (instead of three) spanning the row, only _1_ spacer can be
present: between the two cells.

Put another way, there cannot be any spacer touching the left and
right borders of these two rows.

Now, I'll commit a blasphemy here and ask: could I just slip in a
little itty-bitty table between these DIVs? or will that throw the
whole role? Somehow I have to be able to drop spacers in between
these DIV cells.

MC
 

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

Similar Threads

SendGrid email issue in responsive Gmail 1
Positioning CSS components 1
How to wrap <td> content . 16
Interfering CSS 1
Filter table rows based on multiple checkboxes value 2
Need assistance finetuning HTML, CSS, Javascript - sticky header issue 3
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
How to position the *tooltip* comment on these buttons? 9

Members online

Total: 17 (members: 2, guests: 15)
Robots: 283

Forum statistics

Threads
473,764
Messages
2,569,566
Members
45,041
Latest member
RomeoFarnh

Latest Threads

Top