[RESOLVED] Tables in CSS questions
A Flash Developer Resource Site

Page 1 of 2 12 LastLast
Results 1 to 20 of 24

Thread: [RESOLVED] Tables in CSS questions

  1. #1
    Mental Deficit Nionicle's Avatar
    Join Date
    Mar 2002
    Location
    Utah, Hyrum
    Posts
    1,348

    [RESOLVED] Tables in CSS questions

    Trying to get maincenter centered. And mainleft and mainright to use the rest of the space that maincenter doesn't use.
    And then how would I get a flash movie Inside of maincenter?
    Thanks in advance.
    Here is the code I am working with.

    Code:
    <html>
    <head>
    <title>Mike Owns?</title>
    
    <style type="text/css">
    	
    	body {
    		margin:0px 0px 0px 0px;
    		padding:0px;
    		}
    	
    	#mainleft {
    		width:5%;
    		height:100%;
    		float:left;
    		background:#fff;
    		padding-bottom:10px;
    		}
    
    	#maincenter {
    		width:800;
    		height:100%;
    		float:left;
    		background: url(bg.jpg) repeat right; 
    		padding-bottom:10px;
    		}
    	
    	#mainright {
    		width:5%;
    		height:100%;
    		float:right;
    		background:#fff;
    		padding-bottom:10px;
    		}
    	
    </style>
    </head>
    
    <body>
    <div id="mainleft">
    </div>
    <div id="maincenter">
    </div>
    <div id="mainright">
    </div>
    </body>
    
    </html>
    I can only postulate the probability of performing at a paramount level of perfection praised by the pulchritudinous paragon whose only practice is to preserve such a paradigm.

  2. #2
    Senior Member
    Join Date
    Apr 2002
    Posts
    2,849
    Well when you set a width, always specify the unit. 800 should be 800px, probably. But for a three column layout I'd recommend: http://www.alistapart.com/articles/negativemargins/

  3. #3
    Mental Deficit Nionicle's Avatar
    Join Date
    Mar 2002
    Location
    Utah, Hyrum
    Posts
    1,348
    Hmmm
    I can't figure out how I would do it still.
    I know that the center column I want to be 800 pixels wide.
    And the side 2 columns to take up the rest of the area.
    but I can't figure out how to do that.
    I can only postulate the probability of performing at a paramount level of perfection praised by the pulchritudinous paragon whose only practice is to preserve such a paradigm.

  4. #4
    Senior Member ihoss.com's Avatar
    Join Date
    Oct 2004
    Location
    Norway
    Posts
    581
    This is the best I could come up with. Its not perfect, but it does what you asked for as best as possible in css. A better solution would be to either make them all constant width or make the center one expand.

    The grey background is just for indication. I would set it background to transparent, so it looks like the body background is the background of the sidebars. Then I would give them a border-bottom.

    Code:
    html, body{
    width: 100%;
    margin: 0;
    padding: 0;
    background: #99CCFF;
    min-width: 800px;
    }
    #mainleft{
    padding: 10px;
    float: left;
    width: auto;
    background: #CCC;
    height: 500px;
    max-width: 20%;
    margin: 0 -20% 0 0;
    }
    #maincenter{
    padding: 10px;
    border: 1px solid #000033;
    width: 400px;
    background: #FFF;
    height: 500px;
    margin: 0px auto 0px auto;
    position: relative;
    }
    #mainright{
    max-width: 33%;
    padding: 10px;
    float: right;
    width: auto;
    background: #CCC;
    height: 500px;
    margin: 0 0 0 -20%;
    }
    
    
    
    <div id="mainleft">
    this is to the left. If I keep writing it will eventually break.
    </div>
    <div id="mainright">
    this is to the right
    </div>
    <div id="maincenter">
    this is center
    </div>

  5. #5
    Mental Deficit Nionicle's Avatar
    Join Date
    Mar 2002
    Location
    Utah, Hyrum
    Posts
    1,348
    Hmmm... This isn't quite turning out as expected.
    I want my left bg to flow seamlessly with the bg in the center content
    so i need my background in the left column to tile from the right.
    Is there any other scripting language I can use to get the same effect without lots and lots of extra scripting?
    I can only postulate the probability of performing at a paramount level of perfection praised by the pulchritudinous paragon whose only practice is to preserve such a paradigm.

  6. #6
    Senior Member ihoss.com's Avatar
    Join Date
    Oct 2004
    Location
    Norway
    Posts
    581
    you could use javascript.

    document.getElementById("mainleft").style.width = (window.innerWidth-800)/2 + "px";

  7. #7
    Mental Deficit Nionicle's Avatar
    Join Date
    Mar 2002
    Location
    Utah, Hyrum
    Posts
    1,348
    Ohhh man.
    That rocks.
    I am just not sure how to implement it.
    Never really used anything but html before.
    I can only postulate the probability of performing at a paramount level of perfection praised by the pulchritudinous paragon whose only practice is to preserve such a paradigm.

  8. #8
    Mental Deficit Nionicle's Avatar
    Join Date
    Mar 2002
    Location
    Utah, Hyrum
    Posts
    1,348
    Hmmm I think I understand.
    If not I will edit this post and let you =)
    I can only postulate the probability of performing at a paramount level of perfection praised by the pulchritudinous paragon whose only practice is to preserve such a paradigm.

  9. #9
    Senior Member ihoss.com's Avatar
    Join Date
    Oct 2004
    Location
    Norway
    Posts
    581
    Code:
    <html>
    <head>
    <title>
    <style>
    #maincenter{
    padding: 10px;
    border: 1px solid #000033;
    width: 800px;
    background: #FFF;
    margin: 0px;
    position: relative;
    }
    </style>
    <script>
    function doload(){
    document.getElementById("mainleft").style.width = (window.innerWidth-800)/2 + "px";
    document.getElementById("mainright").style.width = (window.innerWidth-800)/2 + "px";
    }
    </script>
    </head>
    <body onload="doload">
    <div id="mainleft">
    this is to the left. If I keep writing it will eventually break.
    </div>
    <div id="mainright">
    this is to the right
    </div>
    <div id="maincenter">
    this is center
    </div>
    </body>
    </html>
    I havent tested it, but it should work.
    Last edited by ihoss.com; 03-25-2007 at 12:40 PM.

  10. #10
    Mental Deficit Nionicle's Avatar
    Join Date
    Mar 2002
    Location
    Utah, Hyrum
    Posts
    1,348
    Haha I just did that... pretty similar atleast.
    I must thank you for all your help.
    I hope you didn't mind my silly questions because I will probably have more
    Code:
    <html>
    <head>
    <title>Mike Owns?</title>
    
    <style type="text/css">
    	
    	body {
    		margin:0px 0px 0px 0px;
    		padding:0px;
    		}
    	
    	#mainleft {
    		height:100%;
    		float:left;
    		background: url(BGL.jpg) repeat right; 
    		}
    
    	#maincenter {
    		width:800px;
    		height:100%;
    		float:left;
    		}
    	
    	#mainright {
    		height:100%;
    		float:right;
    		background: url(BGR.jpg) repeat right; 
    		}
    	
    </style>
    </head>
    
    <body>
    
    <div id="mainleft">
    </div>
    <div id="maincenter">
    </div>
    <div id="mainright">
    </div>
    
    <script>
    document.getElementById("mainleft").style.width = (window.innerWidth-800)/2 + "px";
    document.getElementById("mainright").style.width = (window.innerWidth-800)/2 + "px";
    
    </script>
    
    </body>
    
    </html>
    I can only postulate the probability of performing at a paramount level of perfection praised by the pulchritudinous paragon whose only practice is to preserve such a paradigm.

  11. #11
    Mental Deficit Nionicle's Avatar
    Join Date
    Mar 2002
    Location
    Utah, Hyrum
    Posts
    1,348
    I noticed I don't have your function doload

    is it necessary? It seems to work for me without it.
    I can only postulate the probability of performing at a paramount level of perfection praised by the pulchritudinous paragon whose only practice is to preserve such a paradigm.

  12. #12
    Senior Member catbert303's Avatar
    Join Date
    Aug 2001
    Location
    uk
    Posts
    11,222
    No, I think you should be OK. Generally when working with a Javascript that modifies the page you want to wait until all the elements are loaded before trying to do anything:

    For example if your script tried to do

    Code:
    document.getElementById("mainleft").style.width = (window.innerWidth-800)/2 + "px";
    before the browser had downloaded the part of the document that contained the element 'mainleft' - you'd get errors because document.getElementById("mainleft") wouldn't return any useful value.

    ihoss used a function which is called from the onload event handler on the body element to do this. It's generally a little "cleaner" to do it this way - you can keep your script separate from the HTML - but with simple scripts just placing them in the source after the elements they need to work with (as you have done) should be fine - if the browser has reached your script in the source it must've already seen the part where the elements were created.


    Side note....

    Actually, placing the script in the HTML actually does have one slight advantage too - the onload event waits until all elements in the page have been loaded (images and so on) so if you have lots of big images in the page using onload you might have to wait a while before the Javascript is run. Hence there could be a bit of a delay before the script corrects the column widths. Some modern browsers (e.g. Firefox and Opera) provide a DOMContentLoaded event which solves this problem very nicely but it's not supported everywhere.
    Last edited by catbert303; 03-26-2007 at 09:02 AM.

  13. #13
    Mental Deficit Nionicle's Avatar
    Join Date
    Mar 2002
    Location
    Utah, Hyrum
    Posts
    1,348
    Why isn't my code working in Internet Explorer?
    www.nionicle.f2o.org
    I can only postulate the probability of performing at a paramount level of perfection praised by the pulchritudinous paragon whose only practice is to preserve such a paradigm.

  14. #14
    Senior Member catbert303's Avatar
    Join Date
    Aug 2001
    Location
    uk
    Posts
    11,222
    Ah, I think innerWidth and innerHeight were netscape inventions. They aren't supported in IE. Quirksmode has a script for getting the dimensions of the window across different browsers - http://www.quirksmode.org/viewport/compatibility.html

  15. #15
    Junior Member
    Join Date
    Mar 2007
    Posts
    21
    Can be all done in CSS.

    There's two ways of doing this :

    1. Know the width of each boxes and calculate, for EACH boxes, where they'll need to be placed (from center point). Can be a REAL pain if you have lots of boxes

    or

    (the one I suggest)
    2. make ONE box that will contain everything and have it centered. Everything inside the container could be relative and you would still have your layout centered. If you're using graphics (movies, pics, etc) I suggest you do your boxes in fixed sizes rather that %% as it could mess up your layout big time.

    here's the code to do a vertically centered box :



    Code:
    #container {
         position:absolute; /* HAVE to be */
         width: 500px; /* size of the box */
         left: 50%; /* centered but from left side of your box */
         margin-left: -250px; /* 50% - half width of the box. if box is 800 then this line need to be 400, etc. */
         }


    make a little DIV for container with some text and you'll see, it works.

  16. #16
    Junior Member
    Join Date
    Mar 2007
    Posts
    21
    In case you want want to use 100% width anyway, here's what it will have to look like


    Code:
    #left {
    	background: #CCCCCC;
    	position: absolute;
    	width: 25%;
    	top: 0px;
    	left: 0px;
    }
    
    #center {
    	background: #000000;
    	position: absolute;
    	width: 50%;
    	top: 0px;
    	left: 25%;/* starts at the end of your left box */
    }
    
    #right {
    	background: #CCCCCC;
    	position: absolute;
    	width: 25%;
    	top: 0px;
    	right: 0px;
    }

    Biggest inconvenient in this method is that width of each column have to be in %%, you couldnt have your center box set to 600px or 800px let's say and the sides in %%.

    If you really want to use 100% of the width but have a fixed size for the centered box, than the easiest way would be tables (fixed size for the center cell).

  17. #17
    Mental Deficit Nionicle's Avatar
    Join Date
    Mar 2002
    Location
    Utah, Hyrum
    Posts
    1,348
    Hey thanks for the reply 1407
    But I think Catbert has what I am looking for right now.
    Just not sure how to add it into my current code.
    I can only postulate the probability of performing at a paramount level of perfection praised by the pulchritudinous paragon whose only practice is to preserve such a paradigm.

  18. #18
    Junior Member
    Join Date
    Mar 2007
    Posts
    21
    What Cathbert should work no problems, might need a little tweaking but that's about it. Only thing is this wouldnt fix your "left bg image" issue.

    If by left bg image you mean the little blue bars on the sides of your layout, you could probably do it by having five columns instead of three.

    Something along the lines of :


    Code:
    #leftside
    
    
    #leftside-bg (width will be the one of your left bg image - set up background for that column and you're good.)
    
    
    #center
    
    
    #rightside-bg (same as #leftside-bg, even if you don't use a bg image for the right side, keeps everything centered)
    
    
    #rightside

    Something similar to this should work. You should have everything centered and it should also fix your issue with the left bg image.

    Didnt test this out, but you get the general idea.

  19. #19
    Mental Deficit Nionicle's Avatar
    Join Date
    Mar 2002
    Location
    Utah, Hyrum
    Posts
    1,348
    1407
    Are you viewing with Internet Explorer?
    I am only able to get it to look proper in Mozilla Firefox.
    There should be a blue background not just a bar.
    I am thinking the bar you are seeing is part of the #maincenter back ground.
    The sides have a blue background that should flow seamlessly with maincenter.
    I can only postulate the probability of performing at a paramount level of perfection praised by the pulchritudinous paragon whose only practice is to preserve such a paradigm.

  20. #20
    Junior Member
    Join Date
    Mar 2007
    Posts
    21
    Quote Originally Posted by Nionicle
    1407
    Are you viewing with Internet Explorer?
    I am only able to get it to look proper in Mozilla Firefox.
    There should be a blue background not just a bar.
    I am thinking the bar you are seeing is part of the #maincenter back ground.
    The sides have a blue background that should flow seamlessly with maincenter.
    yes, with I.E. : I always try I.E. first as it is the browser that gives the most headaches when it comes to CSS.

    On the link you posted everything seems to be left aligned, didnt look at your code though, only the layout.



    If I understand correctly what you're saying, e.g. having a left bg that will go from right to left instead of left to right (sort of), I don't see how it will be possible without lots and lots of coding.

    You might make it work, but the end result will look very bad in some resolutions, after all you don't really control the width of your left/right side since they depend ond the visitor.


    Personally I would do one of the following

    1. make my layout as small as possible, 1024 should be good, have everything of absolute values (left side of 100px, 200px, etc depending on your need)

    2. kill the left bg image

    3. detect resolution and redirect visitors to a diffferent page depending on resolution


    There might be other solutions, but it's hard to say without knowing what the end result is supposed to look like.

Posting Permissions

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




Click Here to Expand Forum to Full Width


HTML5 Development Center

Poll by Flashkit.com