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

M

MISS CHIEVOUS

Okay I just tried your fix Ben and it looks great . . . on ROW3.

The problem with ROW1 is, as you pointed out, the odd 1%.

Now I just had a wild idea so let me run this by you:

1. Reduce the left margin for ROW1 by _exactly_ 1%
(thus, expanding it by 1%)

2. Right-Align-orient the ROW -- not the DIVs, but the whole row
(called #RIGHT)
(forcing it to snap to the right . . . even as it has just expanded
itself by 1%)

This of course will oblige another container to hold the balance of
#RIGHT with its original left margin intact. I don't even know how I
can do this but I'm going to try lol. Thanks Ben.

MC
 
M

MISS CHIEVOUS

Well, try as I might I can't get it to work. Here, at any rate, are
my efforts thus far:
http://www.geocities.com/a4248713/IExpand-O-GRAPHIC_2.html

My pathetic efforts at getting ROW2 to display the way I want it to --
with _both_ the pink image + the text box to its right vertically
aligned to the BOTTOM of the row and at no time OVERLAPPING :( -- are
evident in the number of ways I tried to get this to work by
surrounding everything with DIV tags (yes, well . . .).

That's nothing compared to some of the abstract art the prior _89_
iterations displayed heh heh. ;)

To the bar.

MC
 
D

dorayme

MISS CHIEVOUS said:
I couldn't find an official guide >>on the W3 site...
Thank you Ben for the suggestion -- _wherever_ a 2.1 guide can be
found (and "official" or
not)!

You make it sound as if you still can't find it? Did I not give you a
link in my last post? It was the first result that should have come up
in Google for "CSS 2.1"

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

Not so faux! These are the real thing in CSS! Faux columning usually
refers to a background image that runs down in a rectangle, making the
appearance of a column. <g/2>

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

Well, it depends on quite what you want to do. It is not clear. You have
on your images "33% col width graphic" but it seems you are not *really*
wanting the three graphics to each take up a third of the space to the
right of the yellow left image. Perhaps you are wanting the three divs I
have given you to divide the area into 3 but you wish to have a space
between green1 and green2, and a space between green2 and green 3? If
so, Ben's suggestion is perfect, just text-align: left inside the first
and last of the floated divs, but text-align: center the middle div.

,http://dorayme.netweaver.com.au/chievous/fraction3.html>


ROW 2 needs ....

We have not come to row 2 or 3 yet. We are proceeding at a careful rate.
Tell me when you are perfectly happy with row 1

Now, I'll commit a blasphemy here and ask: could I just slip in a
little itty-bitty table between these DIVs?

No! You must not throw in little itsbitsy tables or spacer gifs
anywhere! said:
or will that throw the
whole role? Somehow I have to be able to drop spacers in between
these DIV cells.

Yes, it not only throws things on your website out but I have evidence
that it actually disturbs the precise movements of the earth's
rotational habits.
 
M

MISS CHIEVOUS

Well, it depends on quite what you want to do. It is not clear.
You're right, I'm not clear. Worse, I've stealth-altered one row on
you without telling you that I had changed the column widths (ROW2,
now 30% and 70%, respectively, as you'll observe on my PINK graphic).

This is almost exclusively an issue viz gutters dorayme ("margins" in
the parlance of CSS; "spacers" in my stubborn Tableish) -- have them?
don't have them? have them at key places?

Let's take your example:
http://dorayme.netweaver.com.au/chievous/fraction3.html
This is, simply put, exquisite; it is one way of rendering the page I
am contemplating; and I may end up using it. 33.3%. Who would have
thought IEx could count to 100!? Well strip my gears and call me
shiftless lol. Now THAT's what I call precision. A very pleasant
surprise.

Gentlemen, before I continue to be any more ambivalent about this
concept -- and most especially since this exercise involves _very_
deep CSS that I can't easily mod (that is now painfully apparent to
me) -- I've uploaded three different iterations of this concept _in
addition to_ the fourth which dorayme provided (and which is a serious
contender). I've rendered each of these schematics as graphics
and . . . well I might as well say it now, since there is _nothing_
about this layout that is intuitive to me and I'll only be coming back
here to ask about it at a later date: I will need both a header row
and a footer row.

I've laid this out very nicely for you:
http://www.geocities.com/a4248713/DIV_CONCEPTS.html

Each image is CLICKABLE and takes you to the full-sized version of the
graphic. I wanted to be able to lay these out side-by-side on one
page so their more subtle variations are more easily
distinguishable.

The yellow is what I call a "VIEWPORT" (for lack of a better term and
since the word "container" is recklessly ubiquitous) (I don't like to
have to hunt for stuff in these arcane html files) (it was that or
"GORILLA" lol), and this yellow represents a modest gutter around the
three sides of the page to which it has relevance (TOP, LEFT and
RIGHT).

I will likely have a background image, and now you also know why I
want those grey areas ("spacers" in Tableish): I want my background
tiles/color "peeking" around the cells. I have an iteration of your
FRACTION3 -- the third graphic entitled ABSOLUTE.jpg. Click it to
zoom in.

I think this should clear up a great deal of ambiguity that arose from
my expectation that I would be able to easily edit _any_ tableless
column design, and . . . I yield! I yield! Okay, I really _really_
get that this coding is beyond anything I can decipher. I'm over it
and I'm taking my bruised ego back to the tutorials you and Ben
shared. I thank you so much for helping me with this -- BOTH OF YOU.
You guys are just the greatest.

MC

P.S. dorayme you crack me up!
"You are using a" (((cue theme from JAWS))) "S P A C E R!"

aaaaaaahahaha!
busted!
 
M

MISS CHIEVOUS

I almost forgot to add -- the solid triangles indicate positioning
(eg. TOP-RIGHT, BOTTOM-LEFT) and the little girl represents that the
cell is exclusively a graphic.

That is self evident; but in ROW2, what you can't easily see is that
the graphic that sits in the PINK CELL needs to be positioned at thegets. The TEXT CELL must _not_ wrap around that pink cell -- the
graphic it contains (30%) snaps to the BOTTOM + RIGHT of its cell, as
you can see from the pink triangle. This was just driving me crazy
yesterday because I couldn't keep the text from wrapping around PINK
when I experimented with shrinking the window.

MC
 
D

dorayme

MISS CHIEVOUS said:
Let's take your example:
http://dorayme.netweaver.com.au/chievous/fraction3.html
This is, simply put, exquisite; it is one way of rendering the page I
am contemplating; and I may end up using it. 33.3%. Who would have
thought IEx could count to 100!? Well strip my gears and call me
shiftless lol. Now THAT's what I call precision. A very pleasant
surprise.

Real precision would be 33.3 with a dot on top of the last '3' - to get
as thirdyish as possible. I looked into the CSS 2.1 specs and could not
see that this would be understood by browsers. Thus, my gears were
stripped and I was left shiftless. I turned to drink. Strong drink.
 
M

MISS CHIEVOUS

OMG! aaahaha! The first blue HR is hanging off to the right of the
viewport in Firefox.

Yes Ladies & Gentlemen, you now have incontrovertible proof that I
don't have a goddamned clue about what I am doing lol.

M (hic!) C
 
M

MISS CHIEVOUS

In that case, what difference does it make whether they are positioned
top-right or bottom-left etc.? In the pictures, each image completely
fills its cell.

Yes, you're absolutely correct. Er, just ignore everything but PINK
whose positioning is relevant.

Remember Ben, I'm in Tables Detox at the moment lol.

MC
 
M

MISS CHIEVOUS

FRACTION4 is missing some critical tags (head, /body etc.) so I first
cleaned it up so it would validate. It displayed correctly in FF, but
not in IEx. I'm trying to decipher what is for me very deep CSS and
reword it into functions I can easily understand; so forgive my
kindergarten-level rewording of some of your original tags dorayme

It will come as no surprise that my fiddling has over-peppered the
sauce (groan) and now what is happening -- for reasons I can't for the
life of me fathom -- is that GREEN-2 manifests abberant horizontal
spacing. I'm certain it's GREEN-2 because it's visible in the <DIV>
box in Dreamweaver. In FF it's apparent; in IEx it has actually
shoved GREEN-3 down to its own row. Neither browser recognizes the
background/font colors in the text column.

The main non-tidying-up difference I made to your FRACTION4 dorayme
was to introduce a class that you hadn't actually defined:
- - - - - - - - - - - - - - -
<div class="first">
- - - - - - - - - - - - - - -

It makes its appearance as "TEXTL" in my latest effort, which you can
view here:
http://www.geocities.com/a4248713/IExpand-O-GRAPHIC_3.html

MC
 
D

dorayme

Actually, it validated anyway! But sorry about that, something in my
hurried prep stripped the tags... I fixed just now, hope it did not
confuse you too much.

I have reworded some of the IDs and classes according to your new
nomenclature (well done, yours is better!). I notice you have introduced
some new classes to target some text-aligning. This is ok (except you do
not need your TEXTL {text-align: left;} and .TEXTC {text-align: left;}.
The thing about classes is that they can have multiple members. So just
one of these would do for you. Some quick homework, not deep:

1. Read up what the difference between id and class is.

2. Try not to use capital letters for calls names and IDs or much else
in your HTML (because, at least, I might be seeing the source early in
the morning after a heavy night and it looks like shouting and hurts my

Perhaps it will be useful to demystify the way I targeted some elements?
Perhaps you are referring to some of these things as "deep"?

#column1 {float: left; width: 16%;}
#column1 img {width: 100%;}

This second line simply says that the images in #column1 are to have
this width style. And this saves you from having to make a special
class.

Here is another great saver from an earlier fraction (fraction2.html):

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

This saves having to class all three floated divs that are inside
#topRow, *all* the divs inside are to be styled as said.

You've got text-align: left on TEXTC. It should be text-align: center.
Actually, not really, I classed that in fraction4 to instantiate a
suggestion of Ben's to cope with a spacing problem you had. This allowed
the three divs that were taking a third of the horizontal spacing of
column2 different alignments of text and images within. Now, each is
classed so we have "first", "second, and "third" and the CSS goes:

..second {text-align: center;}
..third {text-align: right;}

Why have I not put in css for ".first"? Because text-align: left is
default. Why did I bother to class the leftmost div as "first" if I was
not going to target it? Good question! The answer is that it would have
looked a bit stupid to have "second, and "third" without a "first".
Perhaps better names could be used! <g>

Here is fraction5 tidied up to make the CSS simpler to understand and an
added bonus to you. I have added the blue gifs in two divs as a third
row!

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

Don't worry about anything but Firefox or Safari or Opera for the moment.

The moment is coming when we must get you a header and a footer. But
first things first!

When we have done having fun here, we might have to revert to tables
after all, would that not be something to have several G&T's to
celebrate (as in a wake). <g>

Notice what we are doing here, a very particular set layout you have
decided upon. Usually this is not the best way to go in web design,
better to let things be more flexible and fluid. But never mind all that
stuff, you might be picking up a few things along the way here. And
besides, it is what probably a majority of webpage makers do anyway, fix
an idea of the look! Let us leave this issue aside for now.
 
M

MISS CHIEVOUS

You've got text-align: left on TEXTC. It should be text-align: center.

Busted! Wow am I embarrassed. I believe that calls for a "DUH" lol.
Thanks Ben. :)
You haven't set any as far as I can see.

Sorry for the run-on paragraph there. I had that sentence placed in
its own paragraph but it looked so lonely I pulled it up into the
paragraph prior. I was of course referring to the Text cell in ROW2.

MC
 
M

MISS CHIEVOUS

I have reworded some of the IDs and classes according to your new
nomenclature (well done, yours is better!). I notice you have introduced
some new classes to target some text-aligning. This is ok (except you do
not need your TEXTL {text-align: left;} and .TEXTC {text-align: left;}.
The thing about classes is that they can have multiple members. So just
one of these would do for you. Some quick homework, not deep:

1. Read up what the difference between id and class is.

Yes, I read that at W3, _very_ helpful! And particularly so, as every
page uses some form of horizontal alignment, and who the hell wants to
have to reinvent the wheel every time you want something right-aligned
(as one example)? I also spent a great deal of time looking at
_Inline vs. Blocked_ elements; and _height_ control, here:
http://www.w3schools.com/Css/css_dimension.asp
with (someone's) very thorough page on the IEx-height-hack here:
http://www.greywyvern.com/code/min-height-hack
Don't worry about anything but Firefox or Safari or Opera for the moment. .. . . . and
Notice what we are doing here, a very particular set layout you have
decided upon. Usually this is not the best way to go in web design,
better to let things be more flexible and fluid. But never mind all that
stuff, you might be picking up a few things along the way here. And
besides, it is what probably a majority of webpage makers do anyway, fix
an idea of the look!

You've mentioned this a couple of times, but surely it is evident that
the only reason I put myself through this grief is for that segment of
the population still using these earlier iterations of IEx. dorayme
(observe Master, I do not capitalize) I personally never touch IEx. I
use Firefox, and nothin' but Firefox. It isn't even that I am a
generous soul. No, I simply cannot tolerate the thought of deviant
layout. Change the font if you must; but when I want a text cell (or
a graphic) to assume a particular _spacial_ relationship to the other
cells on the page -- and they, to the edges of the viewport -- I can't
have elements leaping about. I personally only use Firefox, just to
settle this issue once and for all. Now where did I put that
whip . . . ;)
Try not to use capital letters for calls names and IDs or much else in
your HTML (snip)

Now dorayme I'm going to ask you to be patient with me. If you'll
look closely at my code you'll notice that it always manifests three
characteristics:
1. The entire page of code is >>block-aligned left
2. Almost every tag resides >>on its own separate line
3. <div> and class >>names are in ALL CAPS

This is because it makes it easier for me to ((d.i.s.s.e.c.t)) both
the HTML and the CSS code to >>learn what I am doing. Experienced
coders such as yourself and Ben have doubtless been examining and
working with HTML and CSS code for years; my net experience with these
both _combined_ can be measured in weeks. I have done some light
programming in C++ and Visual Basic, so I am probably more comfortable
with programming languages than your average person; but . . . even
there I found that by following the above three standards >>while
learning<< helped me to not only understand the functions I was
coding, but to _instantly_ diagnose errors. If you think getting a
row of graphics to expand properly is a headache, imagine how much fun
it is to diagnose why a function -- embedded in 11,439 lines of code
-- is endlessly looping heh heh.

When I place things in caps, split them onto their own lines, and
finally pull everything to the block-left margin I am not trying to
deviate from well-established coding protocol. My intent is not to
shout, it is to SEE. Think of these standards as the "training
wheels" I use until I am able to balance myself properly on two
wheels. Once I am comfortable with looking at these tags in their
native lower-case, run-on formats, I'll not need to [frame] the code
so. The day will come when my code will achieve the aesthetic you are
addressing; that, I must tell you my friend, is YEARS away.

But I am not insensitive, and will hereafter produce iterations in all
lower case for your benefit. I will append "lc" to the end of the
file name. And I'll even run-on the entire title.
When we have done having fun here, we might have to revert to tables
after all, would that not be something to have several G&T's to
celebrate (as in a wake). <g>

I'll let you in on a little secret dorayme: It is! Fun, I mean. Oh
certainly it's frustrating; but what on earth could be as uniquely
_exquisite_ as the logic of a programming code? The CSS you're
helping me with here is frustrating only because I haven't learned it
yet. Give me five years with this and I'll be a terror heh heh. Oh
and, I will absolutely learn it; all of it; thoroughly; in a
disciplined course of study with the (not-inexpensive!) training books
I've purchased. Mostly it hurts my wounded vanity to have to admit I
need help. I take great pride in figuring these things out on my own;
but . . . Explorer! unnghhh! I'll kill it! lol

For the balance of your excellent post dorayme permit me to give it
the benefit of a fresh pair of eyes. It's tax time here in the states
and I'm in the middle of a project that is really and _truly_
terrifying: Accounting! lol

Forward men.
To the bar.

MC
 
D

dorayme

MISS CHIEVOUS said:
....

You've mentioned this a couple of times, but surely it is evident that
the only reason I put myself through this grief is for that segment of
the population still using these earlier iterations of IEx.

It was meant just as a temporary measure, when you are happy with how it
works in FF, we will then take a look at IE...

I suspect you will be wanting full length columns soon? For example, are
interested in what you are now calling column1 (the left one with the
yellow) going all the way down to the bottom of the viewport? I have
left 100% columns going on special (for free) for at least the next few
weeks. No hurry. <g>
 
M

MISS CHIEVOUS

Why did I bother to class the leftmost div as "first" if I was not going
to target it? Good question! The answer is that it would have looked
a bit stupid to have "second, and "third" without a "first".

Could we agree to not "jump the rails" dorayme and assume defaults
that I haven't yet learned? Let's agree -- just for now!! -- on the
following:
• no COLUMN2 and COLUMN3 . . . without a COLUMN1
• no ROW2 and ROW3 . . . without a ROW1
• no TEXTC and TEXTR . . . without a TEXTL
Perhaps it will be useful to demystify the way I targeted some elements?
Perhaps you are referring to some of these things as "deep"? (snip)

dorayme

Yes.

This:
- - - - - - - - - - - - - - - - - -
}

/*
- - - - - - - - - - - - - - - - - -

And this:
- - - - - - - - - - - - - - - - - -
} */
- - - - - - - - - - - - - - - - - -

And this:
- - - - - - - - - - - - - - - - - -
+
- - - - - - - - - - - - - - - - - -

And this:
- - - - - - - - - - - - - - - - - -
div+div
- - - - - - - - - - - - - - - - - -

And this:
- - - - - - - - - - - - - - - - - -
div+div+div
- - - - - - - - - - - - - - - - - -
to be precise lol.

May I pause here to clarify my understanding of DIV tags?
There is no DIV tag that "starts a row".
There is no DIV tag that "ends a row".
A "Row" is, nonetheless, created by any combination of DIV tags whose
widths total 100% of whatever container they have been placed in.

Could you please confirm/modify these three concepts for me? It will
go a long way toward conditioning me to stop thinking in the two-
dimensional (x, y) terms of a table. :)

An idea occurred to me (oh no!!!! lol) . . . ahem, as I was saying, it
occurred to me that might it not be useful to have named elements
whose sole function is to perform as SPACERS? -- give them names like
"SPC01" and "SPC17" or some such?

And lastly, is it possible to have -- just as a hypothetical -- a
__20% / 60% / 20%__ horizontal layout in which 20% are DIVs and the
60% cell is a Table? Crudely put:
.. . . . . . . . . <DIV>foo</DIV> <table></table> <DIV>foo</DIV> ?

MC
 
M

MISS CHIEVOUS

That's about right if you substitute "float" for "DIV tag".
Hmmmm.

You can set "clear" on a float which sort of makes it "start a row".

Very interesting.
Ordinary sibling blocks that aren't floated go one under the other
regardless of how wide they are.

Okay, now, do you mean to tell me that _if_ the CSS being applied to a
DIV tag has _not_ given it the instruction to float, it will appear on
its own row? Now that is interesting. A very handy way to force a
row. I do recall having tried this but . . . it's all a blur (this is
what you get when you subject me to 48 straight hours of math: A
stark raving lunatic lol).
In CSS, there are block boxes, inline boxes, floats, table-cell boxes,
etc. Those are related to HTML elements only by the default stylesheet.

