3 columns in wrong order (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

BobbyDouglas -> 3 columns in wrong order (12/5/2004 17:20:27)

Has anyone ever tried/succeded in producing a CSS/XHTML based 3 column design in which the columns appear in the HTML code in the wrong order?

I'm after something like this:

+-----------------+
|.....header......|
+-----------------+
|left|middle|right|
+-----------------+
|.....footer......|
+-----------------+

But I want the html code to be in the order:

middle, left, right, header, footer.



caz -> RE: 3 columns in wrong order (12/5/2004 18:29:06)

Well, yes that is what CSS is for. In the code of one of my sites I have the middle (content) following the header because that would make it easier for speech readers to get to the 'meat' of the site. This is then followed by the right column for further information. The nav in the left column is next to offer further destinations and the footer is last with the copyright, contact, privacy and shortcut back to home. So the style is totally separate from the semantic structure and the layout is achieved with postioning of divs.

Deb's favourite site Position is everything is a geat help. I am not sure about your header position though, surely you have to identify the site first - unless it is all graphics.
Cheers
Carol



BobbyDouglas -> RE: 3 columns in wrong order (12/5/2004 18:54:45)

accounttest.info/hk/hk/page.htm
- There always seems to be a problem with either the right side, or the footer.

The link helped a lot, I have an idea I will try out, hope it works.



BobbyDouglas -> RE: 3 columns in wrong order (12/6/2004 18:16:32)

Hmm, the problem is that the left side is fixed- and pretty much must stay that way for menu purposes.

Anymore help on this one Carol? [:(]



c1sissy -> RE: 3 columns in wrong order (12/6/2004 20:21:50)

quote:

Hmm, the problem is that the left side is fixed- and pretty much must stay that way for menu purposes.


Why must it stay this way for the menu?

If you have a wrapper div, float that, put your menu within, float that, it should work,

Also MUST, always give a floated container a width. Say your container div is 98%, then your nav can be 50% and yoru content could be 45%, be careful if you use borders, they can fall apart in IE. And to help you out, use background colors with your layouts, this helps you to see the position of your divs.

div#container float left
div#nav float left
div#content float left
div#clear (this is just a div that has styles of clear:both;)
/wrapper

div#footer (not floated

I have several layouts right now that have
wrapper, floated left with content and they work out. Why must you have the menu fixed? It will work if the layout if fluid.

However, if you wish it to be fixed, go to a site called thefixor, in there somewhere there are layouts for css that have fixed and fluid layouts thta you can play around with.


quote:

But I want the html code to be in the order:

middle, left, right, header, footer.


Why would you wish to do things out of order? Wouldn't it be better and make more sense to have things go in order? Just curious to your response on this because this method has never really made sense to me.



Kitka -> RE: 3 columns in wrong order (12/6/2004 21:46:51)

quote:

Just curious to your response on this because this method has never really made sense to me.


Hi Deb,

For me, it is like caz said above:
quote:

I have the middle (content) following the header because that would make it easier for speech readers to get to the 'meat' of the site.


Plus, if you have the best content near the top, it improves the content of "snippet" that search engines take to display with your url.



BobbyDouglas -> RE: 3 columns in wrong order (12/6/2004 23:06:23)

If you look at the url, the menu must stay a fixed width to work.

The middle content should appear first, just because of what Kitka & caz said earlier.

I realized that the menu as a & should work, I fiddled around with it for a bit and think I am about 95% done. For awhile the left side wouldn't appear until the browser was resized (IE of course :P )

Thanks for the help on this. This has been a very complicated layout [:(]



c1sissy -> RE: 3 columns in wrong order (12/7/2004 16:16:21)

bobbyD, did you look at the site that i told you about?
http://www.thefixor.com/code_css_01.php
I"m sure that you can find something in here that will help you. There is a ton of stuff within that site, and also, don't forget about the css vault, there is a good deal of things within that site as well.



BobbyDouglas -> RE: 3 columns in wrong order (12/7/2004 17:03:03)

I did just now. Thanks. I think I almost have this fixed now



c1sissy -> RE: 3 columns in wrong order (12/7/2004 17:32:15)

Great, I hope that you manage to get it done. Frustration is not any fun whatsoever [;)]



BobbyDouglas -> RE: 3 columns in wrong order (12/13/2004 11:15:47)

Ok, everything seems to work ok, except for the footer.

The footer should be below everything on the page, not just the middle div.

accounttest.info/hk/hk/index2.htm



caz -> RE: 3 columns in wrong order (12/13/2004 17:24:48)

Have you looked at it in screen size 800x600? It looks more like you want it to look there. Something to do with pixel sizing, not relative?
Have you tried putting everything but the footer in a wrapper div and playing with the sizing?



c1sissy -> RE: 3 columns in wrong order (12/14/2004 8:26:54)

quote:

Have you tried putting everything but the footer in a wrapper div and playing with the sizing?


I think she has a great idea here. For some reason footers tend to behave when they are outside of your wrapper. Not sure why, but if you play with a few layouts both ways, you will see that this is true.



BobbyDouglas -> RE: 3 columns in wrong order (12/14/2004 19:55:15)

Have you tried putting everything but the footer in a wrapper div and playing with the sizing?
- Yes, that's how it is right now...



caz -> RE: 3 columns in wrong order (12/14/2004 20:24:23)

Then how about adding a whole page wrapper to contain everything, which should make the footer behave ...or not, as the case may be.

[img]http://tcwozere.co.uk/smileys/scratchhead.gif[/img]

PS. Can you do something about that annoying bobbing avatar, please?



c1sissy -> RE: 3 columns in wrong order (12/14/2004 20:58:06)

Try doign the wrapper, all your divs except for the footer, put the footer in after you close the wrapper container. Also, put a clearing div in before you close your wrapper.

In your style sheet:

div#nameofdiv {
clear: both:
}

then in your xhtml/html put
<div id="nameofdive"></div>

This should help you out a bit.

And remember to put your footer after you close your wrapper and the clearing div within the wrapper as your last div. Try this out and let us know how it works for you.



c1sissy -> RE: 3 columns in wrong order (12/14/2004 20:59:20)

quote:

PS. Can you do something about that annoying bobbing avatar, please?


ROFLOL!!!



BobbyDouglas -> RE: 3 columns in wrong order (12/15/2004 11:48:40)

I implemented the change into index3.htm, but the computer I am using right now shows a lot of pages very messed up. I will have to verify it works when I get back home.

Btw, that homer image is the first image I used back in Junior High on my very 1st web site. If you give him a donut, he will calm down.



caz -> RE: 3 columns in wrong order (12/15/2004 12:37:02)

Thankyou Bobby, that bobbing around was soooo distracting.
[img]http://www.mainzelahr.de/smile/medien/five.gif[/img]

[:@] I take that back.

Your footer - 

div#footer {

    * clear : both;
    * padding-bottom : 10px;

}

