My Two Columns Revisited

[al jones]

I've taken some advice; and taken a look at htmldog and done some chopping
and now need some ideas / help. (('Help' can be defined as pointing me
towards a web page or something to google though I've worn out Google for
the night.))

URL http://aljones.us/ab

There are several things I need to look at, but the top two (on the page
and my list) are:

The H1 - Broken Chains Ministry - I'd like to have it centered between the
two hand images; but I can't see how to make that work. Oddly enough, that
the one thing that a the couple of people who have looked at this have
commented on ....

The blue navbar, under the log looks fine (the same width as the logo, in
both Opera and FF; however in IE6 (and I'm told in 7?) extends a couple of
em beyond the right edge of the logo. While it's not what I expected,
that's really acceptable visually - but I'd like the two to resemble each
other a little closer. Suggestions??

Other things:

Extending the blue Navbar to the footer.
The footer (stolen from ALA and I thought I understood what I was reading)
not centered and no color - even though both are specified.

Anything else I should look at???

and appreciation is extended //al

 

[dorayme]

I've taken some advice; and taken a look at htmldog and done some chopping
and now need some ideas / help. (('Help' can be defined as pointing me
towards a web page or something to google though I've worn out Google for
the night.))

URL http://aljones.us/ab

There are several things I need to look at, but the top two (on the page
and my list) are:

The H1 - Broken Chains Ministry - I'd like to have it centered between the
two hand images; but I can't see how to make that work. Oddly enough, that
the one thing that a the couple of people who have looked at this have
commented on ....

The blue navbar, under the log looks fine (the same width as the logo, in
both Opera and FF; however in IE6 (and I'm told in 7?) extends a couple of
em beyond the right edge of the logo. While it's not what I expected,
that's really acceptable visually - but I'd like the two to resemble each
other a little closer. Suggestions??

Other things:

Extending the blue Navbar to the footer.
The footer (stolen from ALA and I thought I understood what I was reading)
not centered and no color - even though both are specified.

Anything else I should look at???

and appreciation is extended //al

Starting to look like a webpage there al!

Get rid of align="middle" in your <img ...>, use some css for
this. But, oddly enough, I will say to you: In your case there is
not a lot of point in the inline css of

style="width: 467px; height: 257px;"

just put:

width="467" height="257"

Tidy your footer from:

<div id="footer-wrapper">
<div id="footer"><a href="#">About Us</a>&nbsp;&nbsp;<a
href="#">Products</a><br>Copyright 2007 Broken Chains Ministry ::
Web design by <a href="mailto:[email protected]">Al Jones</a>
</div>
</div>

to

<div id="footer"><a href="#">About Us</a>&nbsp;&nbsp;<a
href="#">Products</a><br>Copyright 2007 Broken Chains Ministry ::
Web design by <a href="mailto:[email protected]">Al Jones</a>
</div>

and use this for the css instead of all that stuff you have:

#footer {

margin: 0;
padding: 0;
font-size: 85%;
text-align: center;
color: #306EFF;
background-color: #C0C0C0;
}

No doubt there is even better but I am rushing to get out and
have my avo swim and walk...

 

[Ben C]

I've taken some advice; and taken a look at htmldog and done some chopping
and now need some ideas / help. (('Help' can be defined as pointing me
towards a web page or something to google though I've worn out Google for
the night.))

URL http://aljones.us/ab

There are several things I need to look at, but the top two (on the page
and my list) are:

The H1 - Broken Chains Ministry - I'd like to have it centered between the
two hand images; but I can't see how to make that work. Oddly enough, that
the one thing that a the couple of people who have looked at this have
commented on ....

Lose float:left and width:400px on the H1, and move

<img class="rhands" src="m_files/handsright.jpg" alt="Right Hands" height="95" width="63">

up a few lines so it appears in the source immediately after the other
two images.

i.e. so you have:

<banner>
<lighthouse>
<left hands>
<right hands>
<h1>

instead of

<banner>
<lighthouse>
<left hands>
<h1>
<right hands>

This way the h1 takes up the full width, and text-align: center centres
its inline content in that width between the floats (lighthouse and two
sets of hands).

You need to move the right hands or FF puts them below (known float bug
shared by FF and IE).

[...]

Extending the blue Navbar to the footer.

You can use absolute positioning for the navbar rather than a float. Or
you could fake it with a background-image on body that is a horizontal
stripe of blue the same colour and width as the navbar (and 1px high)
and set to repeat-y all the way down.

The footer (stolen from ALA and I thought I understood what I was reading)
not centered and no color - even though both are specified.

It looks like it's that "* html " at the start of the selector for
#footer-wrapper that's causing FF to ignore it. What's it supposed to be
anyway, some of kind of browser-bug-switching-hack?

 

[John Hosking]

URL http://aljones.us/ab

The H1 - Broken Chains Ministry - I'd like to have it centered between the
two hand images; but I can't see how to make that work. Oddly enough, that
the one thing that a the couple of people who have looked at this have
commented on ....

Not that odd; it's the second thing I noticed about the site. (The first
thing was that it's really looking better.) The other responses are
probably sufficient to solve this problem (I haven't pondered them very
much).

The blue navbar, under the log looks fine (the same width as the logo, in
both Opera and FF; however in IE6 (and I'm told in 7?) extends a couple of
em beyond the right edge of the logo.

You've set your #navbar to width:195px to match your lighthouse image,
but your #content is set with a margin-right of 11em. Nothing wrong with
using ems for sizes (except, that is, when you're trying to match images
sizes :-( ), but the two are bound to come into conflict. What happens
in IE when you change #content to margin:0 0 0 195px?

Other things:

Extending the blue Navbar to the footer.

You asked for that: #navbar {height:600px;}. Try height:100%.

The footer (stolen from ALA and I thought I understood what I was reading)
not centered and no color - even though both are specified.

Anything else I should look at???

Minor detail: I notice your hands images have alt="Left Hands" and
alt="Right Hands", respectively, which miss the point of the images in
the first place. Better to have something like alt="hands in chains" and
alt="hands without chains".

Pain-in-the-neck detail: The drop shadow on the scissors is on the
lower-right (suggesting light coming from roughly the direction of the
lighthouse), but the drop shadow for the nearby letters are lower-left
(meaning there's another, conflicting light source in the upper right).
I know it's a pain because it's not as easy to change as the alt texts
(plus in a week you'll probably have the text and scissors both
removed), but it 's something I noticed.

HTH. GL. Looking good, Al!

 

[John Hosking]

You've set your #navbar to width:195px to match your lighthouse image,
but your #content is set with a margin-right of 11em.

I mean, of course, margin-left.

 

[Richard Formby]

al jones wrote:

Pain-in-the-neck detail: The drop shadow on the scissors is on the
lower-right (suggesting light coming from roughly the direction of the
lighthouse), but the drop shadow for the nearby letters are lower-left
(meaning there's another, conflicting light source in the upper right).

Now that is getting *real* picky. I didn't even notice that.

Probably because the drop-shadow on the letters makes my eyes cross so I
avoid looking at that bit of the page

al, Lose the drop shadow. Very difficult to read. Make it crisp, eye
catching. I find it eye avoiding.

Ah, just noticed that bit of a line above the Ceremony. Scan artifact?

 

[Jonathan N. Little]

Now that is getting *real* picky. I didn't even notice that.

Probably because the drop-shadow on the letters makes my eyes cross so I
avoid looking at that bit of the page

al, Lose the drop shadow. Very difficult to read. Make it crisp, eye
catching. I find it eye avoiding.

Ah, just noticed that bit of a line above the Ceremony. Scan artifact?

While we are getting picky, Al you need to redo your Lighthouse. You
have either overly compressed the image or saved it repeatedly in JPEG
format and introduced distracting JPEG artifacts, reminds me of
someone's Seagull. JPEG is a lossy compression format so each time your
edit and save in that format, information is lost and visual artifacts
become more pronounced.

 

[aljones]

And I'm talking to myself here since I've been having a very *NOT GOOD*
weekend. (Lost my hard drive to a virus, so I'm on a second machine,
working under Linux and trying to get *anything* accomplished
successfully - and not succeeding!)

My thanks to those of you who commented. I've taken several into
account and have managed to get the site looking a bit better.

URL http://aljones.us/ab

The H1 - Broken Chains Ministry - I'd like to have it centered between the
two hand images; but I can't see how to make that work. Oddly enough, that
the one thing that a the couple of people who have looked at this have
commented on ....

BenC: your suggestion re the hands worked nicely, they are now the
proper places and stay there (unless someone set the view port width too
narrow then the header floats badly).
However, I still can't manage to get the text H1 right, I now have it
centered properly, but with 'vertical-alignment:middle;' it's still at
the top of the banner.

The blue navbar, under the log looks fine (the same width as the logo, in
both Opera and FF; however in IE6 (and I'm told in 7?) extends a couple of
em beyond the right edge of the logo. While it's not what I expected,
that's really acceptable visually - but I'd like the two to resemble each
other a little closer. Suggestions??

John, you were right, did a little manipulation of padding / borders
and it looks right (in the only browser I currently have access to - but
did check it out at a friends last eve in IE6).

Extending the blue Navbar to the footer.

Changing the height to 100% though just takes it to 100% of the content
of the navbar. Still can't see how to get it to the bottom and I've
looked at 'css uneven columns', 'html unequal columns' and variations
till I'm blue in the face and not seeing anything that I understand or
can make work.

The footer (stolen from ALA and I thought I understood what I was reading)
not centered and no color - even though both are specified.

dorayme, thanks, your solution regarding the footer worked like a charm.

Anything else I should look at???

Regarding people being 'picky' I agree that the drop shadow is way to
dark and distracts from the text, but for the moment, until I learn how
to operate Gimp<?> I'm afraid I'm stuck with it. This is just a
temporary home page. Her current home page still has Christmas on it,
and I'm going to put up what I have before I call it a night tonight.

Robert, yes, scan artifact - and linux doesn't know what to do with my
printer/scanner, going to have to go looking for a driver.

Jonathan, I noticed that too. But will you let me off with I was trying
for a 3D effect, makes the clouds stand out and gives the light house
shape a rounded effect - nah, I didn't think so. I'll have to get her
original image and redo it, I probably have resized and saved a few too
many times, and at the moment can't get to the original I had on the
other machine!

If I sound really disconnected in this message, it's because I am - I've
had a couple of viri that I've been trying to get cleaned up and
apparently one of them decided to have a go at t0h0s0 of my hard drive.
So I'm working on a second machine without the tools I was used to ...

 

[Ben C]

BenC: your suggestion re the hands worked nicely, they are now the
proper places and stay there (unless someone set the view port width too
narrow then the header floats badly).
However, I still can't manage to get the text H1 right, I now have it
centered properly, but with 'vertical-alignment:middle;' it's still at
the top of the banner.

You want it vertically centered in the region whose height is defined by
the two hand images?

That's harder. If the <h1>'s content is all on one line, and you know
the heights of the images, you can set the height on that line with
line-height to the height of the images, and it will work. But if the
<h1> spans two lines, which it might in a narrow viewport (unless you
prevent line breaking with white-space: nowrap or similar), a big line
height will be a problem.

The point is, the <h1>'s content is aligned to the middle of the line
it's on, and the height of that line is unrelated to the heights of the
floating images. By default it's something like 1.1x or 1.2x the font
size, which is why the <h1> still appears rather high up.

You will have to use a table. One row, each hand image in its own cell at
the ends, and the heading in a cell in the middle with vertical-align:
middle.

Or just give the <h1> a bit of a top margin-- after all you know the
heights of the images-- and settle for it not exactly centered.

[...]

If I sound really disconnected in this message, it's because I am - I've
had a couple of viri that I've been trying to get cleaned up and
apparently one of them decided to have a go at t0h0s0 of my hard drive.

You cleaned up a couple of men and they repayed you by trashing your
hard drive? How ungrateful.

Viri is not the plural of virus. Its Latin plural if it had one would
probably be vira but it's never been spotted in a real Latin text. So
stick with "viruses".

 

[aljones]

[...]
[...]

If I sound really disconnected in this message, it's because I am - I've
had a couple of viri that I've been trying to get cleaned up and
apparently one of them decided to have a go at t0h0s0 of my hard drive.

You cleaned up a couple of men and they repayed you by trashing your
hard drive? How ungrateful.

Viri is not the plural of virus. Its Latin plural if it had one would
probably be vira but it's never been spotted in a real Latin text. So
stick with "viruses".

After a quick look through the dictionaries to see what *you* were
talking about I had to start laughing (at my own ignorance!) I now sit
corrected. I had never looked it up as (my memories of) high school
Latin suggested that the plural should have been "viri" and I assumed so
.... interesting things one finds out about here!

__
//al

 

[aljones]

<<snipped>>

Could you all take a look at http://aljones.us/ab and tell me please,
why I now have a blank line showing up above the banner. It appears
differently in FF and Opera but it's there in both. It came when I got
the H1 text correctly centered horizontally - I've looked at that again
and again as I've put the second page together, but I can't see where it
comes from.

Thanks //al

 

[Richard Formby]

<<snipped>>

Could you all take a look at http://aljones.us/ab and tell me please, why
I now have a blank line showing up above the banner. It appears
differently in FF and Opera but it's there in both. It came when I got
the H1 text correctly centered horizontally - I've looked at that again
and again as I've put the second page together, but I can't see where it
comes from.

Without even looking...:

Add this to the bottom of your style sheet:

* {border: solid 4px green;}

All will become evident.

Probably a margin or a padding.

You still have that scanning atifact there. Just load the image into paint
and rub it out.

 

[Ben C]

<<snipped>>

Could you all take a look at http://aljones.us/ab and tell me please,

The url seems to have stopped working.

why I now have a blank line showing up above the banner. It appears
differently in FF and Opera but it's there in both. It came when I got
the H1 text correctly centered horizontally - I've looked at that again
and again as I've put the second page together, but I can't see where it
comes from.

But I remember the blank line, it's quite an interesting one.

It's a collapsed margin. The <h1>'s top margin is collapsed with the top
margin of body, even though there are two floats between the <h1> and
the top of body. They're not "in the flow" remember.

That's a really tricky situation to lay out so I'm not surprised if
you're getting different results between browsers, although I think FF
gets it right.

If you want to get rid of the blank line, just give #banner padding-top:
1px.

 

[aljones]

The url seems to have stopped working.

My host sometimes to be a little intermittent ... not good but cheap.

But I remember the blank line, it's quite an interesting one.

NO IT'S NOT! It's frustrating as all getout!

It's a collapsed margin. The <h1>'s top margin is collapsed with the top
margin of body, even though there are two floats between the <h1> and
the top of body. They're not "in the flow" remember.

Ah, I think I understand that - from FF it was obvious that it was the
H1, but I could see why.

That's a really tricky situation to lay out so I'm not surprised if
you're getting different results between browsers, although I think FF
gets it right.

If you want to get rid of the blank line, just give #banner padding-top:
1px.

and of course it worked like a charm, thanks.

//al

 

[aljones]

Without even looking...:

Add this to the bottom of your style sheet:

* {border: solid 4px green;}

All will become evident.

It was evident from the FF tool that outlines 'things' but I didn't know
how to change it - wasn't seeing it ....

Probably a margin or a padding.

You still have that scanning atifact there. Just load the image into paint
and rub it out.

Hey, if you didn't have to look, how do you know that artifact is still
there?? Paint, Paint - on a linux box that's gimp (among a small
plethora of other possibilities) and gimp and I are just becoming
acquainted. But I have a couple of other things to do with it so I
guess now's as good a time as any, eh??

Thanks //al

 

[Richard Formby]

Richard Formby wrote:
Hey, if you didn't have to look, how do you know that artifact is still
there??

I didn't look at the *code*

It's something to do with the lighthouse. Don't float it left and the gap
disappears.

Give the banner a top border and the gap disappears.