Ben, what do you mean by "default stylesheet"?
You can float a SPAN if you want, or set display: inline on a DIV, or
whatever you want. In the context of layout, don't worry about tags,
just think in terms of the CSS box types. and
. . . you can just use margins and padding to space things out.

Yes, this is what I find so creepy. Oh, I know it's considerably more
efficient, but I'm rapidly gleaning that CSS is something of a
throwaway language: I keep thinking in terms of 100%, when the only
thing I need concentrate on (er, until we get into 4-or-more columns,
which ought to be interesting to >>text-align to say the least heh) --
the only thing that matters is a) alignment, and b) some total that is
˜ 100. Still, it's a bit unnerving to have what were carefully-
conceived spacing instructions hijacked by the ruthlessly-efficient
Browser Calculus of "Whatever's Left Over."

There's a kind of desperation about it.
One feels one is abandoning one's spacers to the tyranny of a faceless
despot.
With Bookmarks.
In little unmarked graves.
"We were noble once!"
"We knew our shape!"
"We few!"
"We proud!"
"We . . . SPACERS!"

What the hell. Let's code lol.

MC
 
D

dorayme

MISS CHIEVOUS said:
Ben, what do you mean by "default stylesheet"?

A default style sheet is one supplied automatically by the browser to
style the HTML in conjunction with or absence of author supplied CSS.

Without any style instructions, the browser could do whatever it liked.
it could turn the HTML body markup into a big picture of the devil that
had real powers over anyone who visited the page. To avoid this and
other possibilities, there is a backup CSS document that tells the
browser what to do with paragraph elements and UL elements and divs.

You would think a browser would understand a paragraph element. The
latter is supposed to have a meaning. But the browser has not got a
single clue about it! It needs to be told how to make the text in a P
element look like a paragraph.
 

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

Forum statistics

Threads
474,082
Messages
2,570,589
Members
47,212
Latest member
JaydenBail

Latest Threads

Top