driving me nuts!

T

Tayo

http://annabel-langbein.com/onlineACC.html

Currently I have a left column div, center div and a right column div.
However, these are inside a "content" div.

I want to put sort of a right hand menu in the right column, but
currently if I load all the menu into it it is too high and so the
content column or left column won't start again until the bottom of
the right column (confusing sounding? I think so!)

So I somehow need to have the right column on the right and out of the
way, and so the left and center column uses the rest of the space
available, and not to worry about the right column.

How can I do this?

Thanks very much
 
D

dorayme

Tayo said:
http://annabel-langbein.com/onlineACC.html

Currently I have a left column div, center div and a right column div.
However, these are inside a "content" div.

I want to put sort of a right hand menu in the right column, but
currently if I load all the menu into it it is too high and so the
content column or left column won't start again until the bottom of
the right column (confusing sounding? I think so!)

So I somehow need to have the right column on the right and out of the
way, and so the left and center column uses the rest of the space
available, and not to worry about the right column.

How can I do this?


Before doing anything about this, have a look at what happens when a
user has a text size you were not expecting. *Many* people would have it
at a size that makes your whole menu completely disappear. You can see
this for your self. Look in Firefox or Safari and go to the View menu
and choose a bigger text size.

Next, go to

<http://validator.w3.org/>

and fix up the HTML mistakes reported there.
 
R

rf

Tayo said:
http://annabel-langbein.com/onlineACC.html

Currently I have a left column div, center div and a right column div.
However, these are inside a "content" div.

I want to put sort of a right hand menu in the right column, but
currently if I load all the menu into it it is too high and so the
content column or left column won't start again until the bottom of
the right column (confusing sounding? I think so!)

So I somehow need to have the right column on the right and out of the
way, and so the left and center column uses the rest of the space
available, and not to worry about the right column.

How can I do this?

Don't know. Don't see what the results are of what you are trying to do.

Hint: Put the menu in there so *we* can see what is going wrong. That way we
won't be confused.

Better yet, put up two copies of the site, one with the menu and one
without.

Other things...

Why are you writing XHTML and then serving it up to the browser as text/html
so the browser will think it is HTML with errors?

Why do you have pictures of text instead of the real text? Search engines
don't read pictures of text.

You seem to believe that I prefer a font size three quarters of my
favourite, which brings us to:
You do know that with even one click on my mouse wheel to enlarge my font
size your navigation disappears? Gone. White text word-wrapped onto a white
background. It does sort of re-appear in peices on :hover though :)
 
L

Lars Eighner

In our last episode,
the said:
Currently I have a left column div, center div and a right column div.
However, these are inside a "content" div.
I want to put sort of a right hand menu in the right column, but
currently if I load all the menu into it it is too high and so the
content column or left column won't start again until the bottom of
the right column (confusing sounding? I think so!)
So I somehow need to have the right column on the right and out of the
way, and so the left and center column uses the rest of the space
available, and not to worry about the right column.
How can I do this?

Short answer: give the center column superwide right and left margins,
float the right and left columns into the respective superwide margin.
If you want to give the side columns distinctive background colors that
go "all the way down," use superwide borders instead. It is a little more
complicated if you want "source ordering" (content column on top in the
HTML and non-styles browsers).
 
T

Tayo

Cheers for the reply guys.

First of all, I didn't design or make the site, I'm working with what
is already there. Apparently they're getting a new site (completely
made in flash HA!) shortly so I'm not going to change the menu and the
rest of the site as it's not what I have been asked to do.

Lars..I don't really understand what you're saying..Could you be a bit
more specific?

And rf - the menu is in there, it's those images on the right hand
side , that's the "menu" I'm talking about. but currently the layout
goes

Container > Main> content > left /left, center /center, right /right /
content
but then there is an image which goes across the left and center
columns so I have to close it off and start a new content div but that
can't start until all the right hand column is finished from the
previous.

So I basically want a right hand column that's independent of the left
& center. Is this possible?

Thanks for the hepl so far guys, and yes sorry the site is rough as
guts.
 
R

rf

Tayo said:
Cheers for the reply guys.

First of all, I didn't design or make the site, I'm working with what
is already there. Apparently they're getting a new site (completely
made in flash HA!)

