Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New Coder
    Join Date
    Sep 2004
    Posts
    60
    Thanks
    1
    Thanked 0 Times in 0 Posts

    creating a rows and columns with css

    I'm fiddling with positioning, and I've hit a road block.

    I basically want to create a table like layout, but not use tables at all. Instead of a 'table cell', I am calling each box a 'div cell'.

    However, the 'div cells' I'm attempting to create are all jumbled:

    http://atheg.com/css_tables.html

    I want to contain all the cells inside a containing div so that I can move them anywhere by moving the containing div. However, each 'div cell' seems to be relating to the 'div cell' that preceded it as the containing block and I must make my positioning relative to that preceding 'div cell' and not the div that contains them all. Is this correct?

    Also, it seems that each div cell in a row is off by a few pixels lower than the div cell that preceded it. Any ideas why?

    Why are the second and third rows so far down?

    Why does the div that contains all the div cells not wrap around all of them and instead form a narrow rectangle on the left side of the screen?

    Thanks for any insight.

  • #2
    Regular Coder
    Join Date
    Oct 2006
    Posts
    181
    Thanks
    1
    Thanked 6 Times in 6 Posts
    ok, your problem with the cells being a couple of pixels different is something to do with the borders of the cells....

    if you increase the second div_cell by 2 pixels, top and 2 pixels left, it shows OK, but then the 3rd div_cell has to be +4 top and +4 left, cos the borders are incrementing all the time by 2...

    does this make sense..????
    Last edited by Shoot2Kill; 10-24-2006 at 03:17 AM.

  • #3
    Regular Coder
    Join Date
    Oct 2006
    Posts
    181
    Thanks
    1
    Thanked 6 Times in 6 Posts
    Sorry For Mis-post, See Next Post..

    I Got This One Wrong, And Forgot To Edit...
    Last edited by Shoot2Kill; 10-24-2006 at 03:17 AM.

  • #4
    Regular Coder
    Join Date
    Oct 2006
    Posts
    181
    Thanks
    1
    Thanked 6 Times in 6 Posts
    OK.. SORRY FOR TRIPLE POST, BUT I THINK I HAVE WHAT YOU ARE LOOKING FOR.. THE CODE HAS GOT A BIT LONGER, BUT IT WORKS, AND USING DIV's...

    HERE IT GOES...

    Code:
    <html>
    <head>
    	<title>css tables</title>
    
    <style>
    #parentbox1 {
    position: relative;
    left: 150;
    top: 300;
    }
    #parentbox2 {
    position: relative;
    left: 150;
    top: 402;
    }
    #parentbox3 {
    position: relative;
    left: 150;
    top: 504;
    }
    #nestedbox1 {
    position: absolute;
    width: 190px;
    height: 100;
    border: solid #000000 1px;
    }
    #nestedbox2 {
    position: absolute;
    width: 190px;
    height: 100;
    left: 192px;
    border: solid #000000 1px;
    }
    #nestedbox3 {
    position: absolute;
    width: 190px;
    Height: 100;
    left: 384px;
    border: solid #000000 1px;
    }
    </style>
    </head>
    
    <body>
    
    <div id="parentbox1">
    <div id="nestedbox1">key:0|<br>top:0|<br>left:0|<br>key%3:0<br></div>
    <div id="nestedbox2">key:1|<br>top:-210|<br>left:190|<br>key%3:1<br></div>
    <div id="nestedbox3">key:2|<br>top:-420|<br>left:380|<br>key%3:2<br></div>
    </div>
    <div id="parentbox2">
    <div id="nestedbox1">key:3|<br>top:0|<br>left:0|<br>key%3:0<br></div>
    <div id="nestedbox2">key:4|<br>top:-210|<br>left:190|<br>key%3:1<br></div>
    <div id="nestedbox3">key:5|<br>top:-420|<br>left:380|<br>key%3:2<br></div>
    </div>
    <div id="parentbox3">
    <div id="nestedbox1">key:6|<br>top:0|<br>left:0|<br>key%3:0<br></div>
    <div id="nestedbox2">key:7|<br>top:-210|<br>left:190|<br>key%3:1<br></div>
    <div id="nestedbox3">key:8|<br>top:-420|<br>left:380|<br>key%3:2<br></div>
    </div>
    
    </body>
    </html>
    Last edited by Shoot2Kill; 10-24-2006 at 03:19 AM.

  • #5
    New Coder
    Join Date
    Sep 2004
    Posts
    60
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Very cool, thanks!

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,485
    Thanks
    6
    Thanked 981 Times in 954 Posts
    May I ask what you are intending to achieve with this kind of layout?

  • #7
    New Coder
    Join Date
    Sep 2004
    Posts
    60
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    May I ask what you are intending to achieve with this kind of layout?
    As much control of the layout as possible.

    Are you going to propose using a table?

    There are number of graphical elements that are going to be placed ontop of each 'box', and I am going to be using css to manage that. I want as much control over everything as possible.

    A table might work, but would rather have to use a table because of a shortcoming of css, not because I don't know css very well.

  • #8
    New Coder
    Join Date
    Sep 2004
    Posts
    60
    Thanks
    1
    Thanked 0 Times in 0 Posts
    A follow up question.

    If a user has the text set in their browser to be increased by 1 or 2, the text overflows the boundries.

    A solution might be to not specify the height of each box and insert a transparent gif with a height of 100 in each box. That way, the box will not shrink to less then 100 pixels, and everything will be uniform.

    Is there a way to have the boundries expand and push the other boxes below it done like a table does? I have failed at my attempt to have it work correctly:

    http://atheg.com/css_tables2.html

    I'm not sure why there is such a huge space between each row or why each box becomes staggered with the increase in text size.

  • #9
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    would it not just be easier to do something like:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>???</title>
    <style type="text/css" media="screen">
    .parentbox {
    border: 4px solid #dd9;
    float: left;
    clear: left;
    width: 606px;
    }
    .nestedbox {
    float:left;
    width: 200px;
    border: 1px solid #000;
    }
    </style>	
    </head>
    <body>
    <div class="parentbox">
    <div class="nestedbox">key:0|<br>top:|<br>left:|<br>key%3:<br></div>
    <div class="nestedbox">key:1|<br>top:|<br>left:|<br>key%3<br></div>
    <div class="nestedbox">key:2|<br>top:|<br>left:|<br>key%3:<br></div>
    </div>
    <div class="parentbox">
    <div class="nestedbox">key:0|<br>top:|<br>left:|<br>key%3:<br></div>
    <div class="nestedbox">key:1|<br>top:|<br>left:|<br>key%3<br></div>
    <div class="nestedbox">key:2|<br>top:|<br>left:|<br>key%3:<br></div>
    </div>
    <div class="parentbox">
    <div class="nestedbox">key:0|<br>top:|<br>left:|<br>key%3:<br></div>
    <div class="nestedbox">key:1|<br>top:|<br>left:|<br>key%3<br></div>
    <div class="nestedbox">key:2|<br>top:|<br>left:|<br>key%3:<br></div>
    </div>
    </body>
    </html>
    only have to define the parent and nested boxes once in the css. I made them 200p xwide for easier math.

    the nesteds have a 1px border (so 2px is the sum of both sides) and that gets added to thier overall width. That explains the width of 606px for the parent div. Don't apply padding to the nesteds as that will stretch them and they will break. instead you coul duse lists inside them and adjust th epadding/margins of them. a little more content control. plus it seems your writing lists anyways so...

    like so:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>???</title>
    <style type="text/css" media="screen">
    .parentbox {
    border: 4px solid #dd9;
    float: left;
    clear: left;
    width: 606px;
    }
    .nestedbox {
    float:left;
    width: 200px;
    border: 1px solid #000;
    }
    .nestedbox ul {
    list-style: none;
    padding: 0;
    margin: 8px;
    }
    </style>	
    </head>
    <body>
    <div class="parentbox">
    <div class="nestedbox"><ul><li>key:0</li><li>top:</li><li>left:</li><li>key%3:</li></ul></div>
    <div class="nestedbox"><ul><li>key:0</li><li>top:</li><li>left:</li><li>key%3:</li></ul></div>
    <div class="nestedbox"><ul><li>key:0</li><li>top:</li><li>left:</li><li>key%3:</li></ul></div>
    </div>
    <div class="parentbox">
    <div class="nestedbox"><ul><li>key:0</li><li>top:</li><li>left:</li><li>key%3:</li></ul></div>
    <div class="nestedbox"><ul><li>key:0</li><li>top:</li><li>left:</li><li>key%3:</li></ul></div>
    <div class="nestedbox"><ul><li>key:0</li><li>top:</li><li>left:</li><li>key%3:</li></ul></div>
    </div>
    <div class="parentbox">
    <div class="nestedbox"><ul><li>key:0</li><li>top:</li><li>left:</li><li>key%3:</li></ul></div>
    <div class="nestedbox"><ul><li>key:0</li><li>top:</li><li>left:</li><li>key%3:</li></ul></div>
    <div class="nestedbox"><ul><li>key:0</li><li>top:</li><li>left:</li><li>key%3:</li></ul></div>
    </div>
    </body>
    </html>
    have fun
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #10
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    as for your last questino about the heights:

    Code:
    .nestedbox {
    float:left;
    width: 200px;
    border: 1px solid #000;
    _height: 100px;
    min-height: 100px;
    }
    can make them all the same base height (ie a minimum of 100px). The underscore calls out IE PC. Not sure if IE7 does min-height. if it does it should read the _height and then over ride it with the min-height.

    as for making th borders expand... well you can give the parents a top and bottom border and then make an image that has the 3 vertical borders in it. make that image the background of the parent and then turn off the borders on the nesteds. it will apper that the nesteds have the same borders yet it will actually be the background of the parent.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #11
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,485
    Thanks
    6
    Thanked 981 Times in 954 Posts
    Quote Originally Posted by mbannonb View Post
    Are you going to propose using a table?
    Of course I'm not gonna propose a table to layout your page. I was just asking because I suspected you would try to simulate a table with divs and CSS because you heard that tables are "bad" and shouldn't be used at all. That's just as wrong as using tables for layout.

    But I still think you have a slightly wrong approach because your HTML structure doesn't really reflect a semantical structure (and your way of thinking in "cells" shows that too). You should at first sort your document that users will get the message even without styles enabled/applied. Then comes CSS to style the page. And you can have as much control over semantically correct HTML as you think you have with your current HTML. Look at http://csszengarden.com, these guys and girls have the control to make one and the same page look totally different just with CSS.

  • #12
    New Coder
    Join Date
    Sep 2004
    Posts
    60
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ok, thanks for everyone's input!

    I've been fiddling with the code all week, and I can't seem to get beyond this current problem.

    I've started to add graphics, and I've pulled a sample section to demonstrate the issue.

    I'm experiencing some problems with specified widths appearing as different sizes in different browsers.

    That is, a block element set to 177 width fits in ff, but not ie.

    Take a look at the following in ie and firefox:

    http://gcgz.com/css.html

    If I get the user agent on the server side and set the width for the url list and bottom shadow accordingly, it may work, but that sounds horrible.

    Are there any other solutions to this? Is there another way to do this?

    In addition to the url list not fitting correctly, the shadow image at the bottom of the content box ends up pushing the right shadow away from the content box and leaving a white bar between the right shadow and the content box. Specifying the width causes the same problem.

    Another problem: how can I keep the right vertical shadow from expanding to the size of the whole page and only extending or reducing to match the content box with it expands or reduces?

    Thanks for any help.

  • #13
    New Coder
    Join Date
    Sep 2004
    Posts
    60
    Thanks
    1
    Thanked 0 Times in 0 Posts
    It might be simpler to just view this in ie and then in firefox.

    http://atheg.com/css_prob.html

    In ie's case, the width of 183 for the links aligns perfectly with the image that is at 183 width.

    In ff's case, the width of 183 is 6 pixels off. I guess firefox is not counting the 2 borders of 2 pixels each.


  •  

    Posting Permissions

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