473,242 Members | 1,438 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,242 software developers and data experts.

Number of problems placing SPANs and DIVs in website

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.
Jul 7 '08 #1
6 1729
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"...
Jul 7 '08 #2
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.
Jul 7 '08 #3
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/
Jul 7 '08 #4
On Jul 7, 6:21*pm, Ben C <spams...@spam.eggswrote:
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
Jul 10 '08 #5
On 2008-07-10, GTalbot <ne*******@gtalbot.orgwrote:
On Jul 7, 6:21*pm, Ben C <spams...@spam.eggswrote:
>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.
Jul 10 '08 #6
In article
<70**********************************@y21g2000hsf. googlegroups.com>,
GTalbot <ne*******@gtalbot.orgwrote:
On Jul 7, 6:21*pm, Ben C <spams...@spam.eggswrote:
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
Jul 10 '08 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

11
by: Max M | last post by:
I am writing a "find-free-time" function for a calendar. There are a lot of time spans with start end times, some overlapping, some not. To find the free time spans, I first need to convert the...
1
by: Joe Black | last post by:
I have a js script that changes the visibilty of a selected span to "visible", but makes sure that no other related spans are visibile to the user by hiding everything first. i.e. User clicks...
2
by: polilop | last post by:
I have a recordset which i have to check if it is empty and if its not then to print it out something like <% if Not(emptyStr=rsBoats.Fields.Item("Price_descr").Value) Then%> <TR> <TD...
16
by: J. J. Cale | last post by:
Hi all I would like to see all the spans below inline one next to the other. I do not want to use absolute but relative or no positioning. This will eventually be a receipt that will be printed...
6
by: veerleverbr | last post by:
Hi, I have the following html: <div id="content"> <div id="leftpart">...</div> <div id="rightpart">...</div> </div> leftpart en rightpart are in the css set to float left. The content of...
2
by: tasman.hayes | last post by:
I'm experimenting with converting a site from a table layout to CSS. I'm floating three DIVs in a row for the top of a website (a logo, navigation buttons and a email list signup box). The DIVs...
3
by: =?ISO-8859-1?Q?Jo=E3o_Maia?= | last post by:
Hi there, I am having a weird problem in trying to use a ASP.NET menu inside a custom web part. I am developing a custom web part that has a menu inside (just the menu, nothing else). The menu...
2
by: Liam Gibbs | last post by:
Hello everyone, This will be my third time posting this, but for some reason, my message isn't get through to the newsgroup, even after hours of waiting. So here goes again. I'm having huge...
2
by: jeddiki | last post by:
How do I get these 2 divs to be side by side ? I have been trying to apply the float logic to a couple of divs on the same screen, but without success. There is a main div that holds two...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.