SitePoint Sponsor

User Tag List

Results 1 to 23 of 23
  1. #1
    SitePoint Member
    Join Date
    Jan 2005
    Location
    Maryland
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question CSS 3 equal columns using javascript

    Hello, My name is Angela. I'm new to all of this. html, xhtml, css and javascript. My brain is fried. Just spent another sleepless night fighting with The Holy Grail. I have read many things and have tried to make many of them work but all has failed. The only thing that does work is hiding tables. This is not good. That was very time consuming and I did not like the look of the code.
    I am thinking I must be trying to do something thats just not possible. BUT I refuse to give up. My last attempt to fix this problem involved adding javascript. I think of all the solutions I have seen this is one I would like to work with. I download the script from Cross-Browser.com. I could not find a script called x.js but i did locate one called layout2.js. I then upload it to my site. But not even sure I did this correctly.

    www.marriagemenders.net/test.htm ---- tried to use javascript.
    www.marriagemenders.net/index.htm ---- Used a lot of tables.

    I read most of the post here and I am still lost. could someone please take a look and tell me if I am missing something. And any ideas of others way to accomplish this layout would be useful too.

    I am building this site as one of the counselors and its a non profit ministry.

    Thank you,
    Angela
    Last edited by Aemissary; Jan 15, 2005 at 06:58. Reason: mispelling

  2. #2
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I dont understand why you want to solve this with JavaScript though, why not use CSS only?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    	"http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <style type="text/css">
    #wrapper
    {
    	width:750px;
    	background:orange;
    }
    
    #leftMenu
    {
    	float:left;
    	width:250px;
    	height:300px;
    	background:blue;
    }
    
    #rightMenu
    {
    	float:right;
    	width:250px;
    	height:300px;
    	background:green;
    }
    
    #content
    {
    	margin:0 250px;
    }
    </style>
    </head>
    
    <body>
    <div id="wrapper">
    	<div id="leftMenu"></div>
    	<div id="rightMenu"></div>
    	<div id="content">
    		Content!<br/>
    	</div>
    </div>
    
    
    </body>
    </html>
    Or do you mean that it should be like a newspaper, that the text starts in the first column and continues on the second, even if you resize?

  3. #3
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you looking for something like this?

  4. #4
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For your test.htm, you also need the files x_core.js and x_event.js.
    Then look at the top of layout2.js and change the urls.

    Whether you decide to go with a pure CSS solution or a Javascript solution is completely your choice.

    I think a combination is best. Start with a basic CSS layout. Then enhance it with Javascript. Now if a user has js disabled your page will downgrade to the CSS layout. This is the idea behind Kevin's demo, which you found at my site as layout2.

  5. #5

  6. #6
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I fail to see why JavaScript should be used when you can solve it with CSS...

  7. #7
    SitePoint Member egone's Avatar
    Join Date
    Jan 2005
    Location
    Munich, Germany
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Why Javascript?

    You should only have to use javascript when absolutely necessary, such as in functionality aspects (ie. perhaps navigation, cookies...etc.), but never ever when it deals with general layout. Why would you want to do that, when creating it in pure XHTML an CSS would be the best and easiest way to go. Even if you do go this route, incorporating useless javascript for general layout will set up tons of potential landmines when the site is accessed via browsers like IE.

    Your needs can be completely fulfilled with CSS only, which is much cleaner, will certainly validate, and will help you lead a life of peace and harmony. A good site to get a head start on CSS layouts is:

    http://www.thenoodleincident.com/tut...son/boxes.html

    And in case you run into the problem of having all columns have the same height and that they run together exactly, then this page will come in handy:

    http://www.positioniseverything.net/easyclearing.html

    Hope this helps,

    Daniel

  8. #8
    SitePoint Member
    Join Date
    Jan 2005
    Location
    Maryland
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pepejeria
    Or do you mean that it should be like a newspaper, that the text starts in the first column and continues on the second, even if you resize?
    Like a newspaper is right. I want my title centered over 3 colomns. But I want margins (the white) before Left and after Right. Both left and right will be used mostly for links or other text. And I would also like a footer.

    Using just css would be great but from all I have seen so far it does not seem possible. Every page of the site will be different lengths in the content area.

  9. #9
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's good to hear other's opinions... but of course Angela is free to choose whichever solution she wants.

    Let's not forget... this is the Javascript forum. Just in case you guys are lost, here's a link back to the CSS forum

  10. #10
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    BonRouge has a very nice CSS layout. And there are others. I would start with a CSS layout that is as close as possible to what you want - then you can add js if it is needed.

    On the other hand, if you'd like to try a css-only solution, visit the CSS forum, those guys are really good and they have some amazing 3-column css-only layouts.

  11. #11
    SitePoint Member egone's Avatar
    Join Date
    Jan 2005
    Location
    Munich, Germany
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Who said anyone was forcing Angela to make a choice? There's no need to mix a site with unnecessary code just because it's possible. It's better to take the cleaner and standards-compliant route to help make her site visible in as many browsers as possible. But if she wants to take the mixed javascript/css route, that is her choice.

  12. #12
    SitePoint Member
    Join Date
    Jan 2005
    Location
    Maryland
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    [QUOTE=MikeFoster]For your test.htm, you also need the files x_core.js and x_event.js.
    Then look at the top of layout2.js and change the urls.

    Hi Mike It was your work I was trying use. I had thought that using the javascript would work better in the long run as I am working on many pages. I think your saying I need to download x_core.js and x_event.js then upload them to my space and link them in the head section of my pages. I really need to know more about using JS. I will do a little research but in the mean time should the the code look similiar to:

    * <script type="text/javascript" src="x.js"></script>
    <script type="text/javascript">*

    With just the names changed.

    And in the end I would have layout2, x_core and x_event .js all there.

    I promise I am not blonde. Just ingnorant. I will learn.

  13. #13
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Aemissary, I certainly don't think you're ignorant. We all have to start at the beginning when we learn new things. But be aware that you're choosing a non-trivial project to 'begin' with.

    The file x.js is no longer used. That file was broken up into smaller files: x_core.js, x_event.js, etc.

    Look in the file layout2.js, at the top. There are document.write statements there. Change the URLs to point to where you put x_core.js and x_event.js. For example if you put them in the same folder as the html file...
    Code:
    if (document.getElementById || document.all) { // minimum dhtml support required
      document.write("<"+"script type='text/javascript' src='x_core.js'><"+"/script>");
      document.write("<"+"script type='text/javascript' src='x_event.js'><"+"/script>");
      document.write("<"+"style type='text/css'>#footer{visibility:hidden;}<"+"/style>");
      window.onload = winOnLoad;
    }

  14. #14
    SitePoint Member
    Join Date
    Jan 2005
    Location
    Maryland
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Mike, Thank you for your reply. It was very helpful. Thanks to everyone else too.

    By using the word ignorant I was meaning to say unlearned or unaware. When I read your reply I had no idea how or where to apply to page. After a crash course in javascript I was able to get it written into the page. It is functioning with a few problems.

    1. I.E 6 says I have a 'winOnLoad' is undefinded error. After clicking OK it Then loads(maximized) all columns are equal with footer just under the right until I try to resize page smaller. Then right and footer moves under center.

    2. Netscape 7.2 is not playing nice at all. It does not like any of my pages bfeore or after J.Sscript. Right is loading directly under Left.

    I know its possible I missed something. Please take another look

    www.marriagemenders.net/test.htm

  15. #15
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Angela,

    I know this is the javascript forum and all that, but as egone said above - you really don't need javascript to do that. It's a simple enough layout and css will take care of it nicely.

    I think sometimes I'm 'guilty' of going for a javascript solution where it may not be necessary, but here I think css is definitely the best option (in my humble opinion).

    Anyway, have a look at this and see what you think.

    I really hope this helps you out a little.

  16. #16
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, what Angela asks for is columns like these. There is no CSS solution today that will work in all browsers, especially IE. But if all the users would be using Mozilla 1.8a (and the upcoming Firefox 1.1), then css columns (currently -moz-columns-count) could be used. There is an example of that here (Mozilla 1.8a4 required).

    But to have a working solution today, then JavaScript is required.

  17. #17
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see. I guess I misunderstood.
    Interesting to learn about the -moz-columns-count though. I didn't know about that.

    Edit:

    Actually, looking back at what MikeFoster's posted, I don't think I have misunderstood. I think this is the kind of layout we're talking about here. Check the links, read the posts and then tell me wrong.

  18. #18
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BonRouge
    Actually, looking back at what MikeFoster's posted, I don't think I have misunderstood. I think this is the kind of layout we're talking about here. Check the links, read the posts and then tell me wrong.
    Above she writes:
    Quote Originally Posted by Aemissary
    Like a newspaper is right. I want my title centered over 3 colomns.

  19. #19
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Aemissary, I certainly don't think you're ignorant. We all have to start at the beginning when we learn new things. But be aware that you're choosing a non-trivial project to 'begin' with.
    That is the main problem of 90% of the people who ask questions on this forum, and they just don't seem to get it.

  20. #20
    SitePoint Member
    Join Date
    Jan 2005
    Location
    Maryland
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BonRouge
    Hi Angela,

    Anyway, have a look at this and see what you think.

    I really hope this helps you out a little.
    Thank you for spending your time to do that. Its not exactly what I was trying to do but I can see that you at least get the columns equal. Is it possible to add margins to the page to give the appearance of additional columns in white just before the left and after the right columns? Another thought how bout this? CSS for 2 left columns, center content and 2 right columns.

    Meaning
    Header with img centered. Then Left white, Left Blue, Center content, Right Green, and Right white and finish it all off with a footer.

    I would like to focus on just css for layout but if its not possible I am willing to use javascript.

    Thanks again for you time. I really do appreciate the work you did.

  21. #21
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Angela,

    I'm glad I was kind of close anyway .

    How about this or possibly this ?

    (There is no javascript here by the way)
    Last edited by BonRouge; Jan 16, 2005 at 10:34.

  22. #22
    SitePoint Member
    Join Date
    Jan 2005
    Location
    Maryland
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Quote Originally Posted by BonRouge
    Angela,

    I'm glad I was kind of close anyway .

    How about this or possibly this ?

    (There is no javascript here by the way)
    I am super impressed. I think I like the first the best. I would just give the header a background color hoping that it sat on the columns a little tighter. Both are great though.

    May I use your code ?

    Thank you very much.

    Aemissary

  23. #23
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Of course you can use the code! That's what it's there for.

    The space you were seeing was actually part of your image. I've trimmed your image a little and it looks a bit better.

    When you download the page, make sure you get all the images (there are 3). In fact, just to make it easier, they're here :
    Attached Images Attached Images


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
  •