div#footer {

    * text-align : center;

}

You have declared twice, maybe that is confusing the browsers? Your html also does not validate as Xhtml Strict1.0, maybe go for Html 4 Transitional?



BobbyDouglas -> RE: 3 columns in wrong order (12/15/2004 18:54:01)

That didn't make a difference [:(]

accounttest.info/hk/hk/index1.htm
accounttest.info/hk/hk/index2.htm
accounttest.info/hk/hk/index3.htm

Three different ways of showing the footer, so far, none of the suggestions work.

As far as validation, the only problem is with the iframe hack used to fix another problem with IE.

Any other ideas?



Donkey -> RE: 3 columns in wrong order (12/16/2004 11:00:51)

Re the delinquent footer.

I downloaded your code and style sheets a few days ago and have been playing around with it in my spare time for a while.

I don't think it is possible to do what you want when the divs are not positioned in the natural flow of the document. So you will probably have to choose which is the best of two imperfect situations.

The best I could come up with is a compromise where you position the footer relatively and give it a negative value for "bottom". 
div#footer {
position: relative;
bottom: -15em;
padding-bottom: 15px;
margin: 0;
clear: both;
}

but this only works until you change screen resoution then the footer drops (IMO) too far at low res.

It will be interesting to see if anyone can actually fix this problem.




BobbyDouglas -> RE: 3 columns in wrong order (12/16/2004 13:28:19)

Thanks Peter, I had a feeling there would be a big issue with the position of the divs- which is why I am still trying to figure this problem out.

I inserted the code you provided, seems to be a bit better in FF, but really screwed up in IE (when it is re-sized).

My CSS knowledge is limited, so I really hope someone might be able to figure this out with me. Any other places (for CSS gurus) I could post my question at?




Donkey -> RE: 3 columns in wrong order (12/16/2004 14:37:31)

These two are quite good
The Coding Forums
Webmasterworld



caz -> RE: 3 columns in wrong order (12/16/2004 17:50:21)

Before you post elsewhere you might like to follow this troubleshooting guide:

http://www.frontpagewebmaster.com/m-229679/tm.htm

You might find your own solution, but if not you have the basis for asking for further help. I also think that Peter is right, somewhere along the line you may have to take advantage of the natural flow by using position: relative.
You could also consider adding a clearing div making sure that it is above the footer, and below the left nav column.

We just keep bobbing along, don't we?
Carol



BobbyDouglas -> RE: 3 columns in wrong order (12/16/2004 21:15:44)

Oh great, this is going to be a long night...



Kitka -> RE: 3 columns in wrong order (12/18/2004 1:25:21)

quote:

PS. Can you do something about that annoying bobbing avatar, please?


The constant bobbing *was* very annoying to me too... till I fixed it using the Firefox extension "Adblock". If you have it, just enter:
http://www.frontpagewebmaster.com/upfiles/7727/Db854518110.gif

... and bingo, no more bobbing! Sorry BobbyDouglas - nothing personal intended! [;)]



Donkey -> RE: 3 columns in wrong order (12/18/2004 8:25:08)

You could also stop the dog wagging too; using
http://www.frontpagewebmaster.com/upfiles/4513/13F2B821A99E4402AEF09017A6439504.gif
[;)]
But only if you found it to be equally annoying.
Glass houses and stones come to mind[:D].



Kitka -> RE: 3 columns in wrong order (12/18/2004 8:30:04)

Touche Donkey! I fully concur ... plus if my avatar is *that* annoying, anyone please tell me and I will change it forthwith, no questions asked.



Kitka -> RE: 3 columns in wrong order (12/18/2004 8:39:35)

P.S. Donkey, if we are being so very pedantic (eek), I seem to remember that in the not *too* distant past, you also had an animated donkey as your avatar...

Is this a case of "holier than thou" or "pot calling kettle black"? [;)][8D][:D]



Donkey -> RE: 3 columns in wrong order (12/18/2004 9:08:37)

quote:

Is this a case of "holier than thou" or "pot calling kettle black"
Guilty as charged, you aussies are just to clever for us poor old poms.

Actually I got fed up with it so I self censored, if you like I'll temporarily reinstate it as a special festive treat.[;)]

Pedantic ? hmmmm... is that something to do with feet, or perhaps looking after children.



Page: [1] 2   next >   >>

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.15625