SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Messed up, frustrated...and seeking help, please!

    Hello Everyone,

    After purchasing two very helpful, informative Sitepoint books and putting them to good use on a few of my blog pages, I decided to attempt making what should be a "simple" little site, to post on my Yahoo! account space. All I wanted to achieve was to have a very simple (ha, ha) three-column "liquid" layout, with the left column in a stationary position with its content "fixed," flush left and aligned to the top of the page, and the right column flush right and (if this is even possible), adjusting itself to remain vertically centered, if the page should be viewed at a higher screen resolution, in a larger monitor or browser window.

    I suppose what I hoped to achieve, was to have the entire page in a fluid vertically and horizontally centered layout, so that it would expand to fill the screen, if or as the need arose. I wanted the contents of the middle column to remain centered horizontally at all times, but also ideally, to centre vertically and expand as well, to fill the vertical space...but somehow, I doubt this is possible with CSS, especially with cross-browser compatibility?

    I was wondering if anyone here would mind having a look at the mess I've made of this page, please...and possibly, telling me where I've gone wrong, and how if at all possible, I may correct this horrible mess? I have just discovered that I'm not permitted to post any links at this point, as I don't have "enough posts"...but, the mess up I've currently made of it can be seen if you go to the link in my signature. If you then go to "page.html," you will see the aforementioned screenshot, of how my page should ideally appear. Yes, I've actually had it looking not half bad at one point; but the middle and right columns failed to remain centred vertically at a higher browser resolution to my own, when a friend of mine viewed it on his computer monitor and took a screenshot of it for me. The CSS is all external, but the full links to the .css files are all in the document head.

    Besides the obvious errors occurring in the layout, I now find my links in the left column aren't working, for some reason...and wonder what could be causing this? None of the links in the middle column will work, as I haven't posted the rest of the pages for the site yet...and won't, until or unless I can get this issue sorted first!

    I would really appreciate any advice I can get; I'd love to learn where I've gone wrong and how I may correct this situation for future reference...but also, I'd hate to have to resort to the use of tables, in order to accomplish what I have in mind for this little site. I don't think that should be necessary and am fairly sure there must be a way to achieve this, using pure CSS! I'm not a web designer by any stretch of the imagination and not very knowledgable about CSS yet, but hope to learn all I can about it.

    Thank you in advance,

    ** Luke

  2. #2
    Non-Member eautocad's Avatar
    Join Date
    Jul 2008
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Face it dude, use the tables.... Just do it.
    Last edited by r937; Jul 27, 2008 at 02:30.

  3. #3
    SitePoint Zealot Rexibit's Avatar
    Join Date
    Jul 2008
    Location
    United States
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Luke,

    I firstly want to thank you for attempting to even use CSS. Tables are not meant to be used for presentation, only displaying tabular data like a calendar or spreadsheet. So, using CSS to control your presentation without markup in the content is the best way to go. The more you use it, the more you will be aware of what does and does not work.

    At first glance (as I honestly am not in the state of mind to take your CSS apart piece by piece), you have a floated element (several in fact) which have widths of 100%. You are right on track in that every floated element needs to have a width. However, if you have them at 100%, there is nowhere for them to float too. This is what leads to your "fixed" positioning being wrong.

    When you make a 3 column layout, you should float the columns and then use a "margin-left" or "margin-right" the same as the element's width next to it to move it in place.
    Rexibit Web Services
    Don't just build it - CSS it

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by eautocad
    Face it dude, use the tables.... Just do it.
    Hmm - not a very helpful answer - and wrong also.

    Quote Originally Posted by CoolHandLuke
    All I wanted to achieve was to have a very simple (ha, ha) three-column "liquid" layout, with the left column in a stationary position with its content "fixed," flush left and aligned to the top of the page, and the right column flush right and (if this is even possible), adjusting itself to remain vertically centered, if the page should be viewed at a higher screen resolution, in a larger monitor or browser window.

    I suppose what I hoped to achieve, was to have the entire page in a fluid vertically and horizontally centered layout, so that it would expand to fill the screen, if or as the need arose. I wanted the contents of the middle column to remain centered horizontally at all times, but also ideally, to centre vertically and expand as well, to fill the vertical space...but somehow
    You seem to be asking for conflicting things here that don't make sense in a real layout.

    First of all you say you want a vertically centred layout that can expand with content?

    How can you vertically center a page of unlimited height. Do you want just the middle bit of the content showing in the vertical center with the rest of the page above and below the fold of the page. This would be nonsensical.

    If you want a vertically centred sited then it must be a fixed height otherwise there is really nothing to center. This also means that you would have to apply overflow to the container and have scrollbars on the container and not on the browers window.

    There is no point in vertically centering a site unless it is the same fixed height on each page. If it is a variable height then the result would be awful amd extremely annoy users as the site would jump up and down depending on the amount of content on each page.

    Here is an examle of a centred vertical and horizontal site.

    http://www.pmob.co.uk/temp/centred-vert-hoz2.htm
    http://www.pmob.co.uk/temp/flashbg2.htm

    As you see it needs to be a fixed height and the scrollbar must be on the inner container and not the browser window.

    I wanted the contents of the middle column to remain centered horizontally at all times, but also ideally, to centre vertically and expand as well, to fill the vertical space...


    If the layout expands to fill the vertical space then it can't possibly be vertically centered. - What do you really want here -I'm not understanding this at all.

    If you want a lyaut that stretched to the bottom of the page then you need a basic 100% high layout like this example.

    http://www.pmob.co.uk/temp/sticky-footer.htm

    three-column "liquid" layout, with the left column in a stationary position with its content "fixed," flush left and aligned to the top of the page, and the right column flush right and (if this is even possible), adjusting itself to remain vertically centered
    Now you really lost me here

    If the left column is a fixed positoned element and flush to the top of the page it will look very odd and disjointed if the rest of the page is vertically centred. You say that you want a simple layout but it seems you want something that is virtually impossible to achieve (even with tables) and something that is not going to work in the real world. A web page is a living breathing thing and doesn't live on an A4 sheet of paper.

    Your example picture (page.html) shows nothing of these things and just looks like a 3 column layout.

    You will alos run into trouble trying to have a fixed positioned left column because IE6 doesn't understand fixed positioning at all. There are some complicated hacks that can imitate fixed positionng in IE6 but they are extremely complicated and unstable unless you know 100% what you are doing.

    There is also the issue that you are hosting this on geocities site and they apply a load of rubbish above your doctype. This means that you won't even be absle to use fixed positioning in IE7 either because the content above the doctype will force IE7 into quirks mode and it won't understand Fixed positioning in quirks mode as it will behave more like ie5/6 instead.

    You could use an "expression" to create fixed columns in IE6 and the basic example goes like this.

    http://www.pmob.co.uk/temp/fixed-sidebars.htm

    However fixed elements should be used in very small doses because if the fixed element reaches below the fold of the page the content will be unreachable because it is fixed and can't be scrolled.

    So for a question you say is "simple" the answer indeed is complicated because the dynamics of a web page don't fit into simple descriptions.

    So before I can offer specific help you need to decide exactly what you want and describe the behaviour you expect.

    If you want the site vertically centred then what exactly do you mean?

    How is that going to work in a real situation with different length pages that go below the fold. As I said above vertically centred sites are only a viable proposition if you have a fixed height site that is the same on very page otherwise it makes no sense in a real situation. Even then vertically centred sites aren't really that usable and only suitable for small sites with little content.

    In essence it looks like you just want a three column centred layout with min and max widths. It is not usually a good idea to have three fluid columns because narrow columns are more suited ot be a fixed width. usually the centre column would be fluid and the side columns fixed. e.g. like this.

    Lastly, think hard about using fixed positiong as it won't work in IE6 and it won't work in IE7 if you host on geosites unless you can get rid of the junk above the doctype.

    I use a fixed position left side menu on my site but I let IE have a normal menu. Also the menu is very short whch means I will never have to worry about it going below the fold of the page and being unreachable or having to have scrollbars appear on it.

    Sorry to sound a little negative but you need to be clear about the dynamics of what you want before we can attempt to fix it.

  5. #5
    Non-Member eautocad's Avatar
    Join Date
    Jul 2008
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i still had a cool picture... it was relevant, right? Tables ya know...

  6. #6
    SitePoint Enthusiast
    Join Date
    Jun 2007
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi CoolHandLuke, great screen name. How many eggs can you eat? :-)

    Can I ask what the goal of your site is?

    If making money is the goal, I suggest you abandon learning design for now, and get some kind of web builder where you just paste your article in to a form, and then click a button to publish. There are many such services. Too many to suit me :-) but that's good for you.

    If you don't care about making money, and just enjoy the challenge of learning web technology, then of course, please ignore this post. Either way, good luck!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •