Number of problems placing SPANs and DIVs in website

[Liam Gibbs]

Hello everyone,

I'm trying to program a church web site and I'm having a number of
problems with the layout.

The html is at http://www.altmarvel.net/Liam/index.html and the css is
at http://www.altmarvel.net/Liam/OCOC.css.

Anyway, the problems are these:
1. The Search stuff underneath the menu and to the right should be
horizontally in line with the menu (but right aligned).
2. Each cell in the left area underneath the menu should be top
aligned with the one beside it, not bottom aligned.
3. The grey boxed cells should be on the right of the stuff in #2 (it
won't, regardless of its width).

If anyone can help, that would be great. Right now it's giving me a
really hard time.

[David Stone]

In article
<bb**********************************@34g2000hsf.g ooglegroups.com>,
Liam Gibbs <li*******@sympatico.cawrote:

Hello everyone,

I'm trying to program a church web site and I'm having a number of
problems with the layout.

The html is at http://www.altmarvel.net/Liam/index.html and the css is
at http://www.altmarvel.net/Liam/OCOC.css.

You don't specify a doctype, so browsers are left to guess what you
intended and how to interpret the markup; also, can't put a <div>
inside a <span(but you can nest a <divinside another <div>)

I suggest you fix these errors before worrying anymore about the
actual layout. See the output from:

<http://validator.w3.org/check?uri=ht...el.net%2FLiam%
2Findex.html&charset=%28detect+automatically%29&do ctype=Inline&group=0>

If you need a two-column layout with a header, there are plenty of
examples around you can take a look at for inspiration! Just
google for "two-column layout"...

[Ben C]

On 2008-07-07, Liam Gibbs <li*******@sympatico.cawrote:

Hello everyone,

I'm trying to program a church web site and I'm having a number of
problems with the layout.

The html is at http://www.altmarvel.net/Liam/index.html and the css is
at http://www.altmarvel.net/Liam/OCOC.css.

Anyway, the problems are these:
1. The Search stuff underneath the menu and to the right should be
horizontally in line with the menu (but right aligned).

Move the span containing the form so it's before all the other spans.
And change span to div-- I don't think you can put a form in a span like
that.

Firefox always puts floats on the next line (known bug).

As the other chap said, fix the validation errors.

Once you've done that, Firefox seems to be having a strange problem with
the width of a float containing a floated form. I don't know what's
causing that.

But anyway, just don't float the form. There's no need for it to be
floated.

And get rid of display: run-in. Just change it to display: inline or
leave it out (I think it was on a span anyway).

2. Each cell in the left area underneath the menu should be top
aligned with the one beside it, not bottom aligned.

Sorry don't understand.

3. The grey boxed cells should be on the right of the stuff in #2 (it
won't, regardless of its width).

Don't understand either. The grey boxed cells are on the right as far as
I can see.

If anyone can help, that would be great. Right now it's giving me a
really hard time.

Validate it and then try to simplify it. If you say what general layout
you want someone may be able to provide a much simpler way to do it and
then all the problems will go away.

[John Hosking]

Liam Gibbs wrote:

>
The html is at http://www.altmarvel.net/Liam/index.html and the css is
at http://www.altmarvel.net/Liam/OCOC.css.

Anyway, the problems are these:
1. The Search stuff underneath the menu and to the right should be
horizontally in line with the menu (but right aligned).
2. Each cell in the left area underneath the menu should be top
aligned with the one beside it, not bottom aligned.
3. The grey boxed cells should be on the right of the stuff in #2 (it
won't, regardless of its width).

If anyone can help, that would be great. Right now it's giving me a
really hard time.

Well, the title of your post says it all, or at least a good portion.
You've got a bad case of DIV-itis, wherein you've overused DIVs and
SPANs instead of using appropriate markup like <pfor paragraphs and
<lifor list items.

Also, as others have noted, you can't put a div (block-level element)
inside a span or a p (ilnine-level elements).

Suggestion: Simplify, validate, repeat.

Take a look at my quick attempt at revising your page at
http://www.zugerfechtclub.ch/tests/Liam-OCOC.htm . (I'm having trouble
posting to my regular server, so here's the page on another site.)

I put your searchbox item first in the list rather than last (buggy and
unintuitive, but it seems to work, even though the markup is soiled a
bit by it).

I tossed out the 800px fixed width, and traded the .8em text size for a
size everybody can read (100%). The pixel-based sizes are mostly
percentages or ems in my sample.

I reworked the markup to be a bit more in line with the content. This
made it easier for me to throw out some of the divs and spans and extra
classes. Some of the classes I did keep are more or less renamed
versions of yours. Take a look at how much shorter my code is than
yours. Mine's not perfect by any means, but maybe you can get some ideas
from it. Notice also how it allows a bit of browser and text resizing.

The CSS validates, but the HTML doesn't (4 errors). You'd need to take a
look at the <formelement and fix what's wrong there.

HTH. GL.
--
John
Pondering the value of the UIP: http://improve-usenet.org/

[GTalbot]

On Jul 7, 6:21*pm, Ben C <[e-mail]:

Firefox always puts floats on the next line (known bug).

True but recently that particular bug has been fixed

Bug 50630: float should be as high as previous line box
https://bugzilla.mozilla.org/show_bug.cgi?id=50630

so, starting with Firefox 3.1, floats will be rendered correctly in
Firefox.

Regards, Gérard

[Ben C]

On 2008-07-10, GTalbot <ne*******@gtalbot.orgwrote:

On Jul 7, 6:21*pm, Ben C <[e-mail]:

>Firefox always puts floats on the next line (known bug).

True but recently that particular bug has been fixed

Bug 50630: float should be as high as previous line box
https://bugzilla.mozilla.org/show_bug.cgi?id=50630

so, starting with Firefox 3.1, floats will be rendered correctly in
Firefox.

Thanks for the update. I had heard it had been fixed, but when it didn't
seem to have been in Firefox 3.0, I thought there might have been some
mistake.

[dorayme]

In article
<70**********************************@y21g2000hsf. googlegroups.com>,
GTalbot <ne*******@gtalbot.orgwrote:

On Jul 7, 6:21*pm, Ben C <[e-mail]:

Firefox always puts floats on the next line (known bug).

True but recently that particular bug has been fixed

Bug 50630: float should be as high as previous line box
https://bugzilla.mozilla.org/show_bug.cgi?id=50630

so, starting with Firefox 3.1, floats will be rendered correctly in
Firefox.

I guess that means that

<http://netweaver.com.au/floatHouse/appendices/page5_1.html>

will now not look different in FF from Safari or Opera.

--
dorayme