Then I'm out of here. I abhore flash sites. Never go back again.
And rf - the menu is in there, it's those images on the right hand
side , that's the "menu" I'm talking about. but currently the layout
goes

Oh.

That's not a menu, it's some pictures. Nothing is a link. That is what may
have "confused" me :)

Just had another look.

You have some stuff in a div class="double-ACC" which is float: left. Then
you have a div with class=content which has clear: both. So that last div is
below anything in the first div.

Your "menu" div is within this latter div. Where do you think it will start?
Where the latter div starts of course, before the, er, other one.

Move your "menu" div right up somewhere near the top and float: right it
there.

But, before you do this, install Firefox and then install Firebug. This
allows you to inspect each and every element on the page and it even puts a
pretty blue wash over the one that you are hovering over in in firebugs
representation of the DOM. Right bloody handy IMHO and this is how, in about
thirty seven seconds, I determined all of the above, and no, I did not look
at your source code again.

You might also ask dorayme prettily for a link to her floathouse thing. I
can't recall the URL at the moment but it's good stuff. Perhaps dorayme will
oblige :)
 
L

Lars Eighner

In our last episode,
<[email protected]>,
the lovely and talented Tayo
broadcast on alt.html:
Cheers for the reply guys.
First of all, I didn't design or make the site, I'm working with what
is already there. Apparently they're getting a new site (completely
made in flash HA!) shortly so I'm not going to change the menu and the
rest of the site as it's not what I have been asked to do.
Lars..I don't really understand what you're saying..Could you be a bit
more specific?

What you really have here is two-columns with the left of the two columns
having two columns. <http://larseighner.com/EIGHNER/> has a similar layout,
although I have not done the hacks for IE, so possibly it only works in
Firefox or similar and the right column steals its space from both padding
and margins (so it hangs over the left column a bit). I suggest you use
only margin, since you do not need this effect.

You have two banners (mastheads). One goes accross the whole page and one
goes across only the left column (which is split into two below it). You
need a container DIV that includes your left columns banner, left columns
and right column. It needs a right margin that is the width of your
pictures for the right column, plus some padding. Then you need to float
your right column right with a negative right margin equal to the right
margin you left for it. The score between the left columns banner is, I
suppose created by a border. You may have to adjust the margin to account
for that because if there is even 1px overlap, the design will break.

There are three things you can steal space from to make room for a floated
column: margin, padding, and border. If you want your floated column to
have its own background color "all the way to the bottom" you have to use
border. You can get the hang-over effect by using a combination of padding
and margins with a transparent background for your floated column. But when
it is all on white (or all some other color) keep it simple by just using
margins. The basic strategy is the same: create the space and float with a
negative margin.

As others have suggested, you must have valid markup, which you do not.
You did not close some head elements properly for XHTML. Those elements
don't show, but because they make the document invalid they may throw
browsers into quirks mode with unpredictable results. There is really no
reason for this document to be XHTML, but it ought to be one or the other
with the proper doctype.
And rf - the menu is in there, it's those images on the right hand
side , that's the "menu" I'm talking about. but currently the layout
goes
Container > Main> content > left /left, center /center, right /right /
content
but then there is an image which goes across the left and center
columns so I have to close it off and start a new content div but that
can't start until all the right hand column is finished from the
previous.
 
N

Nik Coughlin

Tayo said:
http://annabel-langbein.com/onlineACC.html

Currently I have a left column div, center div and a right column div.
However, these are inside a "content" div.

I want to put sort of a right hand menu in the right column, but
currently if I load all the menu into it it is too high and so the
content column or left column won't start again until the bottom of
the right column (confusing sounding? I think so!)

So I somehow need to have the right column on the right and out of the
way, and so the left and center column uses the rest of the space
available, and not to worry about the right column.

How can I do this?

Thanks very much

It's hacky but given how dirty the rest of the site is, who cares, it works
:)

..rightCol-ACC {
margin-top: -320px;
}
 
T

Tayo

Thanks again Lars & rf.

I had the right column floated right but only just realised the
content column was clear: both

Thanks again.
 

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
473,744
Messages
2,569,484
Members
44,904
Latest member
HealthyVisionsCBDPrice

Latest Threads

Top